初級者~中級者向け

【基本】WordPressのメニューとウィジェットの関係がわからない

文中の説明画像をクリックすると拡大します。

LINEで送る
Pocket

この記事は約8分で読めます。

WordPressのメニューとウィジェットの関係ってどうなってるの?

WordPressには、カスタムメニュー(以後、ただのメニューと言います)とウィジェットという、2つの機能があります。

メニューはWebサイトの各所にあるメニューを作るための機能であり、ウィジェットはWebサイトを構築している、ちょっとした部品を提供する機能です。

なおウィジェットについては以下の記事にて紹介しています。

【基本】WordPressのウィジェットって何?

メニュー機能の実体は、階層構造を持ったリンクリストです。

WordPressで管理している「固定ページ」「投稿」「カスタムリンク(外部サイト)」「カテゴリー」などの各ページを選択して、一連のメニューとして表示させる機能が、WordPressのメニューという機能です。

メニューは階層構造を持ったリンクリストと先ほど説明しましたが、それだけだったら別にメニューの機能を使わなくても、テンプレートファイルに直接HTMLを記述してメニューを表示させることもできます。

しかし、それにはHTMLやWordPressのテンプレートファイルをカスタマイズするための知識が必要になります。

オリジナルテーマを開発したのではなく、誰かが開発したネット上で公開されている既存のテーマをカスタマイズして使ってる人にとっては、WordPressのメニューの機能はとても使い勝手の良い機能と言えるでしょう。

メニューとウィジェットは、管理画面上で設定することで使えるようになる機能ですが、ちょっとした関係を持たせることができます。それは作成したメニューをウィジェットの一つの要素として表示させる機能です。

WordPressには、「メニューを表示させるタグ」と「ウィジェットを表示させる関数」の2つがあり、それぞれは独立して動作します。先ほど紹介した、メニューをウィジェットの要素として表示させるのは「ウィジェットを表示させる関数」を使います。

メニューをメニューとして表示させることもできるし、メニューをウィジェットの部品の一つとして表示させることもできる。このような事情により、メニューとウィジェットの関係は少しややこしくなっています。

この記事では、WordPressのデフォルトのテーマである「Twenty Sixteen」を使ってWordPressのメニューの作り方からウィジェットへの登録方法までを紹介します。

メニューやウィジェットの使い方は他のテーマでも同様なので、他のテーマをお使いの方も安心してこの先へお進みください。

WordPressのメニューの作り方

WordPressのメニュー機能が使えるかどうかは、使用しているテーマによって異なります。この記事で取り上げている「Twenty Sixteen」は、デフォルトでメニュー機能が使用できます。

さらに、作成できるメニューの数もテーマによって異なります。ここで言う「メニューの数」というのは「メニューの項目数」ではなく、「メニューを一つの塊」としたときのメニューの数です。

一つのメニューに設定できる「メニューの項目数」には基本的に上限がありません。

それでは、WordPressの管理画面から実際にメニューを作っていきましょう。

WordPressの管理画面「外観」からメニューを選択します。

ここでは、メニュー名に「global-nav」と名前を付けて「メニューを作成」ボタンをクリックします(メニュー名はなんでもOKですが、自分が後からわかりやすいものにしましょう)。

メニューが作成できたら、メニューに表示させる項目の設定をします。つまり、メニューに入れるページのことです。

ここでは、固定ページ「サンプルページ」をメニューの項目として追加します。画像のように「サンプルページ」のチェックボックスにチェックを入れて「メニューに追加」ボタンをクリックします。

そうすると「メニューの設定」のところに「メインメニュー」「ソーシャルリンクメニュー」の2つの位置を設定できるチェックボックスが表示されます。

※「メインメニュー」「ソーシャルリンクメニュー」の2つは、使用しているテーマが「Twenty Sixteen」の時に表示されるものです。使っているテーマによっては、「メニューの位置」の項目数や名前が違っている可能性がありますので、ご注意ください。

ここまで出来たら、メニューは完成です。実際にWebサイトのトップページを見ると、メインメニューが表示されていることがわかります。

