Blog

[WordPress] カスタムメニューの項目に付与されるクラスをカスタマイズする

Posted by admin at 8:25 日時 2013/02/09

いつものごとくメモ程度に。WordPressにもカスタムメニュー機能が追加されて、ナビゲーションを管理画面から自由に作成することができるようになった。柔軟性が高く、拡張性にも配慮された実装なので便利なのだが、カスタマイズしにくい。とはいえ、wp_nav_menu テンプレートタグでメニューを呼び出す際、独自の Walker クラスを指定すればなんとでもなるのだが、Walker クラスを作るのは非常に面倒なので、もうちょっとお手軽にカスタマイズしてみる。

やりたいことは、各項目のclass属性のカスタマイズ。選択中の項目は class=”current_page_item” とついたり、条件によって自動でclass属性が割り振られるので、CSSだけである程度デザインをコントロールできるようになっている。ただし、案件によってはそれだけでは済まないこともある。wp_nav_menu 関数の中身を見ると、class属性を割り当てた直後に wp_nav_menu_objects というフィルターがあって使えそうである。ひとつサンプルを作ってみた。

<?php
function nav_menu_class_customize($sorted_menu_items) {
foreach ($sorted_menu_items as $sorted_menu_item) {
// if menu item is a post type object (is not an archive or custom)
if ($sorted_menu_item->type == 'post_type') {
// get post object from object id
$post_obj = get_post($sorted_menu_item->object_id);
// rules
if ($post_obj->post_name == 'hoge') {
$sorted_menu_item->classes[] = 'this-page-is-hoge';
}
}
}
return $sorted_menu_items;
}
add_filter('wp_nav_menu_objects','nav_menu_class_customize');
view raw gistfile1.php hosted with ❤ by GitHub

hoge というスラッグを持つ投稿または固定ページがメニュー内にある際、かならず this-page-is-hoge というclass属性が付加されるようにしている。やっかいなのは、$sorted_menu_items の返り値はWP_Postクラスのインスタンスの配列だが、nav_menu_item 投稿タイプのオブジェクトなので、ナビメニューの項目ではなく、実際に表示される投稿の情報で条件分岐を行うには、object_id を用いて get_post を通さないといけない。しかし、単純なルールを追加するくらいなら、Walkerクラスを独自に実装するよりだいぶ楽である。


Share this entry