将类添加到自定义菜单中的特定链接

我知道您可以在自定义菜单选项中添加一个类，但是它将其添加到A之前的LI中。我想将该类直接应用到此特定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”等等？

解决了！！！！我需要弄清楚这一点，以使菜单项链接到fancybox中的嵌入式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”（不带引号）并保存菜单。

该函数会查找对导航菜单的调用，然后查找您有a的位置rel="fancybox"并将其替换为rel="fancybox" class="fancybox"。您可以将fancybox替换为需要添加到菜单项的任何类。做完了！

当前的答案似乎并未意识到问题在于如何向a元素而不是li元素添加类，或者过于复杂。这是使用nav_menu_link_attributes过滤器的一种简单方法，它允许您基于子菜单确定特定菜单，并根据其ID定位该菜单中的特定页面链接。您可以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灯箱插件添加一个类似的类。因此，我在rel属性（“链接关系（XFN）”）中添加了“ nivo”，然后在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)字段。