<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Верстаем админку на CSS Grid

Верстаем админку на CSS Grid

Административная панель - это одна из базовых вещей для практически любого веб-сайта. В данной статье мы посмотрим как создать базовый макет админки с помощью CSS Grid.

Сначала макет:

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title>Админка</title>
    <meta name="description" content="админка">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Стили -->
    
    <!-- Приводим стили к общему виду с помощью https://github.com/necolas/normalize.css -->
    <link rel="stylesheet" href="css/normalize.css">
    
    <link rel="stylesheet" href="css/main.css">

    <!-- Font Awesome иконки -->
    <script src="https://kit.fontawesome.com/4a23243fb41.js" crossorigin="anonymous"></script>

    <!-- jQuery и скрипты -->
    <script src="js/vendor/jquery-3.4.1.min.js"></script>
    <script src="js/main.js"></script>

</head>
<body>
    <!-- Главный контейнер -->
    <div class="container">

        <!-- Заголовок -->
        <header class="dashboard-header">
            <h1 class="dashboard-header__logo">Админка</h1>
        </header>

        <!-- Левое меню -->
        <nav class="sidebar-menu">
            <ul class="sidebar-menu__items">
                <li class="sidebar-menu__item">
                    <a href="#" class="sidebar-menu__item-title">
                        <span>Общие</span>
                        <i class="fas fa-caret-down"></i>
                    </a>
                    <ul class="sidebar-menu__subitems">
                        <li class="sidebar-menu__subitem">
                            <a href="/section.html">
                                <i class="fas fa-list-ul"></i>
                                <span>Разделы</span>
                            </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="/subsection.html">
                                <i class="fas fa-stream"></i>
                                <span>Категории</span>
                            </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-edit"></i>
                                <span>Статьи</span>
                            </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-user"></i>
                                <span>Пользователи</span>
                            </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-photo-video"></i>
                                <span>Медиа</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-menu__item">
                    <a href="#" class="sidebar-menu__item-title">
                        <span>Настройки</span>
                        <i class="fas fa-caret-down"></i>
                    </a>
                    <ul class="sidebar-menu__subitems">
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-database"></i>
                                <span> Общие</span>
                            </a>
                        </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-user-friends"></i>
                                <span>Пользователи</span>
                            </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-comment-alt"></i>
                                <span>Комментарии</span>
                            </a>
                        </li>
                        <li class="sidebar-menu__subitem">
                            <a href="#">
                                <i class="fas fa-info-circle"></i>
                                <span>Статистика</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- Главный контент -->
        <main class="main-content">
            <!-- Все содержимое страниц надо помещать здесь -->
        </main>


    </div>


</body>
</html>

Теперь стили:

html,
body {
    height: 100%;
}

body {
    box-sizing: border-box;
    font-family: "Segoe UI Light", sans-serif;
}


.container {
    height: 100%;
    display: grid;
    grid-template-columns: 200px 3fr;
    grid-template-rows: 50px calc(100% - 50px);
}

.container > * {
    border: var(--border);
    background: green;
}


/*
    Заголовок
 */

.dashboard-header {
    background: #000;
    color: #fff;
    padding-left: 15px;
    grid-column: span 2;
}

.dashboard-header__logo {
    font-size: 1.2em;
}



/*
    Левое меню
 */

/* ширина скролбара */
::-webkit-scrollbar {
    width: 1px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #092742;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.sidebar-menu {
    background-color: #0e2438;
    color: white;
    overflow-y: auto;
    scrollbar-color: red;
}

.sidebar-menu:hover .sidebar-menu__subitems {
    display: block;
}

.sidebar-menu__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-menu__item {

}

.sidebar-menu__item > a {
    text-decoration: none;
    color: white;
    font-size: 1em;
    display: block;
    margin: 1px 0;
    padding: 10px 10px;
    border: var(--border);
}

.sidebar-menu__item > a > i {
    float: right;
    padding-top: 2px;
    padding-right: 5px;
}

.sidebar-menu__item > a > i:first-child {
    float: left;
}

.sidebar-menu__item > a:hover {
    background-color: #0b1c68;
}


/*
Стили для подменю
 */

.sidebar-menu__subitems {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

.sidebar-menu__subitem {

}

.sidebar-menu__subitem > a {
    text-decoration: none;
    color: white;
    font-size: .9em;
    display: block;
    margin: 1px 0;
    padding: 10px 30px;
    border: var(--border);
}

.sidebar-menu__subitem > a:hover {
    background-color: #0b1c68;
}

.sidebar-menu__subitem > a > i:first-child {
    padding-right: 5px;
}


/*
    Главный контент
*/

.main-content {
    background-color: #f0f0f0;
}

Скрипты:

$(function() {

    /**
     * Левое меню
     */
    //$('.sidebar-menu__subitems').hide();

    $('.sidebar-menu__item-title').click(function() {
        $(this).find('+ .sidebar-menu__subitems').slideToggle('fast');
        $(this).find('i').toggleClass('fa-caret-down');
    });

});

Вот что должно получиться в итоге:

Пример админки

Скопируйте код себе и посмотрите как это все работает. Также имейте ввиду, что для Font Awesome иконок надо получить новую ссылку.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.