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

Я знаю, що ви можете додати клас у параметри спеціальних меню, але він додає його до 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;
}

Використовуючи цей елемент $, ви можете будь-яку умову. і це додасть класу до конкретного li, і ви можете стилізувати тег на основі такого, як:

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

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

Два кроки: замініть код wp_nav_menu за замовчуванням на відредагований, а потім додайте код до function.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())
     );

Далі додайте наступний код до function.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 у фан-боксі. Вставте наступний код у function.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. Тому я додав "рівень" до атрибута rel ("Зв'язок посилань (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)поле.