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

问题描述

我知道你可以在自定义菜单选项中添加一个类，但是将它添加到 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;
}

使用这个 $项目，你可以任何你想要的条件。这样就可以将类添加到特定的 li 中，并且可以根据这样来设计一个标签：

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

次佳解决方案

我通过 the use of a custom walker 在这个网站找到了一个解决方案。

两个步骤：用编辑的代码替换默认的 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="'%20%20%20.%20esc_attr(%20$item->url%20%20%20%20%20%20%20%20)%20.'"' : '';

       $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” 。

也就是说，它不允许每个链接的自定义类 (或至少我不知道如何编写它) 。这对我来说是个问题。

对于那些问你为什么要这样做？我想让我的菜单链接打开 lightboxes(颜色框，更具体)，他们需要链接上的类来做到这一点。例如：

<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”(不带引号) 到该字段并保存您的菜单。

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

参考文献

Add Class to Specific Link in Custom Menu

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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