NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

walker classについて改めて勉強中

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1263日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

管理画面から簡単にメニューを追加したり、並び替えたりと、便利な wp_nav_menu ですが、それでもやはり自動的に出力できる内容には限度があります。

ですが、 walker class とよばれる仕組みを使えば、かなりかゆいところまで手が届きます。

例えば、カスタムメニューに「クラス」という項目があります[*1]が、これはメニューの <li> タグに対してクラスを与えるもので、<a>タグにクラスを振ることはできません。

ですが、walker classを 使用すれば、それができるようになります[*2]

以前にも似たようなことを書きましたが、今回はもっと本格的な感じで、より複雑な事が行えます。

とりあえずコードを書いてみた

たとえば、先に挙げた、<a>タグ側にもクラスを付ける場合はこのように書けます。

functions.phpに書きます。

13行目に $class_names というのがあり、その前に <li> が見えることから、ここがメニューのリストを作る部分だということが判り、名前からもここにリストのクラスが出力されていることが予想できますね。

これをメニューのリンク部分(<a>タグ)にもくっつけてあげれば、リンクにもクラスを与えることができそうです。

$item_outputの部分を書き換えていけば、メニューの背景に画像を敷いたり、管理画面の「メニュー」で設定したラベルに勝手にへんな語尾をつけたりもできますw

23行目がリンクに挟まれたリンク文字部分ですので、その次の行に、

を追加してその中に文字を追加してあげればOK。まぁあまりやらないかもしれませんけどw

前回の記事でやったことをwalker classを使用して書くならば、

といった具合でしょうか?

メニューを出力するコードを書き換える

ここまでで準備は完了ですが、このままではまだなにも変わりませんので、利用したいメニューに walker class を適用させるためのコードを追記します。

 みたいな感じです。

基本的な設定は普段通りの wp_nav_menu ですが、最後に walker というパラメータが増えてますね。

ここで先ほど作成した walker class を呼び出すことで、その設定に基づいてメニューが出力されるようになるってことですね。

まだもうちょっと詳しく調べていけばもっといろいろできそうな気がします。

参考リンク

WordPressで、カスタムメニューの表示内容を変更する方法

[解決済み] wp_list_categoriesのリストにクラス付加 (6 件の投稿)

TAGS