WordPressでカスタムメニューを利用する

WordPressのカスタムメニュー機能を利用すると、メニュー項目を管理画面から登録・編集できて大変便利です。登録できる項目は、固定ページ、カテゴリー、カスタム分類、タグ、投稿などWordPressで作成したページだけでなく、任意のURLを指定したリンクも登録できます。

【コンテンツ】

  1. カスタムメニューを定義する
  2. 管理画面から新規メニューを作成する
  3. メニューを編集する
  4. メニューを表示する

【記事執筆時の環境】
WordPress 3.8.1

カスタムメニューを定義する

使用するテーマのfunctions.phpに、register_nav_menus()を使ってメニューを定義します。
ここでは、グルーバルメニュー、ローカルメニュー、フッターメニューの3つを定義して
みます。

functions.phpにカスタムメニューを定義すると、管理画面の外観メニューに、「メニュー」という項目が現れます。

管理画面に「メニュー」の表示

管理画面から新規メニューを作成する

管理画面で、[外観]-[メニュー]をクリックします。

メニューの作成

作成するメニューの名前を入力し、[メニューを作成]ボタンをクリックします。

メニュー作成画面

テーマの位置の設定

「テーマの位置」のところに、functions.phpで定義したメニューの名前が表示されていますので、いずれかにチェックを入れます。

テーマの位置の設定画面

メニュー項目の追加

メニュー項目を追加するには、追加する項目を選択してから、[メニューに追加]ボタンをクリックします。

メニュー項目の追加画面

追加したい項目が表示されていない場合は、[表示オプション]をクリックして、[表示する項目]にチェックを入れてください。

表示オプションで表示する項目にチェック

メニュー項目を追加したら、[メニューを保存]ボタンをクリックします。

メニュー保存画面

同様に他のメニューも作成します。

メニューを編集する

メニューを編集するには、編集するメニューをドロップダウンリストの中から選択してから、[選択]ボタンをクリックします。

編集するメニューを選択

メニューを表示する

HTML文書中で、メニューを表示したい場所に以下のように記述します。

パラメーターとしては、'theme_location'で、functions.phpに定義したメニュー名を指定します。

メニュー項目はulタグとliタグによって囲まれますが、デフォルトではその外側をdivタグで囲みます。
記述例では、「'container' => 'false'」とすることで、divタグの囲いをなくしています。

その他、CSS設定のためにクラス名やID名の指定もできますが、
詳しくは、WordPress Codexを参照してください。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