Учебное пособие по WordPress: пользовательское меню для сообщений или страниц на боковой панели
Этот пост для вас, кто управляет сайтом WordPress с большим количеством контента, возможно, со многими страницами, структурированными в иерархию, и желаете улучшить навигацию за пределами главного меню. Пользовательское меню, связанное с текущим сообщением, очень поможет в навигации по сайту. Проблема с размещением виджета меню на боковой панели (или где угодно) заключается в том, что боковая панель является общей. В этом посте мы узнаем, как отображать дополнительное пользовательское меню на боковой панели, разрешая сообщениям, страницам или пользовательским типам сообщений выбирать меню.
Добавьте приведенный ниже код в код вашей темы functions.phpили в код вашего плагина.
Создать меню в WordPress очень просто, и вы можете использовать виджет «Меню», чтобы отобразить меню на боковой панели. Проблема в том, что боковая панель глобальная и везде будет отображаться одно и то же меню. Что делать, если вы хотите, чтобы определенные меню отображались на определенных страницах? Вы также узнаете, как убедиться, что выбранное меню наследуется дочерними страницами. Таким образом, вам нужно только выбрать меню на родительской странице. Любые подстраницы также будут отображать одно и то же меню без необходимости редактировать их все.
Первый шаг — создание метабокса на постах или страницах, где мы получаем возможность выбрать меню. Мы используем функцию add_meta_box()и решаем, для каких типов записей мы хотим ее показывать.
add_action('add_meta_boxes', function() {
add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);
});Измените приведенный выше код на нужные вам типы заголовков и сообщений. Приведенный выше пример добавит метабокс как к сообщениям, так и к страницам. Третий параметр, который я назвал awp_sidebar_menu_metabox_callback, — это функция, отвечающая за рендеринг содержимого метабокса. Давайте определим это дальше. Вот что нам нужно сделать в нашем метабоксе:
function awp_sidebar_menu_metabox_callback($post) {
// Get all menus
// Get the current saved menu, if set
// Output HTML with a select showing all menus, and mark the currently saved one as selected
}Мы можем получить массив со всеми сохраненными меню в WordPress с помощью wp_get_nav_menus(). Что касается извлечения текущего выбранного меню, мы сохраняем выбранное меню как метаданные сообщения awp_sidebar_menu(называйте его как хотите), и мы просто получаем значение на основе текущего значения, $postпредоставленного нам в функции метабокса. Мы сохраним идентификаторы меню, потому что это все, что нам нужно для отображения меню. А затем мы выводим HTML для выбора, который проходит через меню. HTML-вывод метабокса действительно зависит от вас, ниже приведен пример. Я также включил функцию nonce для безопасности.
В выводе HTML я распечатываю этикетку. Если в WordPress вообще нет сохраненных меню, он просто отобразит абзац. В противном случае выбор генерируется с идентификаторами меню в качестве значений и именами меню в качестве метки. Я также добавляю пустой выбор, чтобы посты не отображали меню. Я использую вспомогательную функцию WordPress [selected](https://developer.wordpress.org/reference/functions/selected/)()для пометки текущей сохраненной опции как выбранной.
Если вы редактируете сообщение или страницу, вы должны увидеть метабокс внизу, показывающий ваш выбор. Потрясающий! Однако на данный момент он не сохранит ваш выбор меню при сохранении поста. Это следующий шаг.
Мы используем хук save_postдля создания функции, которая сохраняет любой выбор, который мы добавили в наш метабокс. Хук save_postсрабатывает каждый раз, когда пост сохраняется или обновляется. Сначала мы проверим одноразовые номера (если вы не знаете, что такое одноразовые номера, ознакомьтесь с этим руководством по WordPress ). Затем мы дважды проверяем, разрешено ли пользователю обновлять сообщения, и обновляем метаданные нашего сообщения с выбором.
add_action('save_post', function($post_id) {
if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);
});Теперь, когда вы обновляете сообщения, он также сохраняет ваш выбор меню.
И это все, что касается части выбора поста. Следующим шагом является вывод меню, если оно было выбрано.
Я добавляю вывод на боковую панель, но вы можете вывести его в любом месте шаблонов вашей темы. Нам просто нужен либо предопределенный хук, либо определить свой собственный. В качестве примера я добавляю пользовательский хук в верхней части боковой панели, чтобы я мог создать функцию, привязанную к нему.
Вы можете просто вызвать wp_nav_menu()непосредственно в шаблоне, но я рекомендую вместо этого создать собственный хук, потому что мы добавим довольно много кода, и он может показаться беспорядочным.
В моей теме я редактирую sidebar.phpи прямо перед dynamic_sidebar()тем, как вызывается боковая панель (куда добавляются виджеты), я добавляю свой собственный хук с do_action()заданным именем. Вы можете называть его как хотите, но он должен быть уникальным в пределах WordPress. Так что, по крайней мере, добавьте к нему что-то уникальное для вас.
Теперь мы можем вернуться к functions.php, определить подключенную функцию, awp_before_sidebarи ее вывод будет отображаться на боковой панели перед виджетами. Функция будет использовать условные теги WordPress, чтобы проверить, показываем ли мы в данный момент один пост или страницу. И если это так, я получу метаданные нашего сообщения. Если метаданные сообщения были установлены, мы выводим меню, вызывая [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()и предоставляя сохраненный идентификатор меню в качестве его menuпараметра.
Вы должны настроить HTML вокруг меню, чтобы оно соответствовало остальному содержимому. В приведенном выше коде я оборачиваю меню в тот же HTML-код, что и все виджеты на боковой панели, так что стиль виджета темы применяется к нашему пользовательскому меню.
Вот и все! Всякий раз, когда вы выбираете меню в сообщении или на странице, меню будет выводиться над боковой панелью при просмотре этого сообщения или страницы.
Мы можем сделать еще один шаг вперед. Если вы хотите, чтобы на дочерних страницах отображалось то же меню боковой панели, что и на любой из родительских страниц, читайте дальше.
Эта дополнительная функция имеет смысл, если у вас много страниц в иерархии или настраиваемый тип записи с включенной иерархией. Было бы слишком громоздко редактировать каждую дочернюю страницу и выбирать одно и то же меню. В этом случае было бы лучше выбрать меню на родительской странице и автоматически позволить всем подстраницам «наследовать» этот выбор меню. Если какая-либо подстраница выбирает другое меню, это меню будет отображаться вместо «унаследованного» один раз.
Внутри нашей функции, подключенной к awp_before_sidebar, мы добавим фрагмент кода внутри проверки, просматриваем ли мы один пост или страницу:
Что делает приведенный выше код, если на текущей странице не найдено меню, извлекает всех родителей с расширением [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Эта функция возвращает массив идентификаторов родительских сообщений, сначала отсортированных по ближайшему родителю. Если у страницы нет родителей (например, если это пост), возвращается пустой массив. И если есть какие-либо родители, мы просматриваем каждого родителя один за другим и проверяем, установили ли они нашу мету сообщения. Если он был найден, мы прервем обход родителей и $sidebar_menuбудем установлены, а меню будет выведено позже с помощью wp_nav_menu().
И это все, что касается функциональности «наследования»!