解 説

カスタムメニュー作成手順

カスタムメニューを使用するためにはfunctions.phpにカスタムメニュー表示の関数を記述します。
そうするとWordPressのダッシュボードの外観メニューに「メニュー」の項目ができます。

  1. functions.phpにカスタムメニューの関数を記述
  2. WoedPressのダッシュボードの外観メニューに「メニュー」の項目ができる。
  3. メニューの設定を行う
  4. CSSの再編集

functions.phpの記述

functions.phpの記述例

register_nav_menus()とはWordPress関数のひとつです。
これでカスタムメニュー機能を有効にして連想配列でメニューの名前(インデックス)と説明(値)を指定します。

header.php側の記述

wp_nav_menu() を使用してテンプレートにナビを呼び出します。
header.php側の記述例

navタグで囲んでid=”global-nav”にします。

navメニューにidやclassを付けたくない場合には以下をfunctions.phpに付け加えます。

ダッシュボードの外観メニュー

  • 「global」などの名前をつけて「新規メニュー作成」ボタンをクリック
  • 左側メニューの「固定ページ」欄の「すべて表示」をクリックして全てを表示する。
  • メニューにしたい項目にチェックをつけて「メニューに追加」ボタンをクリックするとメニューが出来上がる。
  • テーマの位置を決めて「メニューを保存」ボタンをクリック

navmenu1

設定が終了したらプレビューして確認します。
グローバールナビにCSSが効いていないことがわかります。
ブラウザからソースを確認してWordPressが吐き出したタグとclass名を確認してCSSの設定を変更して終了です。

グローバルナビにimgタグを使用

functions.phpの記述

navmenu2

navmenu3

グローバルナビにimgタグを使用時imgアドレスの取得するには、以下の手順で行います。

  • ダッシュボードからメニューの編集
  • メニュー構造の中でナビゲーションラベルに[[画像のURL]]を記述する [[]]を忘れない事!
  • 画像のURLはメディアで画像をアップロード後にメディアを編集から取得する