ヘッダーとフッターのメニュー表示を分ける

ヘッダーとフッターのメニュー表示分け記事のアイキャッチ画像 ブログ運営

サイトのメニューを増やしていく過程で、「これとこれはヘッダーにもフッターにも表示したいけど、これはフッターメニューにだけ表示させたいなあ」と思うことがあったので、メニューを分けることにしました。

具体的には、お問い合わせページとプロフィールページのリンクはヘッダーとフッター両方に表示させて、プライバシーポリシーページはフッターにのみ表示させるようにしています。

テーマごとに手順が変わるのかは検証していないので何とも言えませんが、Cocoonを使っている人間が行った設定手順なので、テーマごとに細部が変わるかもしれません。予めご了承ください。

ヘッダーメニューの編集

まずはヘッダーメニューを編集していきます。WordPress管理画面左側メニューから、「外観」→「メニュー」をクリックします。

WordPress外観設定からメニュー編集画面への画像

今回、私は以前作成した「メインメニュー」をヘッダーメニューに編集しています。「メインメニュー」作成の過程は以下の記事の「メニューを作成し、お問い合わせページを追加」の章で触れていますので、メニューの作成から確認したい方はこちらをご覧ください。

現段階では、「メニュー構造」はヘッダーとフッターの区別なく表示されるようになっているので、

以下の画像のように編集し、ヘッダー専用の設定にします。編集が終わったら忘れずに「メニューを保存」ボタンを押しましょう。

「モバイルスライドインメニュー」はハンバーガーメニューのことです。

スマホでWebサイトを覗いた時に「三」みたいなアイコンを押したらメニューがスライド表示されるという経験をした方は多いと思いますが、ここにチェックを入れたらそのスライドメニューの中に項目を表示させることができます。

ヘッダーとフッターのどちらでもチェックを入れてしまうとメニュー表示が重複してしまう場合があるので、通常はどちらか一方のメニュー設定でのみチェックを入れます。

私の場合、スマホのスライドメニューではプライバシーポリシーページも表示させたいので、フッターメニューの方でチェックを入れました。

フッターメニューの作成

続いて、メニューの設定画面の上部の「新しいメニューを作成しましょう。」という青文字をクリックします。

すると新しくメニューを作成できる画面になるので、フッターメニュー専用に設定して「メニューを作成」ボタンを押します。

メニューの作成ができたらメニュー項目を追加できるようになるので、フッターに表示させたいメニューを選択して「メニューに追加」ボタンを押します。

最後に、メニュー構造の中に表示させたいメニュー項目があるのを確認して、「メニューを保存」ボタンを押します。

メニュー編集完了

これで、ヘッダーメニューとフッターメニューを分けて表示できるようになりました。

なお、後からそれぞれのメニュー構造を編集したい場合は、メニュー設定画面の上部にある「編集するメニューを選択」のプルダウンメニューで対象のメニュー名を選び、「選択」ボタンを押すと編集ができます。

コメント

タイトルとURLをコピーしました