Настройка многоуровневого меню на сайте — урок 22

- Николаенко Максим · Опубликовано 10 января, 2015 · Обновлено 7 августа, 2018

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

Создадим страницы сайта:

home
blog
about
Contact
Shortcodes
Error 404
page 1 column
page 2 column
page 3 column
portfolio
Single standard
Single gallery
Single video
Single audio
Single portfolio
Single product
Shop
Single prodect

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

Добавьте в верхнее меню страницы как показано на картинке ниже.

Если были добавлены лишние станицы, то просто можете их удалить из списков пунктов. Когда вы будите делать меню можно использовать заглушки, их делать не сложно, просто добавляем вместо ссылки диес (#).

wordpress добавляем ссылку заглушку

Сформируем структуру меню, перетягивая пункты на нужное место.

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

home
blog
page ( # )
- about
- Shortcodes
- Contact
- single ( # )
  - Single standard
    - page 1 column
    - page 2 column
    - page 3 column
  - Single gallery
  - Single video
  - Single audio
  - Single portfolio
  - Single product
- Error 404
portfolio
- Single prodect
Shop

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

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

Уберите лишний 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. После переноса у вас меню должно выглядеть вот так:

Исходники шаблона:

Дополнительная доработка

После создания страниц давайте укажем в настройках главную страницу (Настройки -> Чтения -> На главной странице отображать -> Статическую страницу -> Home) и страницу блога (Настройки -> Чтения -> Posts page -> Blog), на ней будут выводиться все наши публикации.

wordpress check home page and blog - курсы wordpress

На данный момент нам еще надо доработать шаблон для главной страницы и для блога, чтобы посты выводились как надо. Об этих двух страницах и о разработке шаблонов страниц в целом мы поговорим в следующих уроках.