WordPressのヘッダーとフッターのメニューを設定しよう〜実践編〜

ヘッダー・フッターとは

Webページには、ヘッダーとフッターと呼ばれる部分があります。

ヘッダー

ヘッダーは通常、サイトの最上部に表示されます。

ヘッダーの構成要素

多くの場合、ヘッダーは

の２つから構成されます。

サイトロゴの設定方法はテーマごとに設定が異なりますが、メニュー部分の設定はテーマに関係なく行うことができます。

参考 「Cocoon」をテーマに使用している際のロゴ設定は、こちらの記事をご覧ください。

また、使用するテーマによっては背景を色付けしたり、画像を挿入したりすることもできます。

ヘッダーメニューの項目

ヘッダーはどのページを読み込んでも真っ先に表示される部分なので、サイトを案内するための項目がメニューに設定されることが多いです。

ただし、これはあくまで例なのでこれ以外にも好きな項目を自由に設置することができます。

また、プライバシーポリシー（個人情報保護方針）は誰もが見たいページというよりは気になる人が見るページなので、わざわざサイトの最上部に表示するのではなく、次に紹介するフッターに設定することも多いです。

フッター

フッターは通常、サイトの最下部に表示されます。

フッターの構成要素

多くの場合、フッターは

の２つから構成されます。

クレジット表記というのは

のような記述のことで、「このサイトの著作権は私にあります」という意味を表します。

このクレジット表記に関してはテーマごとの設定になりますが、多くの場合は最初から表記されているので心配する必要はあまりないと思われます。

フッターメニューの項目

フッターはページの１番下までスクロールしなければ表示されない部分なので、

がメニューに設定されることが多いです。

具体的には、次のような項目が設置されることが多いです。

もちろんヘッダーと同様に、これはあくまで一例で、フッターにも好きな項目を設置することができます。

ヘッダーメニュー・フッターメニューの設定

それでは、実際に設定する流れを見ていきましょう。

ヘッダーメニューもフッターメニューも流れは同じです。

メニュー設定画面を開く

まずはWordPressにログインをし、管理画面左の「外観」から「メニュー」をクリックします。

メニューの設定画面が開きます。

初めてこのページを開いた時点ではメニューが１つもないため、まずは１つ作成しましょう。

メニューを作成

「メニュー名」はわかりやすいように、「ヘッダーメニュー」や「フッターメニュー」などとしましょう。

名前を入力したら「メニューを作成」をクリックすればメニューが作成されます。

メニュー項目を追加

メニューが作成できたら、このメニューに含めたい項目を選んでいきます。

最初の状態では、選べる項目は画面左の「メニュー項目を追加」の部分にある

の４つとなっています。

参考 固定ページって何？という方は、こちらの記事をご覧ください。

「投稿」は普通の記事で、「カテゴリー」は名前の通り記事のカテゴリーページです。

「カスタムリンク」というのは簡単に言えば「それ以外」です。「投稿」や「カテゴリー」では設定できない

など、任意の URL のページにジャンプするリンクを設置できます。

その他の項目

実は上の４つ以外にも隠された項目があります。

画面右上の「表示オプション」という部分をクリックすると、次のような隠しメニューが現れます。

この「画面上の要素」という場所から

の２つを追加できるように設定することができます。

もちろん「タグ」は記事のタグページのことで、「フォーマット」というのはいわゆる投稿フォーマットと呼ばれているものです。

もしこれらの項目もメニューに追加できるようにしたい場合は、チェック欄をクリックすればOKです。

追加したいメニュー項目を選択

項目欄の中から追加したいページを選びましょう。

「メニューに追加」をクリックすると、先ほど作成したメニューに新しい項目が追加されます。

項目の追加設定オプション

項目を追加したら、項目右側の三角矢印「」をクリックして追加設定オプションを開きましょう。

ナビゲーションラベル

ナビゲーションラベルは、実際のメニューに表示される名前です。

初期状態の時点でページのタイトル名になっているはずなので変更する必要はないと思いますが、あまりにも長すぎる場合など、違った名前を使いたい場合はここで編集しましょう。

その他の項目

先ほどと同様に、画面右上の「表示オプション」から隠しオプションを表示できます。

全部にクリックを入れると、以下のようになります。

１つずつ見ていきましょう。

タイトル属性

タイトル属性は、メニュー項目にマウスカーソルを当てたときに表示される文章です。

試しに次の「ナビゲーションラベル」という部分にマウスカーソルを当ててみましょう。

使用するブラウザーによって反応は異なりますが、例えばGoogle Chromeの場合、ツールチップと呼ばれる次のような小さいテキストが浮かび上がります。

ツールチップがあると、ユーザーが実際にクリックして新しいページを開く前に、どんなページに繋がっているかを伝えることができます。

リンク先を新しいタブで開く：リンクターゲット

これは名前の通りですね。メニューからページ移動をしたい場合はたいていそのページから離れたい場合でしょう。

CSS class (オプション)：CSS クラス

こちらはCSSという言語でコードを書ける人向けの設定です。

自分とリンク先の関係/間柄 (XFN)

自分とリンク先の関係/間柄 (XFN)というのは、XFNという仕組みを使ってリンク先のページ作成者との関係（「友人」や「恋人」）を示しブログ同士のSNSを作るための設定だったのですが、現在は使用されていないため空欄のままにしておきましょう。

説明

説明は、メニュー項目の説明文です。

テーマによって表示するかしないか、表示するとしたらどこに表示するかといった設定は異なりますが、多くの場合以下の画像のようにナビゲーションラベルの近くに表示されます。

しっかりした文章を書くのではなく、項目の英訳名を入れるとおしゃれな感じが出ますね。

移動

移動は、複数の項目がメニュー内に存在するときのみ表示されます。

メニューに複数の項目が存在する場合、基本的に

ように表示されます。

そのため、表示の順番を変えたい場合はこの「移動」を使って調節しましょう。

メニューの階層化

また、このとき何かの項目の下にある項目には「〜 下の階層」という選択肢が現れます。

ここをクリックすると、項目が少し右にずれた形になり、

マウスカーソルを当てると展開する階層化されたメニューを作ることができます。

メニュー設定

ここまでの段階で、メニューの項目に関する設定はすべて終わりました。最後はメニュー自体の設定です。

固定ページを自動追加

固定ページは自分で設定しなければどこにも表示されず、基本的にはヘッダーやフッターのメニューに表示することになると思います。

「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れると、固定ページを作成したら自動的にメニューに追加してくれるようになります。

メニューの位置

メニューの位置は、使用するテーマによって数や名前が異なりますが、多くの場合「ヘッダー」や「フッター」という名前の項目があると思います。

設置したい場所にチェックを入れて、最後に「メニューを保存」をクリックしましょう。

メニューの確認

実際にメニューが設定されたかを確認するために、どこでもいいのでサイトのページ（例えばホームページ）を開きましょう。

位置の管理

ここまでで基本的な操作はすべて終了ですが、使用しているテーマで他にどのようなメニューを設定できるのかを知りたい場合は、「位置を管理」から確認することができます。

「指定されたメニュー」の欄が「－メニューを選択－」になっている場合はそのメニューにまだ何も設定されていないということなので、何か設置したい項目がないかを考えてみましょう。