基本的に、複数のサブナビゲーションメニューを追加しようとしていますが、かなり接近していますが、問題を解決するための適切なタックを見つけることができないようです...
Stu Nichols CSSメニューのバリエーションを使用しています...
コードはよりよく説明します;-)
このメニューを作成するために必要な関係には、最上位の要素がリストアイテム、子コンテナがdiv、子が{nth child}がulsとなるため、構造は次のようになります...
<li><a href='#'>parent</a>
<div>child-container
<ul><!--1st Child -->
<li>item</li>
...
</ul>
<ul><!--Sibling -->
<li>item</li>
...
</ul>
<ul><!--Sibling -->
<li>item</li>
...
</ul>
</div>
</li>
私の現在の考えは、追加のnav_menu_walkerを追加してサブメニューリストを作成することです...しかし、複数のwalkerを引数としてwp_nav_menuに渡すことができるかどうかはわかりません... IE ... ASSERT
$menu_params = array (
'theme_location' => 'primary',
'menu' => 'Main Menu',
'container' => 'div',
'container_class' => 'nav',
'container_id' => FALSE,
'menu_class' => FALSE,
'menu_id' => FALSE,
'echo' => TRUE,
'fallback_cb' => 'wp_page_menu',
'before' => FALSE,
'after' => FALSE,
'link_before' => FALSE,
'link_after' => FALSE,
'items_wrap' => "\n\t" . '<ul>%3$s</ul>' . "\n",
'depth' => 0,
'walker' => new Top_Nav_Menu_Walker()
<!-- Can I Add another Walker Here? -->
);
echo "\t\t<div id=\"navigation\">\n\t\t\t";
wp_nav_menu( $menu_params );
echo "\t\t</div>\n";
}
親->子-コンテナーの関係を取得するには、divおよびulをstart_lvl関数に追加しただけです...ここで、複数の兄弟を作成する方法を決定する際に問題が発生しています...
function start_lvl( &$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div>\n";
$output .= "\n$indent<ul>\n";
}
最上位のアンカー要素にクラスを追加するために、カスタムウォーカーを用意しています。start_el関数では、親クラスに基づいてアンカー項目のクラスを挿入しました。
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$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 ) . '"' : '';
/* inject some anchor classes */
if( $this->$depth == 0) {
if ( in_array( 'two', $item->classes ) || in_array( 'three', $item->classes )) {
$item->class = 'oneCol fly';
}
if ( in_array( 'four', $item->classes )) {
$item->class = 'twoCol fly';
}
};
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$output .= in_array( 'sub_nav_h4', $item->classes ) ? "\n" . $indent . "<h4>\n" : '';
$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 ) .'"' : '';
/* This 'should' always be true as WP doesn't support anchor classes */
$attributes .= ! empty( $item->class ) ? ' class="' . esc_attr( $item->class ) . '"' : '';
$item_output = $args->before;
$item_output .= '<a' . $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
これが私が達成しようとしているナビゲーション構造です...
<div id="navigation">
<div class="nav">
<ul>
<li class="noCol one"><a href="/">One</a> </li>
<li class="threeCol two"><a class="oneCol fly" href="/two/">Two</a>
<div>
<ul>
<li><h4><a href="#url">Egestas Sed</a></h4></li>
<li><a href="#url">Consequat Leo</a></li>
<li><a href="#url">Lacinia & Blandit</a></li>
<li><a href="#url">Interdum</a></li>
<li><h4><a href="#url">Pellentesque Velit</a></h4></li>
<li><a href="#url">Lacinia & Blandit</a></li>
<li><a href="#url">Interdum</a></li>
<li><a href="#url">Donec non Fringilla</a></li>
<li><a href="#url">Fusce Ullamcorper</a></li>
</ul>
<ul>
<li><h4><a href="#url">Facilisis</a></h4></li>
<li><a href="#url">Tristique</a></li>
<li><a href="#url">Donec</a></li>
<li><h4><a href="#url">Sapien</a></h4></li>
<li><a href="#url">Purus</a></li>
<li><a href="#url">Congue</a></li>
<li><a href="#url">Mattis</a></li>
</ul>
<ul>
<li><h4><a href="#url">Integer nec Diam</a></h4></li>
<li><a href="#url">Morbi Eget Pharetra</a></li>
<li><a href="#url">Nulla & Orci</a></li>
<li><a href="#url">Eget Sapien Sodales</a></li>
<li><h4><a href="#url">Aenean</a></h4></li>
<li><a href="#url">Velit Ligula</a></li>
<li><a href="#url">Maecenas</a></li>
</ul>
</div>
</li>
<li class="threeCol three"><a class="oneCol fly" href="/three/">Three</a>
<div>
<ul>
<li><h4><a href="#url">Egestas Sed</a></h4></li>
<li><a href="#url">Consequat Leo</a></li>
<li><h4><a href="#url">Pellentesque Velit</a></h4></li>
<li><a href="#url">Lacinia & Blandit</a></li>
<li><a href="#url">Interdum</a></li>
<li><a href="#url">Donec non Fringilla</a></li>
<li><a href="#url">Fusce Ullamcorper</a></li>
</ul>
<ul>
<li><h4><a href="#url">Facilisis</a></h4></li>
<li><a href="#url">Tristique</a></li>
<li><a href="#url">Donec</a></li>
<li><h4><a href="#url">Sapien</a></h4></li>
<li><a href="#url">Purus</a></li>
<li><a href="#url">Congue</a></li>
<li><a href="#url">Mattis</a></li>
</ul>
<ul>
<li><h4><a href="#url">Integer nec Diam</a></h4></li>
<li><a href="#url">Morbi Eget Pharetra</a></li>
<li><a href="#url">Nulla & Orci</a></li>
<li><a href="#url">Eget Sapien Sodales</a></li>
<li><h4><a href="#url">Aenean</a></h4></li>
<li><a href="#url">Velit Ligula</a></li>
<li><a href="#url">Maecenas</a></li>
</ul>
</div>
</li>
<li class="twoCol four"><a class="twoCol fly" href="/four/">Four</a>
<div>
<ul>
<li><h4><a href="#url">Ut vel Cursus</a></h4></li>
<li><a href="#url">Maecenas imperdiet </a></li>
<li><a href="#url">Congue Metus</a></li>
<li class="fly"><a class="fly" href="#url">Vitae Luctus</a>
<ul>
<li><a href="#url">Purus Pellentesque</a></li>
<li><a href="#url">Pellentesque Sed</a></li>
<li><a href="#url">Felis Nunc</a></li>
</ul>
</li>
</ul>
<ul>
<li><h4><a href="#url">Morbi Placerat Luctus</a></h4></li>
<li><a href="#url">Ut & Eleifend</a></li>
<li><a href="#url">Feugiat Euismod</a></li>
<li><a href="#url">Tempus Condi</a></li>
</ul>
</div>
</li>
<li class="noCol five"><a href="/five/">Five</a></li>
<li class="noCol six"><a href="/six/">Six</a></li>
<li class="noCol seven"><a href="/seven">Seven</a></li>
</ul>
</div> <!--</div class="nav"> -->
</div><!--</div id="navigation"> -->
その構造はCSSによって課されますよね?もしそうなら、あなたはあなたのCSSコードを再考する必要があります。:nth-child、:before、:afterなどの疑似要素について学びます。WPのデフォルトのメニューマークアップを使用して特定のメニューデザインを実装できないことを私は強く疑います。このメニューの外観のスクリーンショットを投稿できますか?
—
onetrickpony 2012
スクリーンショットをアップロードしようとしましたが、まだ担当者がいないようです。メニューウォーカー経由で苦労しています...ご協力ありがとうございます:-)
—
Eddie B
@EddieBあなたはいつでも画像ホスティングサイトのスクリーンショットにリンクできます
—
Steve Buzonas '30 / 09/30