WordPressのカスタムメニューをカスタマイズして固定ページのサムネイルを表示させる

iphone_app

今回、iPhoneアプリの紹介ページを固定ページとして作成したので、カスタムメニューウィジェットにそのページへのリンクをサムネイル付きで表示したいと思ったのですが、少々カスタマイズが必要だったのでその内容についてのメモ。

WordPressのサイドバーは、管理画面のウィジェットで設定することができますが、これが非常に便利。わかりやすいインターフェースで初心者でも簡単にサイドバーを作成できるのが魅力ですが、デフォルトの機能だとちょっと物足りないのが欠点。管理画面からではなく直接コードを書く方法もあるみたいですが、なるべく管理画面から操作したいところ。今回はカスタムメニューで固定ページをサムネイル付きで表示させたかったのですが、かなり悪戦苦闘しました。
参考にさせていただいたのはこちらのサイトです。
http://d.hatena.ne.jp/deepskyblue/20110412/p1
functions.phpを編集するだけなので、Wordpressをアップデートしても安心です。

管理画面から普通にカスタムメニューの設定をする

ここでは説明は省きますが、まずは管理画面から普段通りにカスタムメニューウィジェットをサイドバーに追加します。カスタムメニューには設定したメニューを選択できます。このメニューにはアプリ紹介の固定ページを追加しました。

サムネイルを表示させる

functions.phpの最後尾に以下のコードを追加します。

functions.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;
}

次に、このコードの”//ここからカスタマイズのコードを書く”の次の行から以下のコードを追加します。

functions.php

class My_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 = $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 ) . '"' : '';
 
		$output .= $indent . '<li' . $id . $value . $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 .= get_the_post_thumbnail($item->object_id, array(100,100));
		$item_output .= '</a>';
                if (empty($args->remove_title)) {
                    $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 );
	}
 
}
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;
}

このstart_el関数は、wp-includes/nav-menu-template.phpの中にあるstart_el関数をそのままコピーして、一部修正を加えた物です。26〜28行目でページへのリンクをサムネイル表示させています。29〜33行目の部分では、非常に勝手ですがアプリのアイコンだけにしたいためタイトルを強引に消しています。そのために以下のコードをさらにfunctions.phpに追加しまました。

functions.php

function wp_nav_menu_with_thumbnail($args = array()) {
    $args['container'] = '';
    $args['remove_title'] = true;
    return $args;
}
add_filter('wp_nav_menu_args', 'wp_nav_menu_with_thumbnail');

この関数では、カスタムメニューの設定をデフォルトから変更できます。remove_titleはデフォルトに無い変数なので、あまりよくないとは思いますがとりあえず機能したのでこれで行こうと思います。これでアプリのアイコンだけを表示できました。

app_filterとはWalker_Nav_Menuとはなんぞやといった感じでしたが、wp-includes内のコードを変更すること無くカスタマイズできるのは素晴らしいですね。こちらのサイトの方にも非常に感謝です。
http://blog.g-fellows.com/web/wordpress/743/
Wordpress非常に難しく奥が深いです。