ワードプレス・プラグイン情報 構築

WordPress ヘッダーメニューを作成する方法

2019年3月17日

WordPress ヘッダーメニューを作成する方法

WordPressで構築したWEBサイト上部にあるヘッダーメニューは、閲覧者がどのページを見たいか、あるいはサイトオーナーから見ればどのページを訪問してほしいかを伝える・ナビゲーションする大変重要なパーツです。WordPressではとても簡単にメニューを作成・編集することができますので、このページで解説します。

メニューとは?

ホームページ上部に表示されるナビゲーションを「ヘッダーメニュー」と言い、サイト下部は「フッターメニュー」です。

WordPressでは自動的に作成されませんので、サイト制作者・管理者はヘッダーメニューを手動で作る必要があります。

レンタルサーバー WordPressでメニュー作成1

レンタルサーバー WordPressでメニュー作成2

メニューはサイトナビゲーションのほか、最近ではどのページを軸にして内部リンクを設定するか、どのページにリンクを集中させるかなど「トピック&クラスター」の考え方を実践するツールとしても重要視されています。
解説です

ヘッダーメニューの制作手順

まずは、WordPress管理画面にログインし管理画面メニューから→「外観」→「メニュー」を選択し、クリック・タップしてメニュー画面を開きます。

レンタルサーバー WordPressでメニュー作成3

メニュー編集画面が表示されました。
なおこの例では、すでにヘッダーメニューを作成していますので、画面中央の「メニュー構造」には、ヘッダーメニューで表示されているページ名が縦に並んでいます。新規の場合は、このページ名は表示されません。

レンタルサーバー WordPressでメニュー作成4

新規ページをメニューに挿入・追加する場合

それでは新規にヘッダーメニューを作成する想定で解説します。

画面左側は、すでにあるページタイトル(既存ページ)が表示されています。
画面右側は、ヘッダーメニューに挿入するページが表示されます。

ヘッダーメニューに挿入・追加したいページ名にチェックを入れて「メニューに追加」ボタンをクリックします。この例では「ブログトップ」をヘッダーメニューに追加したいのでチェックを入れています。

レンタルサーバー WordPressでメニュー作成8

画面左側の既存ページ表示画面で、直近に作成したページのみをヘッダーメニューに追加したいときは「最近」タブ、メニューに追加したい既存ページが見当たらないときは「すべて表示」タブをクリックして、ページを見つけてチェックを入れましょう。

レンタルサーバー WordPressでメニュー作成9

「ブログトップ」ページが右側の「メニュー構造」に追加されましたので、次にヘッダーメニュー内の表示させたい位置にドラッグ&ドロップして配置してください。
その後、「メニューを保存」をクリックすれば作業は完了です。

レンタルサーバー WordPressでメニュー作成10

なお、サイト下部のフッターメニューも同様の作業で新規ページ追加ができます。

すでにメニューを設定している場合

ヘッダーメニューをすでに作っている場合は、WordPress管理画面ログイン後、管理画面メニューから→「外観」→「メニュー」を選択しメニュー画面を開きます。

メニューを編集」画面の「編集するメニューを選択」から、作成済みのヘッダーメニュー名を選び「選択」をクリックします。
これでヘッダーメニュー内に配置しているすべてのページ名が表示されます。

レンタルサーバー WordPressでメニュー作成5

ドラッグ&ドロップで、ページ名の位置を変更して好きなポジションに移動させてください。

なお、親メニューの下に子メニューとして表示させたい場合は、ページ名の左にスペースを空けて、右に少しずらして配置すれば子メニューとして表示することができます。

レンタルサーバー WordPressでメニュー作成6

レンタルサーバー WordPressでメニュー作成7

子メニューが何階層まで表示されるか、あるいはどのように見えるか、などは利用しているワードプレステンプレートによって違いますので、実際にプレビューで検証・確認しながら作業を進めてください。
もっと詳しく

あわせて読みたい

当サイトで解説しているWordPressが使えるレンタルサーバーを比較しています。

こちらもCHECK

レンタルサーバー 比較表・早見表(全共用サーバー・価格スペック別)
レンタルサーバー 比較表・早見表(主要共用サーバー・価格スペック別)

レンタルサーバー(共用)は数が多くてどれがいいのか分かりにくい!という方に、どのレンタルサーバーが自分や自社に適しているか、価格やディスク容量などスペックの違いで比較できるページです。 各レンタルサー ...

続きを見る

まとめ

ヘッダーメニューの作成方法について解説いたしました。
どのページを見てもらいたいかという視点に加えて、ユーザーの見やすさスマートフォンでこのメニューがどう表示されるかも細かくチェックしておく必要があります。
ヘッダーメニューで、サイトの回遊率・滞在率を上げSEOを意識しながらも、ユーザーにサイトを楽しんでもらえる仕掛けを作ってください。

記事作成者プロフィール

佃 直毅
佃 直毅ITサポート/コンテンツプロデュース
株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
おすすめ情報サイト「マイベスト」レンタルサーバー・ドメイン監修

当サイトでは、ホスティングビジネスの経験を踏まえ、ユーザー視点でレンタルサーバーやドメイン販売サービス・WordPressテンプレートの評価をし、これから始めたい・切り替えたい方の立場に立った記事・比較情報をお届けします。

【仕事略歴】早稲田大商卒。東証一部精密機器メーカー、レコード会社を経て独立後、2001年に動画配信(ストリーミングサーバー)レンタルサービス「ストレン」を立ち上げ、マイクロソフト認定パートナーとしてサーバー構築・運用からPRまで全般に携わる。2015年、東証グロース上場企業・お客様と合意のもと、上場企業サービスへ移行していただき同ビジネス終了、以降はITサポート・コンサルティングとして企業の支援に。

【趣味】プロ野球/MLBなどスポーツ、映画・音楽好き(主に洋楽)