ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

WordPressのカスタムメニューをさらにカスタマイズする

June 05 2012

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

(これで次回、同じ作業する時には忘れなくて安心です)

| Posted in Wordpress | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jun 2017 July 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31