


Блог IT-шника
Блог IT-шника
Привіт:) У цьому пості покажу, як у ВордПрес програмно додати в кінець меню свій елемент. Цей спосіб підходить, якщо немає можливості додати пункт меню через адмін-розділ Вигляд > Меню або його потрібно вивести як окремий елемент, наприклад, перемикач мови. Розберу 2 варіанти. В обох випадках потрібно вставляти PHP-код у файл functions.php.
add_filter( 'wp_nav_menu_items', function( $items, $args ) {
if ( $args->theme_location == 'ID_меню' ) {
$items .= '<li>СЮДИ ДОДАВАЙТЕ ДАНІ ДЛЯ ВИВЕДЕННЯ</li>';
}
return $items;
}, 10, 2 );
У цьому прикладі замініть значення ID_меню
на своє. Це унікальний ідентифікатор локації (місця розміщення або області відображення) меню, яке прописано десь в активній темі WordPress. Зазвичай створюється таким кодом:
register_nav_menus(
array(
'primary' => __( 'Primary Menu', 'astra' ),
)
);
Тут значення primary
і є ідентифікатор меню.
У темах можливо декілька локацій навігації. Усі їх назви можна побачити під час створення меню через Вигляд > Меню.
Але в коді слід вставити саме ідентифікатор. Щоб його дізнатися, знайдіть усі згадки функції register_nav_menus
у файлах теми та виберіть потрібне місце розташування.
Існує ще один спосіб знайти цей ідентифікатор.
menu-locations[]
. Значення у квадратних дужках є цим унікальним ідентифікатором меню (у моєму прикладі це primary
).У першому варіанті використається аргумент theme_location
. Але він не завжди підходить. Наприклад, для мобільного меню немає окремої локації у розділі Вигляд > Меню. Тому меню, куди потрібно додати свої елементи, потрібно визначати іншим способом. Наприклад, за його класом $args->menu_class
. Цей клас повинен однозначно визначати меню та знаходитися у тезі <ul>
.
У наступному прикладі мені потрібно було додати свою розмітку з перемикачем мови у мобільне меню:
add_filter( 'wp_nav_menu_items', function( $items, $args ) {
if ( $args->menu_class == 'menu menu-mobile' ) {
$items .= '<div class="after-mobile-menu-content">
<div class="content__inner">
<div class="content__language">'
. do_shortcode('[wpml_language_switcher type="footer" flags=1 link_current=1 native=0 translated=0][/wpml_language_switcher]') .
'</div>
<div class="content__mobile"><a href="tel:+380445551188">+38 (044) 555-11-88</a></div>
</div>
</div>';
}
return $items;
}, 10, 2 );
Контейнер з виведенням мобільної навігації має класи menu menu-mobile
і виглядає так: