Добавляем несколько меню в футер сайта — урок 19

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

Содержание скрыть

Если мы посмотрим на нижнюю часть сайта, то увидим что там в левой его части есть несколько блоков со ссылками (Links to Important Stuff), думаю будет дальше правильно заняться ими.

Для начала давайте создадим 4 меню в панели администратора Внешний вид -> Меню (Appearance -> Menu).

wordpress create menu | курсы по wordpress

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

Наполняя меню делайте все по порядку:

Выбираем тип наполнения ссылка (link);
В поле URL добавляем решетку, при помощи решетки можно наполнить атрибут href ссылки но сама ссылка не будет никуда вести. В поле Текст ссылки (Link text) необходимо ввести текст ссылки (анкор);
После заполнения URL и текста ссылки нажимаем на кнопку Добавить в меню (Add to Menu);
Когда все нужные пункт появиться в правой части рабочей области нажмите Сохранить меню (Save menu).

Добавьте пункты самостоятельно и продолжаем.

Для вывода меню нам необходимо сделать области вставки меню, создаются эти области в файле functions.php.

function register_my_menus() {
  register_nav_menus(
    array(
      'footer-menu-1' => __( 'Footer Menu 1' ),
      'footer-menu-2' => __( 'Footer Menu 2' ),
      'footer-menu-3' => __( 'Footer Menu 3' ),
      'footer-menu-4' => __( 'Footer Menu 4' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

function register_my_menus() {

register_nav_menus(

array(

'footer-menu-1' => __( 'Footer Menu 1' ),

'footer-menu-2' => __( 'Footer Menu 2' ),

'footer-menu-3' => __( 'Footer Menu 3' ),

'footer-menu-4' => __( 'Footer Menu 4' )

)

);

}

add_action( 'init', 'register_my_menus' );

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

К выбранному меню необходимо указать область размещения [1] и сохранить [2].

Вывод созданного меню в шаблоне

Для вывода меню в WordPress нам потребуется функция wp_nav_menu() которую мы вставляем в content-bottom.php так как показано ниже.

<!-- Links -->
								<section>
									<h2>Links to Important Stuff</h2>
									<div>
										<div class="row">
											<div class="3u">
												<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-1', 'menu_class' => 'link-list last-child' )); ?>
											</div>  
											<div class="3u">
												<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-2', 'menu_class' => 'link-list last-child' )); ?>
											</div>  
											<div class="3u">
												<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-3', 'menu_class' => 'link-list last-child' )); ?>
											</div>  
											<div class="3u">
												<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-4', 'menu_class' => 'link-list last-child' )); ?>
											</div>  
										</div>
									</div>
								</section>

<h2>Links to Important Stuff</h2>

<div>

<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-1', 'menu_class' => 'link-list last-child' )); ?>

</div>

<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-2', 'menu_class' => 'link-list last-child' )); ?>

</div>

<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-3', 'menu_class' => 'link-list last-child' )); ?>

</div>

<?php wp_nav_menu(array( 'theme_location' => 'footer-menu-4', 'menu_class' => 'link-list last-child' )); ?>

</div>

</section>

Подробнее о функции wp_nav_menu() советую прочесть на официальном сайте.

Если вы все сделали правильно, то у вас в шаблоне будет показано меню, созданное в панели администратора. Для проверки можете в панели администратора изменить порядок пунктов меню и посмотреть результат на сайте.

Небольшие доработки шаблона

В файле content-top.php добавляем название сайта при помощи функции

<?php bloginfo('name'); ?>

1	<?php bloginfo('name'); ?>

Полный код заголовка

<h1><a href="#" id="logo"><?php bloginfo('name'); ?></a></h1>

1	<h1><a href="#" id="logo"><?php bloginfo('name'); ?></a></h1>

Выводим меню в шапке сайта

В файле functions.php добавляем область для вывода меню, доработанный код будет выглядеть следующим образом.

Создаем в админке новое меню под названием «Header menu» и добавляем в него пункты из нашего шаблона, определяем расположение меню и незабываем сохранить меню после настройки.

В файле content-top.php создаем функцию для вывода верхнего меню. Так как в нашей верстке структура нестандартная (без тегов ul и li), то нам необходимо немного доработать функцию wp_nav_menu().

							<?php 
								$args = array( 
									'theme_location' => 'header-menu', 
									'menu_id' => 'nav', 
									'echo' => false,
									'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>' 
								);
								$header_menu = wp_nav_menu($args);
								echo strip_tags($header_menu, '<a><nav>'); 
							?>

<?php

$args = array(

'theme_location' => 'header-menu',

'menu_id' => 'nav',

'echo' => false,

'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>'

);

$header_menu = wp_nav_menu($args);

echo strip_tags($header_menu, '<a><nav>');

Разберем полученный код по порядку:

В массиве $args хранятся все атрибуты функции
1. theme_location — область размещения темы, рассматривали выше;
2. ‘menu_id’ => ‘nav’ — добавляет в обвертку меню id = «nav», в нашем случаи обвертка это тег <nav id=»nav»></nav>.
3. ‘echo’ => false, — по умолчанию функция wp_nav_menu() формирует меню и выводит на экран, при указании значения false, функция не будет выводить данные и сформированное меню можно сохранить в переменную, в нашем случаи переменную $header_menu.
4. ‘items_wrap’ => ‘<nav id=»%1$s» class=»%2$s»>%3$s</nav>’ — формирует шаблон обвертки меню.
В переменной $header_menu сохраняется сформированное меню в котором все еще есть лишний тег <li>, нам его нужно убрать.
Конструкция echo strip_tags($header_menu, ‘<a><nav>’) удаляет все лишние теги, кроме указанных в кавычках.

После этих манипуляций наше меню должно появиться в том виде, в котором оно было изначально в верстке и в нем не будет никаких <ul> и <li>.

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

Как включить админ бар на сайте

Для удобства в WordPress на стороне пользователя есть специальная панель админбар. Чтобы включить админбар, необходимо в файл footer.php, перед закрывающим тегом </body> ввести функцию <?php wp_footer(); ?>

		<!-- Copyright -->
			<div id="copyright">
				&copy; Untitled. All rights reserved. | Design: HTML5 UP 
			</div>
	<?php wp_footer(); ?>
	</body>
</html>

</div>

<?php wp_footer(); ?>

</body>

</html>

включить admin bar в шаблоне wordpress

Исходные файлы моей темы

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