メニューをDnDで並べ替えたりといろいろ便利なカスタムメニューを更にカスタムする方法。
管理画面の外観→メニューのページの右上にある「表示オプション」を押すと上の方からずずーっとでてくる設定メニューの右下にある「説明」にチェックを入れるとカスタムメニューの設定の中に「説明」という入力欄が増えます。
その説明部分をメニューの中での自分用説明メモじゃなくて,実際にページに表示される説明にして,ついでにjQueryで見た目を弄っておこうみたいな作戦です。
カスタムメニューを有効にする
そもそも外観の中にメニューがないって場合はテーマが対応していない可能性がありますので有効にします。
一番手っ取り早くやるならば,
1 |
add_theme_support('menu'); |
とした上で,テンプレートファイルのメニューを出したい場所,例えばヘッダーのメインビジュアルの下とかなら,
1 |
<?php wp_nav_menu(); ?> |
みたいな感じでとりあえず表示は出来るみたい。
複数使ったり,メニューの表示方法を細かく設定するならもっといろいろ書くみたいですがとりあえず今はスルーで。
フックを用意する
説明フィールドは最初から用意されてますが,標準の状態ではこのままじゃ管理画面上のメモのままです。
使用中のテーマが対応している場合はメニューに説明が表示されます
なんて書かれてるんだし,対応させようじゃないですか。
1 2 3 4 |
add_filter('walker_nav_menu_start_el','nav_menu_with_description',10,4); function nav_menu_with_description($item_output, $item) { return preg_replace('/(<\/a>)/', "</a><span>{$item->description}</span>", $item_output); } |
これだけで大丈夫みたい。
1行目:
フィルターを追加する処理。 walker_nav_menu_start_el ってとこでフックして次に用意する nav_menu_with_description って関数をそこで走らせてくださいってこと。
後ろの数字は10の方がプライオリティで4の方がフィルター関数が持っているパラメータの数を示してるんですが,
自分もまだちゃんと説明できるほど詳しくないのでこのあたりを読んでください。
2行目〜4行目がその自作関数ですね。
といってもまぁ実際の処理は3行目の部分だけなのですが。
preg_replace はPHPの正規表現を使った置き換えです。
今回は結構強引な方法ですが,
1 2 3 4 5 |
ナビゲーションメニューのリンクまわりから </a> というタグを探して </a><span>説明に記入した内容</span> に置き換える |
ように書きました。
もうちょっと正規表現勉強すれば多分もっとスマートな書き方が出来るんだと思うけど…。
因みに {$item->description} が説明フィールドの内容を表示する為のコードです。descriptionってとこを title attr_title にすれば説明の替わりに「タイトルの属性」を利用できるし,
両方使いたければ両方使うこともできる…筈です。まだ試してないけど。
ここまでやれば,カスタムメニューを表示したときに,メニューの文字の後ろに説明文がくっついた状態のソースができるはずです。
1 |
<li><a href="hogehoge.net">profile</a><span>プロフィールを表示します</span></li> |
みたいな感じで。
なので,あとはCSSとjQueryでごにょごにょすれば,マウスオーバーしたら<span>で挟んだ説明文を浮き上がらせるみたいなナビゲーションが作れそうですね。
おまけ。
置き換え処理の部分をこうやって書くと,リンクの途中に追加できます。
1 2 3 4 |
return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<span>{$item->description}</span><", $item_output); って書くと, <a href="hogehoge.net">profile<span>プロフィールを表示します</span> って出力できます |
これもCSSで整形したりしてあげれば
メニュー
説明
みたいなナビゲーションもできそうですね。
追記
タイトル属性を使う時のタグを間違えてましたorz
正しくは title じゃなくて attr_title でした。
うごかないよー!って方ごめんなさい。
本文の方は修正済みです。
コメントする