
サイトをパソコンで表示した時にタイトルの下に表示されるメインメニューは、ナビゲーションの要とも言える重要なものです。メインメニューは、ヘッダーメニュー、メニューバー、グローバルナビゲーションとも呼ばれています。
メニューはナビゲーションの要
モバイル表示でのメニュー
モバイル画面では、最初に表示される画面の上段の目立つ(分かりやすい)位置にメニューボタンが表示されます。(下の画像では、画面右上です。テーマや設定によって、表示位置は変わります。)
メインメニューは、スマホ表示では通常、画面の上部に表示されます。メインメニューは、モバイルのナビゲーションとして、ユーザーエクスピリアンスに関わる重要な役割をもっています。ナビゲーションは、AdSense審査でも重視される項目の一つです。現在のAdSense二次審査は、スマホ用のページ単位の広告を使用して行われています。
メニューボタンを押すと、メニューアイテムが表示されます。メニューで表示されるアイテムは、サイト内の重要度の高いページで構成されるのが一般的です。
WordPressサイトのメインメニューの設定の仕方
管理画面(ダッシュボード)の左下に並んで表示されるメニュー内の[外観]を選び、表示されるサブメニューの中から[メニュー]を選びます。
以下の様なメニュー編集画面が表示されます。
メニューを構成する項目は、固定ページ、投稿、カスタムリンク、カテゴリーから追加できます。(上画面、赤枠で囲った箇所)
ここでは例として、以下の項目をメインメニューに追加します。
- 固定ページ: ”ホーム”、”プロフィール”と”お問い合わせ”
- カテゴリー: ”ブログ運営”と”ブログ収益”
メニューに固定ページを追加
メニュー項目の[固定ページ]タブをクリックして、追加する固定ページのチェックスボックスを選択します。
[メニューに追加]ボタンを押すと、メニュー構造に固定ページが追加されます。
メニューにカスタムリンクを追加する場合
[カスタムリンク]タブをクリックして、URLとリンクの名前を入力します。
メニューにカテゴリーページを追加
[カテゴリー]タブをクリックすると、カテゴリーが表示されます。メニューに加えるカテゴリーにチェックを入れます。
[メニューに追加]ボタンを押すと、メニュー構造にカテゴリー(”ブログ運営”と”ブログ収益化”)が追加されました。
メニュー項目の配置を変更する
追加したメニュー項目の表示順を変更します。例として、お問い合わせを最後(右側)に移動します。使用しているシステム環境によっては、ドラッグアンドドロップで簡単に配置順を変更できます。
ドラッグアンドドロップが使用できない場合は、移動するアイテムのタブを開いて、移動のリンク(下の画面赤枠で囲った内側)を押して変更します。
以下の画面のように、お問い合わせを一番下に移動しました。
メニュー項目のタイトル表示を変更
例で追加した固定ページの”プロフィール / Blogging Lifeの簡単な紹介”は、メニュータイトルとしては長いので、”About”に変更します。
メニュー構造に表示されているタイトル表示を変更したい項目のタブを選択し、表示される”ナビゲーションラベル”の内容を編集します。
ラベル変更前
ラベル変更後
設定したメニューを表示位置を設定し、保存する
メニューの配置やラベル名を確認します。今回は、タイトル下のメインメニューのため、メニューの位置の”ヘッダーナビ”をチェックを入れます。
青色の[メニューを保存]を押して、設定したメニューを保存します。
https://www.blogging-life.com/add-wp-footer-menu/
追記
メニューのアイテム名にFont Awesomeのアイコンを追加しました。
コメントを残す(承認後表示されます)