この記事では、WordPressのメニューについてご説明しています。
画面上部のメニューバーだけでなく、サイドバーやフッターなどでも複数パターンで好きなようにメニューを設置できるように学んでいきましょう。
もくじ
メニューとは
WordPressのメニューとはWEBサイトのヘッダー下などでよく見かける、サイト内のメニュー項目などを横並びにしたものです。
この部分のメニューは正式には「グローバルナビゲーションメニュー」と呼ばれています。
「グローバルナビ」だったり、「ナビゲーションメニュー」など略されることもありますが、この部分のことだということを覚えておきましょう。
しかし、WordPressのメニューという機能はこの部分にだけ設置できるものではありません。
自分の好みのメニューパターンを複数作っておき、配置したい場所に合わせてメニューの内容を変えるということができます。
今回は「グローバルナビゲーションメニュー」や「サイドバー」「フッター」など、複数のパターンで実際にメニューを作っていきますので、しっかりと身につけていきましょう
メニューの作り方
まずは、設置イメージを決めていきます。
現在WEBサイト上にはメニューが存在していません。
最初にヘッダー下のグローバルナビゲーションメニューをこのように作成して、WEBサイト上に配置してみたいと思います。
WordPress管理画面の左メニューから「外観」にマウスを乗せて「メニュー」をクリック。
すると、メニューを管理するための画面が表示されます。
この画面では自分の好みに合わせて複数のパターンでメニューを作ることができます。
初めて表示するなどまだメニューが一つも存在していない場合は、このように、新規メニュー作成画面が表示されます。
まずは、メニューに名前を付けましょう。
この名前はWEBサイト上に表示されるものではなく、複数のパターンを作った際にどのメニューなのかわかりやすくするための管理用の名前となります。
そのため、任意ですが、「ヘッダーメニュー」や「フッターメニュー」などどこに配置しているメニューなのか一目でわかるように付けると良いです。
今回はメニュー名に「ヘッダーメニュー」と入力しました。
入力ができたら画面右下の「メニューを作成」をクリックします。
次の画面では、作成したメニューにどんな項目を入れるかの設定をしていきます。
画面左側が、メニューの項目として入れられる要素です。
左側から選択した要素が、画面右側に並ぶようになっています。
メニューの要素として入れられる項目にはすでに作成してある「固定ページ」や「カテゴリ―」、「カスタムリンク」などが有ります。
また、特定のプラグインを使っていると、そのプラグイン専用のメニュー項目が表示される場合もあります。
「お問い合わせ」のページや「プライバシーポリシー」のページなどを、事前に固定ページで作成して、メニューに配置したり、特定のカテゴリー一覧ページへの誘導として、カテゴリーをメニューに置いたりして使います。
お問い合わせの機能はWordPressに標準搭載されていないので、機能を追加したい場合は別の動画やWEBサイトの記事を参考にしてみてください。
また、カスタムリンクでは、任意の文字列とURLを指定して、メニューにおける自由度の高いリンクボタンを設置することが可能です。
それでは、実際にヘッダー用のメニューを作成していきます。
画面左から設置したい要素を選択しましょう。
固定ページと書かれている部分をクリックすると、中身を展開したり閉じたりすることができます。
中身も「最近」「すべて表示」「検索」とタブが並んでいるので入れたい要素が見つからない場合は切り替えてみましょう。
固定ページから「お問い合わせ」と「プライバシーポリシー」を追加してみます。
それぞれにチェックを入れたら、下にある「メニューに追加」ボタンをクリックします。
すると、画面右側にそれぞれが追加されたのがわかります。
この状態で画面右下の「メニューを保存」をクリックすると状態を保存することができます。
しかし、現段階では、メニュー構成のパターンを１つ作成しただけなので、このメニューはWEBサイト上の
どこにも表示されません。
実際にWEBサイトを見てみるとこのように、変化がないことがわかります。
改めてWordPressの管理画面に戻ります。
先ほど作成したメニューの画面下側に、複数のチェック項目が並んでいます。
この項目はテーマごとに違う場合がありますので、使い方などはそれぞれのテーマガイドをご覧ください。
ここではWordPressテーマCocoonを参考にご説明していますが、基本的にはどのテーマでも根本的な操作や考え方は一緒です。
チェック項目の中に、「ヘッダーメニュー」というものがあるのでここにチェックを付けて、改めてメニューを保存します。
再びWEBサイトを表示して、ページを更新してみます。
すると、このように、画面上部のヘッダー下に作成したメニューが表示されるようになったのがわかると思います。
改めてWordPress管理画面に戻ります。
並べたメニューの項目は、直感的な操作ができるようになっていて、項目を直接ドラッグすると、順番を入れ替えることも可能です。
試しに、順番を入れ替えてメニューを保存し、WEBサイトの表示を見てみましょう。
すると、メニュー項目の順番が入れ替わりました。
またWordPress管理画面に戻ります。
設置したメニューの項目は、階層構造を持つことも可能となっています。
先ほどはドラッグで順番を変更しましたが、今度は左右に少しずらしてみましょう。
背景の点線が少しずれるのがわかると思います。
この、少し右にずれた状態でマウスを離すと、メニュー項目もずれて設置されます。
これは「お問い合わせ」が親「プライバシーポリシー」が子という親子の状態を作れたことになります。
改めてメニューを保存し、WEBサイト上の表示を見てみましょう。
すると、見た目上は親である「お問い合わせ」しか見えません。
しかし、マウスを乗せると、子に当たる「プライバシーポリシー」が表示されます。
実際にお問い合わせの中にプライバシーポリシーを入れることはないと思います。
この階層はカテゴリーで親子関係を作っている場合などに役立ちます。
それでは今度は、管理画面に戻ってカテゴリーを入れていきます。
先ほどずらして階層にした固定ページも改めてドラッグすれば元に戻すことができます。
画面左側から「カテゴリー」をクリックして中身を表示させます。
「すべて表示」に切り替えて中身をすべて表示します。
私のサイトでは、事前にカテゴリーに親子関係を持たせています。
親となる「WordPress」カテゴリーには「インストール」や「テーマ」、「プラグイン」などの子供となる「カテゴリー」が存在しているという状態です。
メニューに入れたいものにチェックを入れて「メニューに追加」をクリックします。
すると、選択したものがすべて右側に追加されましたが、このままでは、階層の関係になっていないので、
メニューにすべて並んでしまいます。
先ほどのように、メニュー内でも親子関係を持たせるようにするには、ドラッグで子供に当たる要素をずらしていきましょう。
それでは、メニューを保存して、実際のWEBサイトを見てみます。
このように、親に当たるカテゴリーだけ見せておき、子供に当たるカテゴリーは必要に応じて表示するということができます。
それでは改めて管理画面に戻ります。
今度は、カスタムリンクを見ていきます。
カスタムリンクは、自由にURLを指定してリンクボタンを作成することできます。
今回はサイトのトップページに戻るためのボタンを設置してみます。
お使いのWordPressの環境によっては、固定ページに「ホーム」というものがあるので、そちらをメニューに含めることができますが、もしない場合は、このように「カスタムリンク」を利用してホームボタンを設置しましょう。
管理画面左上のご自身のサイト名がWEBサイトトップページのリンクとなっているので、右クリックしてリンクをコピーします。
カスタムリンクの「URL」に貼り付けて、「リンクの文字列」には「ホーム」などとつけておきましょう。
そして、「メニューに追加」をクリックして右側に追加します。
順番は好きなように入れ替えてください。
変更を加えたら必ず「メニューを保存」で内容を保存します。
改めてWEBサイトを見てみると配置したとおりにメニューが表示されていることがわかります。
管理画面に戻り、もう少し詳しくメニュー項目の操作を見ていきます。
画面右側に配置したそれぞれの項目の三角形のマークをクリックします。
例えば「ホーム」でクリックすると、カスタムリンクの内容を編集することができます。
ここではURLや表示する名称を変更することが可能です。
固定ページではWEBサイト上で表示する名称のみ変更が可能です。
また、この編集項目は状況に応じて追加や非表示にすることができます。
例えばカスタマイズで何かを調べている際に「自分のWordPress管理画面では特定の編集項目が表示されない」という場合はこの画面の上部にある「表示オプション」をクリックします。
すると、画面上部にチェック項目が複数表示されます。
要するにここにチェックが付いているものだけが画面上に現れるようになっているので、有るはずのものがない場合や不要なものがある場合は、ここのチェックで管理しましょう。
試しに下段のチェックをすべて入れた状態で「カスタムリンク」を見てみます。
すると、先ほどまで表示されていなかった項目が追加されています。
現段階ですべての項目を知っておく必要はありません。
しかし、この操作で表示を増やせるということだけはしっかりと覚えておきましょう。
メニューパターンを複数作る
次にメニューのパターンを複数作成して、WEBサイトの場所ごとにメニュー構成を変える方法を見ていきましょう。
たとえば、先ほど作成したヘッダー下のメニューには、「ホーム」と「お問い合わせ」や「プライバシーポリシー」の固定ページ以外にも、「カテゴリー」を表示させていました。
フッターでは、「ホーム」と「お問い合わせ」だけにしたい、という場合で見ていきましょう。
まずはメニューの管理画面上の方にある「新しいメニューを作成しましょう」というボタンをクリックします。
すると、最初に設定した時と同じ画面が表示されます。
ここに新たなメニューパターンを作っていきます。
「メニュー名」はフッターメニューとつけました。
画面右下の「メニューを作成」で新たなメニューを作成します。
まだメニュー内の項目は空っぽなので、先ほどと同様にして項目を入れ込んでいきます。
先に、「カスタムリンク」を利用して「ホーム」をメニューに追加。
次に、固定ページから「お問い合わせ」を追加。
この状態を保存するために画面右下の「メニューを保存」をクリックします。
これで2つ目のメニューが作成されました。
複数のメニューが画面上部の「編集するメニューを選択:」から選ぶことができます。
最初に作った「ヘッダーメニュー」を編集したい場合は、ここから選択して「選択」ボタンをクリックすると表示されます。
「フッターメニュー」に切り替えたい場合も同様です。
フッターメニューもただ作っただけなので、WEBサイト上ではどこにも表示されません。
そのためヘッダー同様画面下のチェック項目から、表示させる場所を指定します。
今回は「フッターメニュー」が選択できるので、ここにチェックして「メニューを保存」をクリックします。
WEBサイトを見てみると、画面一番下のフッターにメニューが表示されました。
改めて管理画面に戻りましょう。
複数のメニューを作成しましたが、どのメニューをWEBサイトのどこに配置するかという設定が一括で行えるので見てみましょう。
管理画面上部に「位置を管理」というタブがあるのでクリック。
設置できる場所はテーマによって異なりますが、先ほどまでの設定から「ヘッダーメニュー」という場所には、最初に作った「ヘッダーメニュー」が。
「フッターメニュー」には2つ目に作った「フッターメニュー」がそれぞれ配置されています。
ヘッダーでもフッターでも同じメニューにしたいなどの場合は、フッターのメニューも「ヘッダーメニュー」を
適用してしまえばいいということになります。
また、表示をしたくない場合は、選択肢から「メニューを選択」というものを設定しておけば、メニューが非表示となります。
先ほどのようにメニュー自体を管理したい場合は画面上部の「メニューを編集」タブに切り替えればまた同じように編集が可能となります。
ウィジェットでメニューを設置
メニュー管理画面の下にあるチェック項目から設置場所の指定をしてきましたが、場所の指定はここからだけではありません。
ここまで動画や記事を見てくださった方は、すでにウィジェットについて学習されていると思いますが、ウィジェットでもこのメニューの配置を指定することができます。
作成したメニューをサイドバーにも配置してみましょう。
それでは管理画面左メニュー「外観」にある「ウィジェット」をクリックします。
すると、ウィジェット管理画面が表示されます。
最新のウィジェット管理画面が表示されている方も基本的にやることは一緒ですので、同じ項目を探してみましょう。
ウィジェット自体の操作や説明は、別動画や別の記事をご覧ください。
ウィジェットの管理画面が表示されましたが、この画面もお使いのテーマによって、ウィジェットを配置できる場所が異なりますのでご注意ください。
画面左側が設置できる項目なので、ここから「ナビゲーションメニュー」を画面右のサイドバーに入れ込みます。
設置方法はドラッグでも、「ナビゲーションメニュー」の三角形マークをクリックして場所を指定でも大丈夫です。
右側の項目が多ければ多いほどドラッグは大変なのでその場合は選択肢から設置しましょう。
サイドバーに「ナビゲーションメニュー」が入り込んだら「タイトル」を任意で入力します。
ここではわかりやすく「メニュー」と入れます。
次に、メニュー画面で作成したどのパターンのメニューを設置するのか決めます。
例として「ヘッダーメニュー」を選択します。
「表示設定」はCocoon特有なので一旦飛ばします。
右下の「保存」ボタンで内容を保存し、実際のWEBサイトを見てみましょう。
すると、サイドバーにヘッダーと同じメニューが表示されました。
先ほどのタイトル欄を空白にすると、「メニュー」というタイトルが非表示になります。
先ほどはメニューの機能内でフッターにメニューを表示させました。
しかし、このウィジェット画面にもフッターへの設置枠が用意されています。
それでは先ほどのフッターメニューはそのままにして、こちらのウィジェットでもフッターにメニューを設置してみます。
わかりやすいように、フッター枠すべてに「フッターメニュー」を割り当ててみます。
実際にWEBサイトを見てみるとこのように表示されました。
メニュー時に設置したフッターメニューとは別に、それぞれのメニューが表示されているのがわかります。
このように、メニュー機能で設置する場合とウィジェットで設置する場合、さらにテーマごとに配置できる場所などが異なりますので、色々と試して納得いく場所を探してみましょう。
カスタマイザーからの操作
WordPressのカスタマイズは「カスタマイザー」と呼ばれるWEBサイトの状態を見ながら編集ができる専用の編集画面が存在します。
こちらからでも同じような操作ができるので、好きな方から設定を行ってください。
カスタマイザーを利用する場合は、WordPress管理画面左メニューにある「外観」項目内の「カスタマイズ」をクリックします。
すると、画面右側がWEBサイト、左側が設定項目という状態でサイトの編集を行うことができます。
お使いのテーマによって設定項目は大きく変わりますので、不明点などはお使いのテーマガイドをご覧ください。
先ほどのメニュー設定画面と同様に、ヘッダーメニューを作成してみます。
メニューの名称を決めて、中に配置する項目を決めて、どこに設置するか選択すればその通りに表示されます。
このように、WordPress管理画面では、同じ項目の編集でも各所でできる場合がありますが、基本的な構造さえ知っていれば慌てずに作業ができますので、基本を知っておきましょう。
ちなみにですが、カスタマイザーでは、画面左側に設定項目を表示する必要があり、その分サイトの横幅を狭く表示する必要があります。
テーマによってはそのせいで正しい表示とならない場合がありますので、正しいサイトの状態は、しっかりとWEBサイトのページを見て確認しましょう。
まとめ
お疲れ様でした。
今回はWordPressのメニューについてご説明しました。
基本的な構造さえ知っていれば難しいことはありませんね。
複数パターンのメニューが作れるので、表示したい場所に合わせて作ってみると良いでしょう。
また、カスタマイザーは必要に応じて使用してください。
その際に正確なWEBサイトの表示状態を見たい場合は、カスタマイザーで見るのではなく、 しっかりとWEBサイトを表示して確認をしましょう。
