wordpress-menu

サイト構築

【WordPressの使い方】メニューの作成と表示設定

メニューは、WordPressの便利な機能の一つで、デフォルトメニューの代わりに、お好みのカスタムメニューを作成することができます。

メニューを作成することで、ヘッダーにナビゲーションメニューを表示させたり、サイドバーに任意の記事やカテゴリなどを表示させたりすることができるので、メニューを有効に活用することで、ユーザビリティや回遊率を向上させることが出来ます。




メニューとは

メニューとは、ある目的のためにサイト内のリンク(記事・カテゴリなど)を任意に一括りにしたもので、作成したメニューは、ヘッダーやフッターをはじめ、ウィジェットなどにも表示させることが出来ます。

メニューの作成と表示設定

作成したメニューは、いろいろな活用方法がありますが、ここでは、作成したメニューを以下の表示に使う方法をご紹介します。

  1. グローバルメニュー
  2. ウィジェット

解説の流れとしては、まずはメニューを作成してグローバルメニューへの表示を設定し、次にウィジェットへの表示をご紹介します。

1.グローバルメニュー

[外観]メニューにある[メニュー]をクリックして、メニューを開きます。
そして、「メニュー構造」にある「メニュー名」に任意の名前を入力し、[メニューを作成]をクリックします。

wordpress-menu-2-2

すると、左側にある「メニュー項目を追加」が選択できるようになります。

wordpress-menu-3-1

まずはグローバルメニューを作成したいので、「カテゴリー」から必要なカテゴリーにチェックを入れて[メニューに追加]をクリックします。

wordpress-menu-4

すると、右側の「メニュー構造」に、先ほど選択したカテゴリーが追加されるので、必要に応じてドラッグ&ドロップで並べ替え、下にある「メニュー設定」の「グローバルナビ」にチェックを入れて[メニューを保存]をクリックします。

wordpress-menu17-3

これで、メニューの作成とグローバルメニューへの表示設定が完了です。
Webページを見てみると、グロバルメニュー(グローバルナビ)に、作成したメニュー(カテゴリー)が表示されました。

wordpress-menu22

2.ウィジェット

次に、先ほど作成したメニュー(カテゴリー)を、ウィジェットに表示させてみましょう。

[外観]メニューにある[ウィジェット]を開き、「ナビゲーションメニュー」をウィジェットに追加します。

wordpress-menu-5

追加された「ナビゲーションメニュー」のタイトルを入力し、「メニューを選択」をクリックすると、作成したメニューがドロップダウンで表示されるので、先ほど作成したメニューを選択して[保存]をクリックします。

wordpress-menu-6-1

これで、作成したメニューのウィジェットへの表示設定が完了です。
Webページを見てみると、作成したメニュー(カテゴリー)がウィジェットに表示されました。

wordpress-menu-7-1

このテーマでは、メニューを表示させるためのウィジェットの名称が「ナビゲーションメニュー」でしたが、テーマによっては「カスタムメニュー」など、その名称が異なります。

 

スポンサーリンク

関連記事

  1. wordpress-title-tagline

    サイト構築

    【WordPressの使い方】ブログのタイトルとキャッチフレーズの設定

    ブログのタイトルは、WordPressをサーバーにインストールする時に…

  2. wordpress-5-0-gutenberg
  3. wordpress-theme

    サイト構築

    【WordPressの使い方】テーマとは

    テーマとは、WordPressのデザインを構成するテンプレートのことで…

  4. wordpress-domain

    サイト構築

    【WordPressの導入】ドメインの基本知識と取得方法

    ここでは、ドメイン(独自ドメイン)の基本知識と取得方法をまとめています…

  5. wordpress-preparation

    サイト構築

    【WordPressの導入】始めるために必要な準備

    WordPressを始めるにあたって、「導入までの一連の流れ」と「必要…

  6. wordpress-ssl

    サイト構築

    【SSL化】データの暗号化(http⇒https)でサイトの信頼性を向上しよう

    従来の「http」は、データをそのまま送受信していますが、「https…

最近の記事

  1. shutterstock_573396265-bousai
  2. shutterstock_713835478-ticket-resale-law
  3. shutterstock_1115483624-Relationship
  4. shutterstock_580655965-shutterstock-use
  5. shutterstock_126336395-stock-photo-service
  6. shutterstock_570628189-copyright-watermark
  7. shutterstock_373050517-sitemap
  8. shutterstock_413924539--search-console-analytics-cooperation
  9. google-analytics-introduction
  10. google-search-console
PAGE TOP
テキストのコピーはできません。