web-dev-qa-db-ja.com

カスタムメニューの特定のリンクにクラスを追加する

カスタムメニューオプションでクラスを追加できることは知っていますが、それはAの前のLIに追加します。LI全体ではなくこの特定のAにクラスを直接適用したいのです。

だから出力の代わりに

<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>

何か案は？

menus
10
user3407

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;
}
11
Bainternet

私はこのサイトで カスタムウォーカーを使うことで解決策を見つけました 。

2つのステップ：デフォルトの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"、2番目のリンクに "lightbox2"のように、クラスを動的に生成する方法はありますか。

4
Raiman Au

解決しました!!!!メニュー項目をファンシーボックス内のインライン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ダッシュボードの[メニュー]タブで、カスタムリンクを作成してメニューに追加します。画面のオプションが表示されている一番上に、 "Link Relationship（XFN）"がチェックされていることを確認してください。それはあなたのカスタムメニュー項目にそのフィールドを追加します。フィールドに「fancybox」と入力してメニューを保存します。

この関数は、ナビゲーションメニューの呼び出しを探し、次にrel="fancybox"がある場所を見つけて、それをrel="fancybox" class="fancybox"に置き換えます。あなたはあなたのメニュー項目に追加する必要があるどんなクラスでもfancyboxを置き換えることができます。完了しました。

3
HahahaComedy

現在の回答では、質問がa要素ではなくli要素にクラスを追加する方法であること、または複雑すぎることを認識していないようです。これは、スラッグに基づいて特定のメニューをターゲティングし、IDに基づいてそのメニュー内の特定のページリンクをターゲティングできるようにするnav_menu_link_attributesフィルタを使用した簡単なアプローチです。 $ argsと$ itemをvar_dumpして条件を作成する方法をさらに増やすことができます。

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;
}
1
MarcGuay

Appearance -> Menusページの上部にあるScreen Optionsをクリックして展開し、CSS Classesのチェックボックスをオンにします。追加した各メニュー項目を展開すると、CSS Classes (optional)フィールドが表示されます。

0
Unicornist

私はこれがずっと前に答え​​られたことを知っています、しかし一般的な情報として、私はカスタムメニューのためのWordPress管理者ページの「スクリーン」オプションを使って個々にそれぞれのメニュー項目にクラスを加える方法を見つけました。

0
RaiGA

私は最近似たようなことをしなければならず、また別の方法を考え出しました。私はNivoライトボックスプラグインのために同様のクラスを追加しなければなりませんでした。そこで私はrel属性（ "Link Relationship（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);
0
darrinb