韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

【WordPress】カスタムメニューでグローバルナビゲーションを作る方法

WordPress

グローバルナビゲーションを作るとき、header.phpにナビゲーションをHTMLでベタ書きすることもできますが、カスタムメニューにすることにより、管理画面からメニューの入れ替え、追加、文言・URLの変更などが簡単にできるようになります。
メニューを作る際、ウィジェットで作ることもできますが、サイドバーのメニューではないので以下の方法で作りました。

1、functions.phpに追記

functions.phpに、以下のソースコードを追記します。

//カスタムメニューの設置
register_nav_menu('mainmenu', 'メインメニュー');

( )の中身の1つ目は、ロケーション名、2つ目はロケーションの説明です。

スポンサーリンク

2、管理画面からメニューを設定

「管理画面 > 外観」の中に「メニュー」という項目ができます。
まず、「メニューを編集」のタブで、メニュー名を好きな名前にします。
例えば、「グローバルメニュー」などです。

そして、「メニュー構造」の各項目の右側にある矢印をクリックして、必要な項目を編集します。いらないものは「削除」をクリックすると消えますし、文言やURLも自由に変更可能です。
ちなみに、文言の前にFontAwesomeのアイコンを入れることもできます。
必要な項目がない場合は、左側の項目から選んでメニューに追加ボタンを押せば反映されます。
外部リンクも、左側にある「カスタムリンク」でURLと文言を入力すればできます。
最後に、「メニューを保存」ボタンを押します。

その次に、「位置の管理」タブで、functions.phpに記述したロケーション名が出ているはずなので、先ほど名前をつけたメニューを選択します。
最後に「変更を保存」ボタンを押します。

3、header.phpにメニューを出力させる

最後に、今作ったメニューをheader.phpのメニューを表示したい場所(nav要素の中など)に以下のとおり記述します。

<nav>
 <?php wp_nav_menu( array(
  'theme_location'=>'mainmenu', 
  'container'     =>'', 
  'menu_class'    =>'',
  'items_wrap'    =>'<ul id="main-nav">%3$s</ul>'));
 ?>
</nav>

‘theme_location’には、functions.phpに記述したロケーション名を書きます。
‘items_wrap’では、デフォルトでdivタグで囲まれてしまうところを、ulタグに変更しています。
こうすると、nav要素の中に、ul要素、そしてli要素で各メニューが囲まれることになります。

最後にCSSを調整すれば完成です。

ちなみに、カスタムメニューのli要素にクラス名をつけたい場合は、
「管理画面 > 外観 > メニュー」の右上にある「表示オプション」から、「CSSクラス」にチェックを入れると、

「メニュー構造」の各項目の右側にある矢印をクリックして開いた中に、「CSS class (オプション)」という入力欄が表示されます。ここにクラス名を入れることができます。

【参考サイト】
「カスタムメニューを設置する – WordPressテーマの作り方」

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください