WordPressのカスタムメニューはテンプレートにwp_nav_menuを使って配置するだけで
簡単に設置できるのが魅力。
こいつはバージョン3.0.0以降から追加されたとても便利なもの。
パラメータも豊富で、出力するHTMLをそれなりに制御はできるんですが
「わけのわからんClassとかなんかウゼエ」って場合にどうすんだ、というお話です。
まずはWordpress私的マニュアル様の記事で基礎を勉強。
http://elearn.jp/wpman/function/wp_nav_menu.html
ここでパラメータをある程度把握すれば配置も簡単です。
header.phpあたりに
<?php wp_nav_menu( array ( 'menu' => 'xxx' )); ?> |
と書いてやればそれでOK。
パラメータの書き方は上記を参考にしてカンマ区切りで増やしていけばOKです。
たとえば、HTML5で作ってる際はやっぱりnavで囲みたい、って時は
<?php wp_nav_menu( array ( 'container' => 'nav' )); ?> |
と書いてやればいいのです。
ただこのままだとliタグ周りにスゴイ数のclassが付くんですよね。
これはパラメータだけでは制御できないので、function.phpで
カスタムメニューの表示方法を再定義する、という方法を見つけました。
まずはfunctiom.phpに
class My_Walker_Nav_Menu extends Walker_Nav_Menu { // ※ここにカスタマイズを書き込んでいく。 } add_filter( 'wp_nav_menu_args' , 'my_nav_menu_args' ); function my_nav_menu_args( $args ) { $args = (object) $args ; $args ->walker = new My_Walker_Nav_Menu; return $args ; } |
と最後尾にでも書き込みます。
で、今回はwp_nav_menuの表示方法を変えてみます。
カスタムメニューの中のliタグのクラスを排除して、
中のaタグにカテゴリIDを付加したmmneuというIDを出力する方法です。
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; $classes [] = 'menu-item-' . $item ->ID; $class_names = join( ' ' , apply_filters( 'nav_menu_css_class' , array_filter ( $classes ), $item , $args ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"' ; $id = apply_filters( 'nav_menu_item_id' , 'menu-item-' . $item ->ID, $item , $args ); $id = strlen ( $id ) ? ' id="' . esc_attr( $id ) . '"' : '' ; $output .= $indent . '<li>' ; //liタグの出力をシンプルにします。 $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; //ここ以下でaタグの出力をカスタマイズします。 $item_output .= '<a id="mmenu' . $item ->ID . '" ' . $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 ); } } |
という記述を、さっきの// ※ここにカスタマイズを書き込んでいく。って所に書き加えると
liタグの中のaタグのIDにmmenu○○というカテゴリIDが入ったものが出力されます。
文字置き換えメニューで背景画像をjQueryで制御する場合なんかは便利ですね。
今回、参考になったのはこちらのサイトです。
http://d.hatena.ne.jp/deepskyblue/20110412/p1
(これで次回、同じ作業する時には忘れなくて安心です)