ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

WordPressサイトのメインメニューの追加・設定の仕方

WordPressサイトのメインメニューの追加・設定の仕方

サイトをパソコンで表示した時にタイトルの下に表示されるメインメニューは、ナビゲーションの要とも言える重要なものです。メインメニューは、ヘッダーメニュー、メニューバー、グローバルナビゲーションとも呼ばれています。

メニューはナビゲーションの要

モバイル表示でのメニュー

モバイル画面では、最初に表示される画面の上段の目立つ(分かりやすい)位置にメニューボタンが表示されます。(下の画像では、画面右上です。テーマや設定によって、表示位置は変わります。)

備考:
メインメニューは、スマホ表示では通常、画面の上部に表示されます。メインメニューは、モバイルのナビゲーションとして、ユーザーエクスピリアンスに関わる重要な役割をもっています。ナビゲーションは、AdSense審査でも重視される項目の一つです。現在のAdSense二次審査は、スマホ用のページ単位の広告を使用して行われています。

モバイル画面のメニューボタン

メニューボタンを押すと、メニューアイテムが表示されます。メニューで表示されるアイテムは、サイト内の重要度の高いページで構成されるのが一般的です。

モバイル画面のメニュー表示

WordPressサイトのメインメニューの設定の仕方

管理画面(ダッシュボード)の左下に並んで表示されるメニュー内の[外観]を選び、表示されるサブメニューの中から[メニュー]を選びます。

以下の様なメニュー編集画面が表示されます。

メニューを構成する項目は、固定ページ、投稿、カスタムリンク、カテゴリーから追加できます。(上画面、赤枠で囲った箇所)

ここでは例として、以下の項目をメインメニューに追加します。

  • 固定ページ: ”ホーム”、”プロフィール”と”お問い合わせ”
  • カテゴリー: ”ブログ運営”と”ブログ収益”

メニューに固定ページを追加

メニュー項目の[固定ページ]タブをクリックして、追加する固定ページのチェックスボックスを選択します。

固定ページをメニューに追加する

固定ページが多いと、[最近]のタブではホームが表示されません。その場合は、[全て表示]のタブを開くと、ホームが表示されます。

[メニューに追加]ボタンを押すと、メニュー構造に固定ページが追加されます。

メニューに固定ページが追加されました。

単体の記事をメニューに追加したい場合は、固定ページと同じやり方でできます。

メニューにカスタムリンクを追加する場合

[カスタムリンク]タブをクリックして、URLとリンクの名前を入力します。

メニューにカテゴリーページを追加

[カテゴリー]タブをクリックすると、カテゴリーが表示されます。メニューに加えるカテゴリーにチェックを入れます。

カテゴリーページをメニューに追加する

加えたいカテゴリーが、[よく使うもの]内に表示されていない場合は、[全て表示]のタブをクリックします。

[メニューに追加]ボタンを押すと、メニュー構造にカテゴリー(”ブログ運営”と”ブログ収益化”)が追加されました。

カテゴリーページがメニュー構造に追加されました

 

メニュー項目の配置を変更する

追加したメニュー項目の表示順を変更します。例として、お問い合わせを最後(右側)に移動します。使用しているシステム環境によっては、ドラッグアンドドロップで簡単に配置順を変更できます。

ドラッグアンドドロップが使用できない場合は、移動するアイテムのタブを開いて、移動のリンク(下の画面赤枠で囲った内側)を押して変更します。

メニュー項目の移動

以下の画面のように、お問い合わせを一番下に移動しました。お問い合わせをメニューの最後に移動

メニュー項目のタイトル表示を変更

例で追加した固定ページの”プロフィール / Blogging Lifeの簡単な紹介”は、メニュータイトルとしては長いので、”About”に変更します。

メニュー構造に表示されているタイトル表示を変更したい項目のタブを選択し、表示される”ナビゲーションラベル”の内容を編集します。

ラベル変更前

ナビゲーションラベル名の編集

ラベル変更後

ナビゲーションラベル名変更後

設定したメニューを表示位置を設定し、保存する

メニューの配置やラベル名を確認します。今回は、タイトル下のメインメニューのため、メニューの位置の”ヘッダーナビ”をチェックを入れます。

メニュー表示位置を指定する
青色の[メニューを保存]を押して、設定したメニューを保存します。

フッターにヘッダーとは異なるメニューを設定することもできます。メニュー名をフッター用に変更して、その後の作業は、上記、メニューアイテムの選択と追加などの手順と同様です。

https://www.blogging-life.com/add-wp-footer-menu/

追記

メニューのアイテム名にFont Awesomeのアイコンを追加しました。

メニュー項目名の後にFont Awesomeアイコンを表示

https://www.blogging-life.com/add-fa-icon-in-menu/

コメントを残す(承認後表示されます)

*
*
* (will not be published.)

Return Top