WordPressのナビゲーションメニューに説明をつける

説明つきナビゲーションメニュー WordPress

ナビゲーションメニューバーにメニュー名だけではく、英語で書き添えしたりしているこれのやり方です。
説明つきナビゲーションメニュー

メニューに説明文を入力する説明欄は、外観→メニューの表示オプションで、□説明 にチェックをつけると表示されるようになります。
メニューの説明欄 

すると、こんな感じで説明を入れられるようになります。
メニューの説明を入力

ただ、デフォルトでは説明はメモ扱いで、なにを入力しても表示はされません。 そこで、入力した説明をナビゲーションメニューに表示させる方法を。

  1. 1.出力されたメニューアイテムの文字列を置換する方法(フィルターフック)
  2. 2.ナビゲーションメニューの生成プログラムを上書きしてしまう方法(Walker_Nav_Menuクラスの関数start_elをオーバーライド)

の2つ、備忘録を兼ねて紹介します。

ナビゲーションメニューを利用できるようにする

そもそも、ナビゲーションメニューが利用できるようになっている必要があります。 もし、利用できるようになっていなければ、次のコードをfunction.phpに入れます。

で、header.phpに、

と入れておきます。    

出力されたメニューアイテムの文字列を置換する方法(フィルターフック)

次のコードをfunction.phpに入れます。

これで、メニュータイトルにタグで囲み、説目の部分はで囲まれて出力されるようになります。 なにやらごちゃごちゃやってますが、やっていることはシンプルで、str_replaceでもとの文字列からタグと説明付きの文字列に置換しているだけ。シンプルです。 参考にしたサイトさん:http://themefoundation.com/menu-item-descriptions/

ナビゲーションメニューの生成プログラムを上書きしてしまう方法(Walker_Nav_Menuクラスの関数start_elをオーバーライド)

もう一つの方法です。フィルターフックを使うのではなく、ナビゲーション・メニューを生成している関数をオーバーライドします。 オーバーライドというのは、プログラムそのものを一時的に上書きしてしまうんですが、まずは以下のコードをfunction.phpに追加します。

  start_el関数が、ナビゲーション・メニューの文字列を生成している関数になってるので、それをそのまま上書きしてて、

の部分で、メニュータイトルをで囲んで、

の部分で、タグで囲んだ説明文を作っています。 今度は、header.phpにあるナビゲーションメニューの出力部分を変えます。 で、header.phpに、

となっているとしたら、arrayの部分に、 ‘walker’ => new description_walker()を追加します。

これで、説明が追加されるはずです。 参考にしたサイトさん:http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

CSSでデザインを当てる

あとは、cssを当ててやればOK。

.nav は、適宜変えてください。これで、説明付きのナビゲーションメニューになるはずです。

タイトルとURLをコピーしました