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 在自定義菜單中將類添加到特定鏈接