Додаємо кілька меню у футер сайту – урок 19

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

Зміст приховати

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

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

меню створення wordpress | Курси Wordpress

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

Наповнюючи меню, робіть все по порядку:

Вибираємо тип наповнення посилання (посилання);
В полі URL додаємо грати, за допомогою ґрат можна наповнити атрибут href посилання але саме посилання не буде нікуди вести. В полі Текст посилання (Текст посилання) необхідно ввести текст посилання (якір);
Після заповнення URL та тексту посилання натискаємо на кнопку Додати в меню (Додати в меню);
Коли всі потрібні пункт з'явиться у правій частині робочої області, натисніть Зберегти меню (Зберегти меню).

Додайте пункти самостійно та продовжуємо.

Для виведення меню нам необхідно зробити області вставки меню, створюються ці області у файлі 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’ => навігація – додає до обгортки меню id = “nav”, у нашому випадку обгортка це тег <nav id=”nav”></нав>.
3. «луна» => false, – за промовчанням функція wp_nav_menu() формує меню та виводить на екран, при вказівці значення false, функція не буде виводити дані та сформоване меню можна зберегти в змінну, у нашому випадку змінну $header_menu.
4. 'items_wrap' => «<nav id=”%1$s” class=”%2$s”>%3$с</нав>' – формує шаблон обгортки меню.
У змінній $header_menu зберігається сформоване меню, в якому все ще є зайвий тег <li>, нам його треба прибрати.
Будівництво echo strip_tags($header_menu, «<a><нав>') видаляє всі зайві теги, крім зазначених у лапках.

Після цих маніпуляцій наше меню має з'явитися у тому вигляді, в якому воно було спочатку у верстці і в ньому не буде жодних <вул> і <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 без додаткових плагінів., так як при розробці преміум тем потрібно використовувати якнайменше плагінів.