BLOG

WordPressカスタムメニュー&カレント表示に関するメモ

WordPressでナビゲーションを組むのに非常に便利な「カスタムメニュー」

function.phpに以下のソースを記述すれば管理画面からカスタムメニューが使えるようになる。
みなさんご存知。

add_theme_support('menus');

カスタムメニューのなにが良いって、
セッティングさえキチンとしておけば、
メニュー項目のドラッグアンドドロップでサックリメニューを組めちゃうという。
これはメニュー項目が多かったり入り組んでいたりするケースにおいては、メニュー管理の手間を軽減するという意味で実に便利ですね。

クライアントにWordPressを納めた場合なんかにも大変重要な意味を持ってくる機能でございます。

ただし、本機能の本命はほとんどこちら。
「アクティブ階層のメニューに“current”をクラスで自動付与してくれる」
というところですね。

コイツがあるからこそ、
カスタムメニューを使用するといっても過言ではありません。

currentに対して適時スタイルを指定したりjavascriptを絡めることで、
カレント階層時の当該メニューの見た目を変えてやる等のユーザビリティ施策が行なえます。

ちなみに、かなりゴチャゴチャと付随するソースがくっついてくるカスタムメニューですが、
あんま気にする必要なし、
というか、currentをつけてくれる等、
むしろ便利なソースが含まれているので、
ソースのスリム化なんてナンセンス。
でも、どうしても、って場合には、
function.phpに以下のようなフックをかませば制御可能なので、
ケースバイケースで。

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array( 'current-menu-item' )) : '';}

これ、だれかのソース参考にしたヤツだけど、出典元は覚えてません。

まあ、無駄なソースを軽減することにより多少なりともSEOに寄与するであろうというふうに考えるならば、はたまたシステマティックなメニューを構築する必要がなければ、書いておいても良いでしょうね。

ちなみに、カスタム投稿機能を交えた階層の入り組んだメニューを構築しようとすると問題もあったりするのですが、その辺はカスタム投稿系のユーティリティプラグイン
「Current Menu Item for Custom Post Types」(WP公式プラグインで検索しろよ)
で回避回避。

タグ:

Comments