WordPressのカスタムメニューでサブタイトル付きのメニューを作成する手順
ここからの解説は、下記の条件を満たしているものとして解説をさせていただきます。
- お使いのテーマでカスタムメニューが利用可能である。
- カスタムメニューが既にサイト上に表示されている状態である。
- 既にカスタムメニューでメニューを作成している。
満たしていない場合は、予め上記の条件を満たしてください。
以下の手順で、サブタイトル付きのメニューを実装することができます。
- functions.phpにコードを追記する
- サブタイトルを入力する項目を表示させる
- サブタイトルを入力する
- サブタイトルが表示されているのを確認する
- 見た目を整える
個別にみていきましょう。
手順1:functions.phpにコードを追記する
functions.phpに以下のコードを追加します。
add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);function description_in_nav_menu($item_output, $item){
return preg_replace('/(<a.*?>[^<]*?)', '$1' . "<br /><span>{$item->attr_title}</span><", $item_output);
}
参考:かちびと.net
テーマ側のカスタマイズは、このコピペのみで完了です。
手順2:サブタイトルを入力する項目を表示させる
カスタムメニューの管理画面にアクセスしてください。
管理画面の【外観】⇒【メニュー】と進めば、上記の画面が表示されます。
ページ上部に「表示オプション」という項目(上記画像の赤枠部分)があります。
こちらをクリックしてください。
上記の画像の様に設定項目が展開されます。
上記画像の赤枠部分「説明」にチェックを入れてください。
既にチェックが入っている場合は、何もしなくても大丈夫です。
メニュー項目の中に「説明」という入力エリアが表示されています。
こちらに入力したテキストが、サブタイトルとして表示されるようになります。
手順3:サブタイトルを入力する
サブタイトルを表示させたいメニューを選択してください。
各項目の「説明」に、その項目のサブタイトルを記入してください。
手順4:サブタイトルが表示されているのを確認する
手順3までの作業が完了したら、サブタイトルを表示させたいメニューをサイト上で確認してください。
上記のように「説明」に入力した内容が、メニュー上に表示されていればOKです。
上記の画像は、レイアウトを整えた状態となります。
ご自身のサイトでは、レイアウトが崩れているかと思います。
手順5:見た目を整える
メニューに表示されたサブタイトルの見た目を整えましょう。
サブタイトルは【<span></span>】で囲まれています。
CSSでサブタイトルを囲む【<span></span>】を装飾して見た目を整えてください。
まとめ
カスタムメニューでサブタイトルつきのメニューを作成する方法をご紹介しました。
- functions.phpにコードを追記する
- サブタイトルを入力する項目を表示させる
- サブタイトルを入力する
- サブタイトルが表示されているのを確認する
- 見た目を整える
簡単な5ステップで、サブタイトル付きのメニューを作成することができます。
興味のあるかは、ぜひ実践してみてください。
コメントを残す