web-dev-qa-db-ja.com

wp_nav_menuリンクアンカータグ内にspanクラスを追加

トップレベルの項目にクラスを追加する例を見つけたので、サブ項目を持つメニュー項目に矢印を表示することができますが、既に組み込まれているWordPressクラスに対応するのはひどいようです、それはただすべての国家を台無しにします。

現在のナビゲーションメニューはこのようなものです<li><a>Text</a></li>

代わりに、親の<span class="arrow"></span>タグ内に<a></a>を追加する方法はありますか？

例、

⇒<span class="arrow"></span>タグの内側に⇒<a/></a>を追加

したがって⇒<li><a>Text<span class="arrow"></span></a></li>は親です。

現在のコード親である<span></span>タグの外側に<a></a>タグを追加します。

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth, $args) {
        $indent = str_repeat("\t", $depth);
        if('primary' == $args->theme_location && $depth ==0){
            $output .='&lt;span class="arrow">&lt;/span>';
        }
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
    }
}

「 spanクラスを<a>の中に追加する」から編集されたオリジナルの質問タイトル

menusnavigationwalker
3
chris_r

これは実際には、プライマリレベルとセカンダリレベルのタグ内にスパンクラスを表示する2つのインスタンスを作成するため、設計とナビゲーションの目的でスパンクラスに異なる画像を追加できます。

これにより、ヘッダーメニューにドロップダウンがあるかどうかをユーザーや開発者が確認しやすくなり、またWebサイト内を移動しやすくなります。

1.下記のコードをfunctions.phpに追加してください。 

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu {
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $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        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

        if ( 'primary' == $args->theme_location ) {
            $submenus = 0 == $depth || 1 == $depth ? get_posts( array( 'post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array( array( 'key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids' ) ) ) ) : false;
            $item_output .= ! empty( $submenus ) ? ( 0 == $depth ? '<span class="arrow"></span>' : '<span class="sub-arrow"></span>' ) : '';
        }
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

2. wp_nav_menuがインストールされているheader.phpに以下のコードを追加します。

以下に説明するコードは、この場合の新しいカスタムメニューをインストールするコードです。Nav_Walker_Nav_Menuになります。

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?>

3. CSSを追加してください

そのため、タグ内に新しいスパン矢印の画像をプライマリレベルとセカンダリレベルで表示できます。

#menu-header-menu li span.arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu li a:hover span.arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li span.sub-arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li a:hover span.sub-arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}

この助けを願っています！ :)

4
chris_r

link_before関数を宣言するときに、配列引数でbeforeまたはwp_nav_menuパラメータを使用してみましたか？

注：反対の効果を得るにはafterまたはlink_afterを使用してください。

例、

wp_nav_menu(

    //normal arguments here....etc

    'before'    => '<span class="arrow"></span>',

    //or 'link_before' => '<span class="arrow"></span>',


);

コーデックスから：

$before
（文字列）（オプション） リンクの前にテキストを出力する
デフォルト値：なし

   e.g. 'before'    => ''

または...

$link_before
（文字列）（オプション） リンクテキストの前にテキストを出力する
デフォルト値：なし

   e.g. 'link_before'    => ''

支援リソース：

http://codex.wordpress.org/Function_Reference/wp_nav_menu

5
userabuser

Userabuserとwordpress_designerによって投稿された回答はどちらも素晴らしいですが、2つを組み合わせた回答を投稿したいと思います。

この答えを使えば、link_beforeを適用したくない場所をロジックで定義できます。あなたがリンクテキストの前に置きたいものと同様に。

まず、以下のような非常に単純なクラスを作成してください。このクラスは、要素がサブメニュー（$depth <= 0）ではないときはいつでもチェックすることと、link_before値をきれいにして記憶することに対してだけ責任があります。

if ( ! class_exists('PREFIX_Menu_Walker')) {
    class PREFIX_Menu_Walker extends Walker_Nav_Menu {
        public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $before = property_exists($args, 'link_before') ? $args->link_before : '';

            // Empty the `link_before` when walking over a root level element
            if ($depth <= 0 && !empty($before)) {
                $args->link_before = '';
            }

            // Continue with the default/core wordpress nav menu walker class
            parent::start_el( $output, $item, $depth, $args, $id );

            // Remember what `link_before` $args where set.
            $args->link_before = $before;
        }
    }
}

2番目にやらなければならないことは、次のようにwalker引数とlink_before引数をwp_nav_menu配列に適用することです。

wp_nav_menu([
    'link_before' => '<span>Hello</span>',
    'walker' => new PREFIX_Menu_Walker()
]);
0
Fleuv