Создаем тему WordPress на базе статического HTML: Добавляем меню навигации

2020-10-20

СкачатьИСХОДНЫЙ ФАЙЛ

Демо-версияСМОТРЕТЬ ОНЛАЙН

Данная статья является 6 из 6 частей цикла «Создаем тему WordPress на базе статического HTML»:

Создаем тему WordPress на базе статического HTML: Подготовка разметки;
Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов;
Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress;
Создаем тему WordPress на базе статического HTML: Добавляем цикл;
Создаем тему WordPress на базе статического HTML: Настройка заголовка;
Создаем тему WordPress на базе статического HTML: Добавляем меню навигации.

Регистрация меню навигации
Настройка меню навигации
Добавляем меню к нашей теме
Заключение: Меню может располагаться не только в шапке сайта!

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

В этом уроке мы продолжим работать с файлом header.php, который вы создали во второй части. Вы узнаете, как добавить меню навигации, которое можно редактировать с помощью панели администрирования WordPress. Для этого вам необходимо будет создать в вашей теме новый файл: файл функций.

Что вам потребуется.

Для выполнения заданий этой статьи вам потребуется:

Редактор по вашему выбору;
Браузер для проверки результатов;
Установленный на локальном или удаленном сервере WordPress,;
Если вы работаете на локальном сервере, вам потребуется MAMP , WAMP или LAMP, чтобы активировать тему WordPress;
Если вы работаете удаленно, вам потребуется FTP доступ к вашему сайту, плюс права доступа администратора к установленному WordPress;

1. Регистрация меню навигации

Чтобы зарегистрировать меню навигации, необходимо использовать функцию register_nav_menu(), которую нужно будет добавить в файл functions.php вашей темы.

Так как наша тема еще не содержит этого файла, можно начать как раз с его создания.

В папке темы создайте новый пустой файл с именем functions.php.

Откройте этот файл и добавьте в него следующий код:

<?php
function wptutsplus_register_theme_menu() {
    register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'wptutsplus_register_theme_menu' );
?>

Вы только что создали первую функцию вашей темы, похвалите себя!

Функция, которую вы создали, называется wptutsplus_register_theme_menu(), я добавила в начале ее названия префикс wptutsplus, чтобы обеспечить уникальность имени и чтобы избежать конфликта с любыми другими функциями, которые будут зарегистрированы плагинами, добавленными вами позже.

Данная функция включает в себя функцию WordPress register_nav_menu(), которая создает меню навигации. Ваша функция будет выполняться с помощью обращения действия init, это означает, что WordPress будет запускать функцию при инициализации.

Обратите внимание: подобные функции необходимо активировать через корректные обращения, иначе они не будут работать.

Функция register_nav_menu() имеет два параметра:

Один из этих параметров включает местоположение меню на странице. В данном случае мы обозначили расположение, как 'primary'. Позже мы добавим это в файл header.php, чтобы WordPress корректно выводил меню.

Вторым параметром является описание меню. В данном случае 'Main Navigation Menu'. Это название будет отображаться в разделе «Меню» панели администрирования.

2. Настройка меню навигации

Теперь вы получите доступ к разделу панели инструментов «Меню», который ранее был недоступен, так как ваша тема не содержала ни одного зарегистрированного меню.

На текущий момент его содержание далеко еще не идеально, но мы собираемся изменить это:

Создавая страницы, сообщения и другой контент, вы можете добавить их в свое меню навигации с помощью этого раздела. Я собираюсь добавить две новые страницы: «Блог» и «О себе».

Через меню «Настройки» я задам страницу "Блог" в качестве страницы, на которой будут отображаться мои записи. Вы можете создавать любые страницы по своему желанию.

Сделав это, возвращаемся в раздел «Меню» для редактирования самого меню, добавляем в него новые страницы. После того, как вы перетащите в меню новые страницы, нажмите на кнопку «Создать меню». Новое меню будет создано.

В самом конце, проверьте ‘Main Navigation Menu’ в настройках темы, чтобы убедиться, что этот элемент будет отображаться, как главное меню, которое вы только что зарегистрировали и сохранили.

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

3. Добавляем меню к нашей теме

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

Откройте файл header.php вашей темы и найдите в нем следующий код:

<nav class="menu main">
    <?php /*  Позволить экранным дикторам / текстовым браузерам пропускать меню навигации и переходить сразу к контенту. */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Перейти к контенту" href="#content"> Перейти к контенту </a>
    </div>
    <ul>
        <li>
            <a href="#">Главная</a>
        </li>
        <li>
            <a href="#">Последние новости</a>
        </li>
        <li>
            <a href="#">Интересные статьи</a>
        </li>
    </ul>
</nav><!-- .main -->

И замените его таким кодом:

<nav class="menu main">
    <?php /*  Позволить экранным дикторам / текстовым браузерам пропускать меню навигации и переходить сразу к контенту. */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Перейти к контенту" href="#content"> Перейти к контенту </a>
    </div>
    <?php wp_nav_menu( array( 'container_class' =--> 'main-nav', 'theme_location' => 'primary' ) ); ?>
</nav><!-- .main -->

Теперь мы добавили в нашу тему меню навигации, которое вы зарегистрировали, через использование функции wp_nav_menu(), указав для 'theme-location' значение 'primary' (местоположение, указанное при регистрации меню).

Все эти изменения видны в меню навигации моего сайта:

Заключение: Меню может располагаться не только в шапке сайта!

Из этой статьи вы узнали, как зарегистрировать меню навигации, добавить в него элементы и вставить меню в шапку сайта.

Важно отметить, что меню не обязательно должно находиться в шапке сайта.

Его можно вставить в разных местах, в том числе:

В боковой панели - это может быть один из разделов меню для одного из разделов сайта или список подстраниц текущей страницы;
Подвал - меню страниц или наиболее часто используемые страницы «мелким шрифтом»;
Ниже основного меню навигации - раздел меню непосредственно под главным меню навигации.

Вы можете добавить меню в разных местах вашего сайта одним из трех способов.

Я перечислила их в порядке возрастания сложности:

создать дополнительные меню с помощью раздела панели администрирования «Меню», а затем использовать виджет «Собственное Меню» для вывода его в любом месте вашей темы, там, где есть область виджетов;
создать дополнительные меню с помощью раздела панели администрирования «Меню», а затем добавить его в код вашей темы так, как мы сделали выше. В этом случае вы добавляете дополнительный параметр в массив через вызов функции wp_nav_menu(), указывая для параметра 'menu' название меню, которое задается при его создании;
зарегистрировав несколько меню с помощью функцию register_nav_menus() и добавив их в соответствующем месте в вашей теме, как описано выше.

Можете попробовать каждый из этих способов.