Добавление пользовательских классов к ссылкам в wp_nav_menu

Question

Добавление пользовательских классов к ссылкам в wp_nav_menu

29 июл. 2014 г., 15:11:04

Просмотры: 36.7K

Голосов: 10

Я хочу добавить пользовательский класс к ссылкам в выводе wp_nav_menu.

По умолчанию выглядит так:

<li id="menu-item" class="menu-item menu-item-type-custom">
    <a href="http://example.com">пример</a>
</li>

Я хочу получить такой результат:

<li id="menu-item" class="menu-item menu-item-type-custom ">
    <a href="http://example.com" class="class">пример</a>
</li>

Hector

682

разработка тем меню темы хуки навигация

Все ответы на вопрос

Комментарии

Как я могу добавить несколько различных atts внутри якоря? Например, не только добавление классов, но и добавление aria-expanded="false"?

Robert Andrews

18 июл. 2018 г. 14:48:24

Как в третьей строке функции.

cjbj

18 июл. 2018 г. 14:52:51

У меня есть лучшее решение https://stackoverflow.com/a/67859550/9207553

Mohammad Ayoub Khan

6 июн. 2021 г. 16:19:37

У меня есть решение для добавления класса к тегу <a>.

1 шаг: добавьте это в functions.php

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

2 шаг: затем используйте это в вашей теме следующим образом

<?php
        // Вывод меню здесь
        wp_nav_menu(array(
            'theme_location' => 'my-footer-menu',
            'menu_class'      => 'footer-top list-unstyled',
            'add_a_class'     => 'box-link text-dark',
        ));
?>

Mohammad Ayoub Khan

191

6 июн. 2021 г. 16:41:50

Вы можете добавлять классы нативно через интерфейс в админке. Откройте Screen Options (вверху справа на экране) и отметьте галочкой CSS Classes. Не помню, применяется ли класс к самой ссылке, но вы всегда можете обратиться к ссылке внутри контейнера с помощью CSS (.class a).

Rarst

100K

29 июл. 2014 г. 17:34:55

Комментарии

Админ позволяет применять CSS только к элементам <li>, а не к элементам <a>, как хотел спрашивающий.

Fusion

14 февр. 2019 г. 04:27:28

Это не добавляет класс к тегу <a>, только к содержащему его <li>.

Lisa

26 июн. 2023 г. 21:06:14

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $classes, $item, $args ) {
    if(isset($args->add_link_class)) {
        $classes['class'] = $args->add_link_class;
    }
    return $classes;
}

Теперь вы можете использовать add_link_class как массив в меню.

kunal

1

19 сент. 2020 г. 15:32:52

cjbj 15K · Accepted Answer · 2016-09-30T12:41:59Z

Это можно сделать с помощью фильтра nav_menu_link_attributes.

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'class'; // или что-то на основе $item
    $atts['class'] = $class;
    return $atts;
}

cjbj

15K

30 сент. 2016 г. 12:41:59