Налаштування багаторівневого меню на сайті – урок 22
Для початку необхідно створити сторінки, які дадуть нам план дій та розвитку на майбутній курс. Мені хотілося б з вами створити преміум шаблон і показати, що це не так складно і цілком можна робити. Бонусом буде, те, що в кінці курсу ви отримаєте повне керівництво до дії для розробки преміум шаблонів та їх продажу на біржах, так що продовжуйте стежити за новими публікаціями.
Створимо сторінки сайту:
- додому
- блог
- приблизно
- контакт
- Шорткоди
- Помилка 404
- page 1 колонка
- page 2 колонка
- page 3 колонка
- портфоліо
- Єдиний стандарт
- Єдина галерея
- Одиночне відео
- Один звук
- Єдине портфоліо
- Один продукт
- Магазин
- Одиночний продукт
Після створення сторінок заходимо до пункту Appearance -> Menus та видаляємо старі пункти. Після видалення не забувайте натискати кнопку Save Menu.
Додайте у верхнє меню сторінки як показано на малюнку нижче.
Якщо були додані зайві станиці, то просто можете їх видалити зі списків пунктів. Коли ви будите робити меню можна використовувати заглушки, їх робити не складно, просто додаємо замість посилання дієс (#).
Сформуємо структуру меню, перетягуючи пункти на потрібне місце.
Формуємо структуру із вкладеннями, як показано нижче:
- додому
- блог
- page ( # )
- приблизно
- Шорткоди
- контакт
- single ( # )
- Єдиний стандарт
- page 1 колонка
- page 2 колонка
- page 3 колонка
- Єдина галерея
- Одиночне відео
- Один звук
- Єдине портфоліо
- Один продукт
- Єдиний стандарт
- Помилка 404
- портфоліо
- Одиночний продукт
- Магазин
Після формування меню на сайті все поповзло, оскільки шаблон не містив багаторівневого меню, що випадає.
Я думаю, правильно буде підчистити шаблон та налаштувати нове меню.
Заберіть зайвий JavaScript у файлі header.php, щоб він нам не заважав, залишки старого меню:
1 |
<script src="<?php echo bloginfo('template_url'); ?>/js/init.js"></script> |
У header.php давайте підключимо стилі нового меню. Наше меню працюватиме виключно на css.
1 |
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/menu.css" /> |
До файлу menu.css, додаємо стилі для майбутнього меню, даю вам зразок:
У файлі header.php замініть наше старе меню на нове:
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Start responcive-menu.com BODY --> <?php $args = array( 'theme_location' => 'header-menu', 'menu_class' => 'topmenu', 'menu_id' => 'responcive-menu1', 'items_wrap' => '<input type="checkbox" id="responcive-menu-switcher" class="resp-menu-switch-input"><ul id="%1$s" class="%2$s"><li class="switch"><label onclick="" for="responcive-menu-switcher"></label></li>%3$s</ul>' ); wp_nav_menu($args); ?> <!-- End responcive-menu.com BODY --> |
Перенесемо також у коді логотип під меню. Думаю, не варто багато розповідати правильніше буде дати вам самостійне завдання аналізу та перенесення нового коду з файлу header.php. Після перенесення у вас меню має виглядати так:
Вихідники шаблону:
Додаткове доопрацювання
Після створення сторінок давайте вкажемо в налаштуваннях головну сторінку (Налаштування -> Читання -> На головній сторінці відображатиметься -> Статичну сторінку -> додому) і сторінка блогу (Налаштування -> Читання -> Сторінка дописів -> Блог), на ній виводитимуться всі наші публікації.
На даний момент нам ще треба доопрацювати шаблон для головної сторінки та блогу, щоб пости виводилися як слід. Про ці дві сторінки та розробку шаблонів сторінок загалом ми поговоримо у наступних уроках.
/*
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.