Як у WordPress програмно додати у кінець меню свій елемент

Привіт:) У цьому пості покажу, як у ВордПрес програмно додати в кінець меню свій елемент. Цей спосіб підходить, якщо немає можливості додати пункт меню через адмін-розділ Вигляд > Меню або його потрібно вивести як окремий елемент, наприклад, перемикач мови. Розберу 2 варіанти. В обох випадках потрібно вставляти PHP-код у файл functions.php.

Варіант 1

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 у файлах теми та виберіть потрібне місце розташування.

Існує ще один спосіб знайти цей ідентифікатор.

  1. В адмін-розділі Вигляд > Меню із списку оберіть потрібну локацію (наприклад, Головне меню).
  2. Наведіть на неї курсор миші, клацніть правою клавішею та виберіть Дослідити (або Переглянути код).
  3. У консолі розробника (devTools) підсвічується рядок із назвою обраної вами області. Вище за неї знайдіть рядок menu-locations[]. Значення у квадратних дужках є цим унікальним ідентифікатором меню (у моєму прикладі це primary).

Варіант 2

У першому варіанті використається аргумент 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 і виглядає так:

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *