Как добавить значки Fontawesome в пункты меню с расширенными настраиваемыми полями

Последнее обновление Авг 10, 2022

Содержание

Этот пост покажет вам, как вы можете использовать расширенные настраиваемые поля (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, так как это библиотека, которая есть в моей теме.

После сохранения поля в админке или в коде теперь вы должны получить дополнительное поле при раскрытии пункта меню:

Примечание о классах 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;
});

Мы изменяем элементы меню, перебирая их в цикле, используя передачу по ссылке (добавляя &перед переменной). Это означает, что любое изменение, которое мы вносим в элемент, будет применено к родительскому объекту элементов.

Для каждого элемента мы используем get_field()функцию Advanced Custom 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';
        }
        ...

Меню должно быть выведено следующим образом:

Источник записи: awhitepixel.com