Налаштування багаторівневого меню на сайті – урок 22

за Ніколаєнко Максим · Опубліковано Січень 10, 2015 · Оновлено Серпень 7, 2018

Для початку необхідно створити сторінки, які дадуть нам план дій та розвитку на майбутній курс. Мені хотілося б з вами створити преміум шаблон і показати, що це не так складно і цілком можна робити. Бонусом буде, те, що в кінці курсу ви отримаєте повне керівництво до дії для розробки преміум шаблонів та їх продажу на біржах, так що продовжуйте стежити за новими публікаціями.

Створимо сторінки сайту:

додому
блог
приблизно
контакт
Шорткоди
Помилка 404
page 1 колонка
page 2 колонка
page 3 колонка
портфоліо
Єдиний стандарт
Єдина галерея
Одиночне відео
Один звук
Єдине портфоліо
Один продукт
Магазин
Одиночний продукт

Після створення сторінок заходимо до пункту Appearance -> Menus та видаляємо старі пункти. Після видалення не забувайте натискати кнопку Save Menu.

Додайте у верхнє меню сторінки як показано на малюнку нижче.

Якщо були додані зайві станиці, то просто можете їх видалити зі списків пунктів. Коли ви будите робити меню можна використовувати заглушки, їх робити не складно, просто додаємо замість посилання дієс (#).

wordpress додаємо посилання заглушку

Сформуємо структуру меню, перетягуючи пункти на потрібне місце.

Формуємо структуру із вкладеннями, як показано нижче:

додому
блог
page ( # )
- приблизно
- Шорткоди
- контакт
- single ( # )
  - Єдиний стандарт
    - page 1 колонка
    - page 2 колонка
    - page 3 колонка
  - Єдина галерея
  - Одиночне відео
  - Один звук
  - Єдине портфоліо
  - Один продукт
- Помилка 404
портфоліо
- Одиночний продукт
Магазин

Після формування меню на сайті все поповзло, оскільки шаблон не містив багаторівневого меню, що випадає.

Я думаю, правильно буде підчистити шаблон та налаштувати нове меню.

Заберіть зайвий JavaScript у файлі header.php, щоб він нам не заважав, залишки старого меню:

<script src="<?php echo bloginfo('template_url'); ?>/js/init.js"></script>

1	<script src="<?php echo bloginfo('template_url'); ?>/js/init.js"></script>

У header.php давайте підключимо стилі нового меню. Наше меню працюватиме виключно на css.

<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/menu.css" />

1	<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/menu.css" />

До файлу menu.css, додаємо стилі для майбутнього меню, даю вам зразок:

У файлі header.php замініть наше старе меню на нове:

							<!-- 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 -->

<?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);

Перенесемо також у коді логотип під меню. Думаю, не варто багато розповідати правильніше буде дати вам самостійне завдання аналізу та перенесення нового коду з файлу header.php. Після перенесення у вас меню має виглядати так:

Вихідники шаблону:

Додаткове доопрацювання

Після створення сторінок давайте вкажемо в налаштуваннях головну сторінку (Налаштування -> Читання -> На головній сторінці відображатиметься -> Статичну сторінку -> додому) і сторінка блогу (Налаштування -> Читання -> Сторінка дописів -> Блог), на ній виводитимуться всі наші публікації.

wordpress перевірити домашню сторінку та блог - курси wordpress

На даний момент нам ще треба доопрацювати шаблон для головної сторінки та блогу, щоб пости виводилися як слід. Про ці дві сторінки та розробку шаблонів сторінок загалом ми поговоримо у наступних уроках.