Учебное пособие по темам WordPress для начинающих — Часть 9: Меню и области виджетов
В этом уроке рассказывается, как добавить две основные функции WordPress в нашу тему; меню и области виджетов. Мы узнаем, как прописать местоположение для главного навигационного меню сайта и вывести меню в наши шаблоны, а также разрешить добавление виджетов в нашу боковую панель и область нижнего колонтитула.
Увлеченные из вас, возможно, заметили, что ни «Меню», ни «Виджеты» не доступны из меню «Внешний вид» в панели администратора. Это потому, что наша тема еще не поддерживает их. Мы исправим это в этом уроке — начнем с меню .
Добавление меню в вашу тему состоит из двух частей. Сначала вам нужно определить одно или несколько мест меню в файле functions.php. Примером может служить главное меню, которое будет находиться в шапке всех страниц. Вторая часть — добавление некоторого кода в том месте, где вы хотите вывести меню. Например header.php, в том месте, где вы хотите разместить главное меню.
В этом руководстве мы добавим одно место в меню для основной навигации сайта и поместим его вывод в наш файл header.php. Начнем с регистрации местоположения в functions.php, что делается с помощью функции register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Нам нужно зацепиться за хук init, который, по мнению WordPress, является хорошей «контрольной точкой» для регистрации местоположений меню. Внутри нашей функции мы вызываем register_nav_menu(), которая принимает как минимум два параметра; дескриптор меню, который является уникальным ярлыком, который вы будете использовать в качестве идентификатора при отображении меню, и видимое имя меню, которое отображается в панели администратора. Обратите внимание, что я завернул имя внутрь __(), чтобы сделать его переводимым, как мы узнали на предыдущем шаге.
Если вы обновите свою панель администратора, вы должны увидеть новый пункт подменю в разделе «Внешний вид»; «Меню». Поздравляем, ваша тема теперь поддерживает создание меню!
Если вы не знакомы с созданием и администрированием меню в WordPress, это хорошее руководство для вас.
Создайте новое меню в «Внешний вид > Меню» — оно может содержать все, что вы хотите, я просто добавил фиктивные сообщения, которые я создал в своем WordPress.
После того, как вы сохраните свое первое меню, под областью редактирования меню появится новый раздел под названием «Настройки меню», который позволяет вам выбрать место для этого меню. В нем должно быть указано одно доступное место, которое мы сделали; «Главная навигация».
Установите флажок «Основная навигация» и нажмите «Сохранить». Теперь ваше вновь созданное меню связано с местоположением и будет автоматически отображаться везде, где вы добавляете код для вывода этого местоположения меню. Давайте сделаем это сейчас.
Откройте header.phpи там, где вы хотите, чтобы вывод меню был, добавьте вызов wp_nav_menu(). Эта функция принимает целую кучу аргументов в виде массива, чтобы действительно настроить вывод меню. Самое главное, нам нужен параметр, который указывает, что нужно получить местоположение «Основной навигации». Для этого мы добавляем аргумент ‘ theme_location‘ и устанавливаем его в дескриптор нашего меню; ‘ main-nav‘.
Я добавил вывод меню сразу после начала <body>тега, но если вы наполнили свои шаблоны HTML, решите сами, где вы хотите, чтобы меню отображалось.
Обновите интерфейс, и вы должны увидеть меню, которое вы создали в админке, в виде неупорядоченного списка в начале шаблона.
Как обычно, я рекомендую вам немного углубиться в параметры wp_nav_menuв документации WordPress Codex и поиграть с тем, каким вы хотите, чтобы вывод был. Например: вы можете сделать так, чтобы он не выводился в HTML-списке, вы можете ограничить пункты меню только определенными уровнями (чтобы предотвратить подменю) и многое другое.
Если вам интересно узнать о стилевой части; взгляните на классы, которые WordPress автоматически добавляет к каждому пункту меню. Вы сможете легко добавлять стили для активного элемента меню, элементов, у которых есть дочерние элементы, родительский элемент активного дочернего элемента и т. д.
Примечание. Любой пользователь темы всегда может создать несколько меню и отображать их за пределами зарегистрированных местоположений темы с помощью виджетов. Однако для этого в вашей теме должны быть определены некоторые области виджетов! Давайте сделаем это дальше.
Области виджетов
Области виджетов работают очень похоже на то, как работают меню. Вы регистрируете местоположение (для виджетов вы определяете область, в которой пользователь темы может размещать виджеты), и везде, где вы хотите, чтобы местоположение/область отображались в ваших шаблонах, вы добавляете немного кода, который ссылается на идентификатор дескриптора, который вы указали в своем Регистрационный код.
Давайте определим область виджета на нашей боковой панели и одну в нижнем колонтитуле. Темы обычно предоставляют несколько областей виджетов в нижнем колонтитуле, чтобы красиво разделить их на столбцы, но в этом руководстве мы просто добавим одну область в нижний колонтитул.
Области виджетов называются «боковыми панелями» в коде WordPress, но это не только правая боковая панель старых времен на веб-сайтах. Похоже, какое-то устаревшее имя просто осталось со времен, когда веб-сайты обычно имели только область виджетов на боковой панели. Не думайте, что «боковые панели» могут относиться только к реальным боковым панелям.
Регистрация областей виджетов
Начнем с регистрации двух областей виджетов в нашем файле functions.php. Мы используем эту функцию register_sidebarдля регистрации наших боковых панелей, привязанных к widgets_initхуку, который WordPress определил как лучший хук для регистрации областей виджетов (и пользовательских виджетов).
Функция register_sidebar()принимает довольно много аргументов, как минимум, вам нужны аргументы «id» и «name». Имеются параметры, определяющие способ вывода HTML-оболочек виджета.
Обновите панель администратора, и теперь вы должны увидеть пункт меню «Виджеты» в разделе «Внешний вид». В панели администратора «Виджеты» вы можете увидеть две доступные области виджетов в правой части; это наши «Область виджетов боковой панели» и «Область виджетов нижнего колонтитула».
Поместите случайный виджет в область виджетов боковой панели или нижнего колонтитула, чтобы вы могли увидеть его в действии.
Вывод области виджета в шаблоне
Последняя часть — вывод областей виджетов в наши шаблоны. Для этого мы используем функцию dynamic_sidebar()и предоставляем дескриптор в качестве параметра. Откройте sidebar.phpи добавьте следующее внутри <aside>тегов:
Обратите внимание, что я обернул его внутри тега неупорядоченного списка (<ul>). Это связано с тем, что по умолчанию dynamic_sidebarвыводятся все виджеты, завернутые в <li>элементы. Я рекомендую вам поиграть с выходными параметрами, если вам не нравится, когда виджеты представляют собой список.
Что касается нижнего колонтитула, мы добавляем его в самое начало footer.php, обернув <footer>тегом (если хотите).
Вот и все для меню и областей виджетов. Теперь ваша тема позволяет пользователю создать новое меню и использовать виджет для его отображения на боковой панели или в нижнем колонтитуле. В следующем уроке этой серии руководств мы создадим больше шаблонов для нашей темы.