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 というフィルターがあって使えそうである。ひとつサンプルを作ってみた。

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


Share this entry