WordPressのカスタムメニューにspan要素でサブタイトルをつけたい。[コピペおk]自分メモ！

パリピ

ワードプレスのカスタムメニュー。表示させる関数はわかるんだけど、それをデザイン通りに表示させる為にクラス名付与させたり、結構複雑だな？って最初思って。だから、まとめる！！自分メモ！！

  <ul class="header__nav">
          <li class="nav__list"><a href="">NEWS<span>ニュース</span></a></li>
          <li class="nav__list"><a href="">SHOP/SYSTEM<span>店舗システム</span></a></li>
          <li class="nav__list"><a href="">APP<span>アプリ</span></a></li>
          <li class="nav__list"><a href="">BLOG<span>ブログ</span></a></li>
          <li class="nav__list"><a href="">RECRUIT<span>キャスト求人</span></a></li>
          <li class="nav__list"><a href="">CONTACT<span>お問い合わせ</span></a></li>
        </ul>

今回、こんな感じの、ヘッダーメニューを作る機会があって。

HTMLはこんな感じ。これをワードプレスのカスタムメニューで表示させる時。ul>li>aまでって普通に表示はカスタムメニューの使い方基本が分かってたら簡単やん？

でもこのspanの部分ってどうすんね？ってなったので。まとめる！

まずは、そもそものカスタムメニューの使い方は知ってるとして。結論。functions.phpにこれを追加


function attribute_add_nav_menu($item_output, $item)
{
	return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<span>{$item->attr_title}</span><", $item_output);
}
add_filter('walker_nav_menu_start_el', 'attribute_add_nav_menu', 10, 4);

追加したら、管理画面に戻って。

それぞれの追加したメニューのタイトル属性の部分に書いた文字が上記のfunctions.phpの記述によって

<span></span>の間に表示されるように設定ができる！

検証ツールで見てみると、こんな形。

表現したかった最初のHTMLと同じ状態になってるのが確認できる。

これで普通にCSSでスタイルを当ててあげれば、思った通りにナビメニューカスタマイズ完了となる！

てことで、カスタムメニューってなんぞ？って人へめちゃくちゃ簡単に。↓

カスタムメニューとは

【管理画面】→【外観】→【メニュー】。管理画面から、任意の投稿や固定ページを任意の場所に表示することができるメニューのこと。固定ページの一覧を表示する関数はあるけれど。ヘッダーやフッターに設置したいナビメニューって。固定ページとカテゴリー、カスタム投稿を混ぜたり、順序を自由に決めたい！ってことでそんな時に大活躍するのがこのカスタムメニュー。

まずはこの【管理画面】→【外観】→【メニュー】。ワードプレスをインストールした状態だとこのメニュー欄はない。これを出現させてあげる為にfunctions.phpに記述をしてあげる。

function my_menu_init()
{
	register_nav_menus(
		array(
			'global'  => 'ヘッダーメニュー',
			'drawer'  => 'ドロワーメニュー',
			'sp' => 'SPヘッダー',
		)
	);
}
add_action('init', 'my_menu_init');

この記述の'global' => 'ヘッダーメニュー', とかの部分は、自分で好きな名前にしてOK！分かりやすいのにしとくのがベターかな。
例えばここを'paripi' => 'パリピ',にしても別に問題はない笑。

ここの =>’ヘッダーメニュー’の部分が、画像で言うとメニュー設定部分のメニューの位置。欄に表示される文字になる。

メニュー名を自分で見てわかるものに設定して、メニュー設定の中からどの位置のメニューをカスタムするか選択→メニュー保存。

そしたら、メニュー項目を追加部分からメニューに表示させたい項目を選択してメニューに追加をしていく。

そうするとこんな感じで、右側の部分にさっき選んだAPPが入ってる状態になる。あとはここに、必要なメニューを選択していけばおっけー！

カスタム投稿の一覧ページなどは、ここのカスタムリンクに直接リンクを記述して、表示させる。

ここに関しては、色々実際にいじってみて、どうすると何が紐付けれるのか見てみるといいと思う！今回はそこがメインではないからサラッといく！w

そしたら、ナビメニューを表示させたい場所。もともとHTMLべた書きしてある部分に下記を記述して動的にする。

   <?php
        wp_nav_menu(
          array(
            'depth' => 1,
            'theme_location' => 'global',   //functionsに記述した	'global'  => 'ヘッダーメニュー',の'global'の部分。管理画面でいう、ヘッダーメニューを表示させたい場合は'global'を記述
            'container' => 'nav',   //<ul><li><a>を囲むコンテナーを選べる。<div>か<nav>か.falseの場合はcontainerなし。
            'menu_class' => 'header__nav',  //<ul>に当てたい任意クラス名を記述。CSSでスタイルあてる用
          )
        );
        ?>

Codexに細かいarrayの中で設定できることは書いてあるから、見てみて必要なものをピックアップして記述したらOK

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu