web-dev-qa-db-ja.com

WordPressテーマのサブメニューでメニュー項目にキャレットを追加する

私はwp_nav_menu（）を使ってカスタムテーマに取り組んでいます。私がやりたいことは、サブメニューを持つメニュー項目にキャレットを追加することです。例えば、私のメニューがこんな感じなら：

  • メニュー項目1
  • メニュー項目2
    • メニュー項目2a
    • メニュー項目2b
  • メニュー項目3

私はそれをこのようにフォーマットできるようにしたいです。

  • リスト項目
  • メニュー項目1
  • メニュー項目2>
    • メニュー項目2a
    • メニュー項目2b
  • メニュー項目3

メニューの構造を知らずに。これはかなり一般的なフォーマットの問題のように思われるので、私はこれを提供するための組み込み機能があるかどうか疑問に思いました。

theme-developmentmenuswalker
7
Will Kunkel

私はjQueryを使用してこれを行います（スクリーンリーダーなどのために必ずしもTEXTに含まれる必要はないので） - ちょうど別のオプション...：

jQuery(document).ready(function() {
  jQuery('ul#nav li').has('ul').addClass('parentul');
});

それからその "parentul"クラスのために私は矢印の背景画像を入れてそれを右に配置します> ...

4
Jennifer Stuart

カスタムウォーカーを使ってこれを行うことができます。 functions.phpの最後に以下のクラスを貼り付けてください。

class Nfr_Menu_Walker extends Walker_Nav_Menu{

                /**
         * Traverse elements to create list from elements.
         *
         * Display one element if the element doesn't have any children otherwise,
         * display the element and its children. Will only traverse up to the max
         * depth and no ignore elements under that depth. It is possible to set the
         * max depth to include all depths, see walk() method.
         *
         * This method shouldn't be called directly, use the walk() method instead.
         *
         * @since 2.5.0
         *
         * @param object $element Data object
         * @param array $children_elements List of elements to continue traversing.
         * @param int $max_depth Max depth to traverse.
         * @param int $depth Depth of current element.
         * @param array $args
         * @param string $output Passed by reference. Used to append additional content.
         * @return null Null on failure with no changes to parameters.
         */
        function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

                if ( !$element )
                        return;

                $id_field = $this->db_fields['id'];

                //display this element
                if ( is_array( $args[0] ) )
                        $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );

                //Adds the 'parent' class to the current item if it has children               
                if( ! empty( $children_elements[$element->$id_field] ) ) {
                        array_Push($element->classes,'parent');
                        $element->title .= ' >';
                }

                $cb_args = array_merge( array(&$output, $element, $depth), $args);

                call_user_func_array(array(&$this, 'start_el'), $cb_args);

                $id = $element->$id_field;

                // descend only when the depth is right and there are childrens for this element
                if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

                        foreach( $children_elements[ $id ] as $child ){

                                if ( !isset($newlevel) ) {
                                        $newlevel = true;
                                        //start the child delimiter
                                        $cb_args = array_merge( array(&$output, $depth), $args);
                                        call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
                                }
                                $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
                        }
                        unset( $children_elements[ $id ] );
                }

                if ( isset($newlevel) && $newlevel ){
                        //end the child delimiter
                        $cb_args = array_merge( array(&$output, $depth), $args);
                        call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
                }

                //end this element
                $cb_args = array_merge( array(&$output, $element, $depth), $args);
                call_user_func_array(array(&$this, 'end_el'), $cb_args);
        }
}

それからheader.php（またはwp_nav_menuがあるところ）でこのようなことをしてください：

<?php
    $walker = new Nfr_Menu_Walker(); 
    wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => $walker ) ); 
?>

ウォーカーの重要な部分は、次のif文です。

if( ! empty( $children_elements[$element->$id_field] ) ) {
                    array_Push($element->classes,'parent');
                    $element->title .= ' &gt;';
}

これはアイテムが子を持っているかどうかをチェックし、持っていればそれに 'parent' cssクラスを追加してからタイトルを 'xxxx'から 'xxxx>'に変更します。

（ http://wordpress.org/support/topic/wp_nav_menu-add-a-parent-class から変更）

7
Devin Humbert

最近では、WordPress自体がmenu-item-has-childrenを持つメニューliにul.sub-menuクラスを出力するように見えます。

JQueryなどを使用しなくても、背景画像を追加するためにこれにスタイルを簡単に追加できます。

0
Chiubaka