Добавить класс к определенной ссылке в пользовательском меню

Я знаю, что вы можете добавить класс в пользовательских опциях меню, но он добавляет его в LI до A. Я хочу применить класс непосредственно к этой конкретной A, а не ко всей LI.

Таким образом, вместо вывода

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

Я тоже хочу, чтобы это было так.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Есть идеи?

Вы можете использовать nav_menu_css_classфильтр

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

Используя этот $ item, вы можете выполнить любое условие. и это добавит класс к определенному li, и вы можете стилизовать тег на основе этого следующим образом:

.my_class a{
   background-color: #FFFFFF;
}

Я нашел решение на этом сайте с помощью пользовательского ходунка .

Два шага: замените код wp_nav_menu по умолчанию на отредактированный, а затем добавьте код в functions.php темы.

Сначала замените wp_nav_code по умолчанию следующим (код скопирован с сайта выше):

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())
     );

Затем добавьте следующий код в functions.php. Делая это, вы можете добавить класс к ссылкам меню:

class description_walker extends Walker_Nav_Menu
{

  function start_el(&$output, $item, $depth, $args)
  {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;

       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
       $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

В конце кода есть несколько строк, начинающихся с $ item_output. В частности, вы хотите посмотреть на этот кусок:

$item_output .= '<a'. $attributes .'>';

Потому что эта строка определяет вывод для начала ссылки html. Если вы измените его на что-то вроде этого:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

Тогда все ваши ссылки в меню будут добавлены class = "abc".

Тем не менее, он не позволяет использовать собственный класс для каждой ссылки (или, по крайней мере, я не знаю, как его кодировать). Это проблема для меня.

Для тех, кто спрашивает, почему вы хотите это сделать? Я хочу, чтобы мои ссылки в меню открывали лайтбоксы (если быть точнее, в цветных коробках), и для этого им нужны классы в ссылках. Например:

<a class="lightbox1" href="#">Photo</a>

Возможно ли способ динамически генерировать классы, такие как «lightbox1» для первой ссылки, «lightbox2» для второй ссылки и т. Д.?

РЕШИТЬ !!!! Мне нужно было понять это, чтобы сделать ссылку на пункт меню для встроенного HTML в fancybox. Вставьте следующий код в файл theme.php:

function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a class="fancybox"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

Затем ... на вкладке «Меню» панели инструментов WP создайте пользовательскую ссылку и добавьте ее в свое меню. Вверху, где написано Параметры экрана, убедитесь, что у вас установлен флажок «Связь с ссылками (XFN)». Это добавит это поле в ваш пользовательский пункт меню. Введите «fancybox» (без кавычек) в поле и сохраните свое меню.

Функция ищет вызов в меню навигации, затем находит, где бы вы ни находились, rel="fancybox"и заменяет его на rel="fancybox" class="fancybox". Вы можете заменить fancybox любым классом, который вам нужно добавить в пункты меню. Готово и сделано!

Текущие ответы, кажется, не признают, что вопрос в том, как добавить класс к aэлементу, а не к liэлементу, или слишком сложен. Вот простой подход с использованием nav_menu_link_attributesфильтра, который позволяет настроить таргетинг на определенное меню, основанное на его фрагменте, и на конкретную ссылку на страницу в этом меню, основанную на его идентификаторе. Вы можете использовать var_dump $ args и $ item, чтобы получить больше способов создать ваше условие.

add_filter('nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4);

function custom_nav_menu_link_attributes($atts, $item, $args, $depth){
    if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){

        $class = "button";

        // Make sure not to overwrite any existing classes
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}

Я знаю, что на этот вопрос давным-давно ответили, но, как общая информация, я нашел, как добавить класс для каждого пункта меню индивидуально, используя опцию «Экран» на странице администратора WordPress для пользовательских меню.

Мне пришлось сделать что-то похожее недавно и придумать другой способ. Мне пришлось добавить аналогичный класс для плагина Nivo Lightbox. Поэтому я добавил «nivo» к атрибуту rel («Link Relationship (XFN)»), а затем к nav_menu_link_attributesфильтру следующее.

function add_nivo_menuclass($atts, $item, $args) {
    if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) {
        $atts['class'] = 'lightbox';
        $atts['data-lightbox-type'] = 'inline';
    }

    return $atts;

    }
add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3);

В верхней части Appearance -> Menusстраницы нажмите, чтобы развернуть Screen Options, установите флажок CSS Classes. Теперь, когда вы развернете каждый из добавленных пунктов меню, вы увидите CSS Classes (optional)поле.