Як додати піктограми Fontawesome до пунктів меню за допомогою розширених спеціальних полів

Ця публікація покаже вам, як ви можете використовувати Advanced Custom Fields (ACF), щоб дозволити додавати піктограми до вашого меню. У цьому прикладі ми додамо піктограму Fontawesome, але ви можете змінити код відповідно до своїх потреб. Натомість ви можете додати засіб вибору файлів для файлів SVG або щось інше.

Цей посібник працюватиме з безкоштовною версією Advanced Custom Fields, але переконайтеся, що у вас версія 5.6 або новіша.

Додавання групи та поля ACF

Першим кроком є ​​додавання самого поля до пунктів меню. У цьому посібнику буде додано введення тексту для введення назви класу для піктограми Fontawesome, але якщо ви бажаєте інше рішення (наприклад, засіб вибору файлу для файлу SVG), змініть введені поля.

Переконайтеся, що для групи розширених настроюваних полів вибрано значення «Пункт меню». Ви можете встановити значення «Усі» або вказати за розташуванням меню чи за окремими меню.

Якщо ви додаєте свої поля та групуєте за кодом, установіть для параметра розташування значення " nav_menu_item". Щоб дізнатися більше, перегляньте мій повний довідник щодо додавання полів ACF за кодом.

acf_add_local_field_group([
    ...
    'location' => [
        [
            [
                'param' => 'nav_menu_item',
                'operator' => '==',
                'value' => 'all'
            ]
        ]
    ]
]);

Що стосується самого поля, ми додамо просте введення тексту з назвою «fontawesome_icon».

Або за кодом додайте поле так:

[
    'key' => 'field_fontawesome_icon',
    'label' => __('Fontawesome icon class', 'txtdomain'),
    'name' => 'fontawesome_icon',
    'instructions' => __('Type the name of a <a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">Fontawesome icon</a> class. Example: "fab fa-facebook".', 'txtdomain'),
    'type' => 'text',
]

Щоб зробити його зручнішим для користувача, доцільно додати опис із посиланням на огляд доступних піктограм Fontawesome. Я додаю посилання, щоб показувати лише безкоштовні значки, а не будь-які значки Pro, оскільки це бібліотека, яку я маю у своїй темі.

Після збереження поля в admin або в коді ви маєте отримати додаткове поле, коли розгортаєте пункт меню:

Примітка про заняття Fontawesome

У «старі дні», до Fontawesome 5, надання класу Fontawesome могло бути дещо спрощеним для користувача. Для кошика для покупок ви можете просто написати «кошик для покупок», і в наш код ми можемо додати клас «fa fa-», а потім заданий клас (результатом буде «fa fa-shopping-cart»). Але з Fontawesome 5 заняття дещо ускладнилися.

«Глобальний» клас «fa» було замінено категоріями, специфічними для типу піктограми. Наприклад, соціальні медіа чи логотипи входять до категорії брендів і потребують класу «fab», суцільні значки потребують класу «fas», а звичайні значки потребують «far» тощо. Ось чому тепер ми повинні вимагати від користувача теми вводити обидва класи Fontawesome. Має бути легко знайти потрібний клас, оскільки це чітко показано на кожній піктограмі на сайті Fontawesome:

Як приклад, вам потрібно ввести «fas fa-shopping-cart» в наше спеціальне поле в пункті меню для піктограми кошика для покупок.

Відображення значка в меню

Наступним і останнім кроком є ​​рендеринг піктограми в меню, якщо її встановлено. Для цього ми використовуємо фільтр WordPress [wp_nav_menu_objects](https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/). Цей фільтр застосовується до кожного меню у всіх відтворених меню безпосередньо перед створенням його HTML, дозволяючи нам змінювати вихідний текст, класи тощо.

Яким чином ви бажаєте виводити піктограму, знову вирішуєте самі. Ви бажаєте замінити текст посилання піктограмою чи відобразити піктограму до чи після текстового посилання? Ми будемо слідувати звичаю Fontawesome, виводячи <i>тег із наданим класом.

add_filter('wp_nav_menu_objects', function($items) {
    foreach ($items as &$item) {
        $icon = get_field('fontawesome_icon', $item);     
        if ($icon) {
            $item->title = '<i class="'. $icon. '"></i>'. $item->title;
        }
    }
    return $items;
});

Спосіб зміни пунктів меню полягає в циклічному перегляді пунктів меню за допомогою передачі за посиланням (додавання &перед змінною). Це означає, що будь-яка зміна, яку ми вносимо в елемент, буде застосована до об’єкта батьківських елементів.

Для кожного елемента ми використовуємо функцію Advanced Custom Field, get_field()щоб отримати значення нашого поля " fontawesome_icon". Якщо це встановлено, ми готові до роботи. Наведений вище приклад коду додасть значок перед текстом. Якщо ви хочете додати піктограму після тексту, замініть рядок #6на:

$item->title .= '<i class="'. $icon. '"></i>';

Або, якщо ви хочете замінити текст піктограмою – текст взагалі не відображається, замініть рядок #6на:

$item->title = '<i class="'. $icon. '" title="'. $item->title. '"></i>';

Я додав titleатрибут, щоб він був трохи інформативнішим для інтерфейсного користувача. Оскільки текст видалено, кінцевий користувач іноді може заплутатися, для чого призначений пункт меню. Але titleатрибут гарантує, що користувач отримує спливаючу підказку з текстом пункту меню, коли наводить курсор на піктограму. Звичайно, це необов’язково.

Якщо ви використовуєте поле іншого типу, наприклад засіб вибору файлів для файлів SVG, вам потрібно відповідно налаштувати вивід.

І це все! Тепер ви маєте побачити піктограму Fontawesome скрізь, де відображається меню. Але вам, ймовірно, потрібно додати до нього трохи стилю. Наприклад, додайте проміжок між значком і текстом.

Додавання класів для полегшення стилізації

Ви можете додати спеціальні класи до <i>тегу або додати ще трохи HTML, якщо необхідно.

Якщо вам потрібно додати клас до пункту меню обтікання (liелемента), ви маєте повний доступ до класів пункту меню, які будуть застосовані у фільтрі вище. Додайте власний клас пунктів меню для таких пунктів меню значків:

        ...
        if ($icon) {
            $item->title = '<i class="'. $icon. '"></i>'. $item->title;
            $item->classes[] = 'menu-with-icon';
        }
        ...

Меню має вийти таким чином: