【賢威カスタム】カスタムフィールドを使用してWordPressのカスタムメニューにicon設定項目を追加する方法

【賢威カスタム】カスタムフィールドを使用してWordPressのカスタムメニューにicon設定項目を追加する方法メモ、賢威カスタムはページ下部で解説します。

通常メニューの出力はwp_nav_menu関数を使用してメニューを表示することが多い。しかしこれだとカスタムフィールドなどの追加ができない？

<?php wp_nav_menu( array('メニュー名' )); ?>

wp_get_nav_menu_items関数をforeachで回すことで、menu itemに設定したカスタムフィールドを取得、出力することができる。

<?php
$main_menu = wp_get_nav_menu_items(‘メニュー名, array());
  foreach($main_menu as $menu){
  echo '<li><a href="'.$menu->url.'">'.$menu->カスタムフィールド 名（下の場合だったらicon）.’’.$menu->title.'</a></li>';}
?>

入力欄がこんな感じで追加されます。

参考

賢威のグローバルナビにfont-awesomeアイコンを出力する

当サイトで採用しているような賢威のグローバルナビにfont-awesomeアイコンを出力してみます。

１アイコン情報の入力

アイコンはフォントオーサムで設定します（画像も可）カスタムフィールド（プラグイン：Advanced Custom Fields）を使用してグロナビメニューにアイコン設定フォームを追加します。

カスタムフィールドの新規作成＞ルール＞表示する条件 menu item > グローバルナビゲーション（またはメニュー名）で新規作成します。

フィールド名はお好みで設定します（今回はiconと設定しました。）

するとメニュー設定画面にicon設定フォームの設置が完了します。入力は完了です。

２賢威テーマに出力

次は入力したテキストデータをテーマに出力します。メニューを表示しているcssのセレクタは

<ul id="menu" class="keni-gnav_cont">

となっているのでテーマファイル内で検索をしますとheader.php内にあることがわかります。

子テーマで編集する場合はheader.phpをアップロードして編集します。

				<ul id="menu" class="keni-gnav_cont">
				<?php
					wp_nav_menu( array( 
						'theme_location'	=> 'gnav',
						'menu_id'			=> 'gnav',
						'menu_class'		=> 'gnav',
						'container'			=> '',
						'items_wrap'		=> '%3$s',
					) );
				?>
				<li class="menu-search"><?php get_search_form(); ?></li>
				</ul>

この部分がグローバルナビを出力している箇所になります。

こちらで説明している通り、wp_nav_menuではカスタムフィールドを設定することができないので、

wp_get_nav_menu_items

を使用します。

				<ul id="menu" class="keni-gnav_cont">
					<?php
	$main_menu = wp_get_nav_menu_items(‘global_navi, array());
	foreach($main_menu as $menu){
		echo '<li><a href="'.$menu->url.'">'.$menu->icon.''.$menu->title.'</a></li>';}
					?>
				</ul>

既存のソースコードを非表示にして上記コードを追加します。（global_navi→メニュー名・$menu->icon→カスタムフィールド名）