バズ部テーマ  ‎Xeory base メニューに英字などで下にサブメニューをかっこよく表示したい!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

お客様のホームページを作成していて、ちょっとオシャンティーなメニューにしたいなと。
でも画像で作成したくないので、ワードプレスの機能とCSSを活用してメニューの下に英字でサブタイトルのようにしたいなと思った次第です。
こんな風に日本語メニューの下に英語で書いてあるやつですね。

まずはメニューの用意をします。
バズ部ベースの場合、管理画面左に表示されている「外観」にマウスを乗せると表示されるリストの中に「メニュー」があるのでクリックします。
ここでメニューをまず作成します。
私はメニュー名を「menu」で作成しました。

※テーマによっては下記の設定で「説明」に入力するだけで表示されるものもあります
ただバズ部さんのテーマbaseでは表示されません

【ダッシュボードでの設定】
外観→メニューでまずはメニューを作成し、表示オプションで「説明」にチェックします。
それから各メニューの下に表示させたい英字や日本語を入力します。

ダッシュボードの設定はこれだけです。

【functions.php】
下記のコードをfunctions.phpに追記する事で「説明」を表示できるようになります。
あとはスタイルを調整してあげてくださいね!

<?php
 
add_theme_support( 'menu' );
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' . "
<span>{$item->description}</span><", $item_output); } ?>

これで最初の画像のようになります♪

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*