ところで、さきほど設定したメニューですが、なぜヘッダーの右側に表示されたのでしょうか?

実は、WordPressがサポートしているメニュー機能は、テーマによって表示させる箇所が決められています。

そのため、自分の好きな箇所に自由にメニューを表示させるということが、簡単な操作範囲ではできません。

もし自分の好きな箇所に自由にメニューを表示させたければ、テンプレートファイルを直接編集する必要があります。

しかし、公式のテーマなどインターネット上で公開されているテーマはメニューが必要そうな箇所には、あらかじめメニューを表示できるようになっているので、わざわざテンプレートファイルを自分で修正して、新規にメニューの表示位置を追加する必要性は、少ないかもしれません。

テンプレートファイルを編集するさいには注意が必要です。以下のページをご覧ください。

【危険】WordPressテーマ編集はテキストエディタで行なうこと!

ウィジェットにメニューを表示させる方法

メニューをメニューとして表示させる方法を紹介しましたが、作成したメニューをWordPressのウィジェットとして表示させることもできます。

ウィジェットの機能を使って、メニューを表示させる方法を紹介します。

WordPressの「外観」から「ウィジェット」の設定画面を開きましょう。

「利用できるウィジェット」の中に「ナビゲーションメニュー」というウィジェットがあるで、それをサイドバーにドラッグします。

ナビゲーションメニューの設定を行います。「タイトル」には自分の好きな文言を入力し、「メニューを選択」では先ほど作成した「global-nav」を設定します。

設定が完了したら「保存」ボタンをクリックしましょう。

そうすると、作成した「グローバルメニュー」がWebサイトのサイドバーに追加されていることがわかります。

ウィジェットにメニューを表示させる手順は、以上です。

メニュー機能のソースコードを確認する

ここからは少し難易度が上がりますが、Twenty Sixteenのテンプレートファイルを見て、メニュー機能がどのようなソースコードで実装されているのか見ていきましょう(解説に使うTwenty Sixteenのバージョンは1.5です)。

テンプレートファイルの中身の確認は、WordPressの管理画面「外観」から「テーマの編集」でできますが、前述の通り、ファイルをダウンロードしてからテキストエディタで編集することをお勧めします

ここでは、説明しやすいという理由から「テーマの編集」画面で説明します。

「テーマの編集」ではテンプレートファイルのソースコードを見ることができます。

最初にfunctions.phpを確認します。

functions.phpの87行目から90行目にかけて、「register_nav_menus」という関数によって「Primary Menu」と「Social Links Menu」の2つのメニューが定義されています。

これは、先ほど管理画面で確認した「メインメニュー」と「ソーシャルリンクメニュー」の2つのメニューに相当します。

次にheader.phpを見てみます。

53行目からスタートする「wp_nav_menu」というテンプレートタグによって、メインメニューが表示されます。

パラメータに「'theme_location' => 'primary'」を設定することで、このメニューがメインメニューであることを表しています。

少し下に移動して、64行目から再度「wp_nav_menu」タグが記述されています。今度はパラメータに「'theme_location' => 'social'」が設定されています。

このことから、ここではソーシャルリンクメニューが表示されることがわかります。

WordPressのメニュー機能は、このようなソースコードで実装されています。

整理すると、functions.phpに「register_nav_menus」を書いてメニューを定義して、メニューを表示させたい位置に「wp_nav_menu」タグを記述します。

そして、実際にメニューに表示させる項目は、WordPressの管理画面で設定します。

これでWebサイトにメニューを表示させることができるのです。

メニュー(ナビゲーション)の作り方は、こちらもご覧ください。

【基本】WordPressのメニュー(ナビゲーション)の作り方教えて!

 

まとめ

  • WordPressには、カスタムメニュー(メニュー)とウィジェットという機能がある。
  • ウィジェットに、メニューを表示させることができる。
  • Webサイトで使えるメニューやウィジェットは、テーマによって異なる。
LINEで送る
Pocket