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-popular-posts

    サイト構築

    【高速化】WordPress Popular Postsは重い?初期設定を見直して軽量化しよう!

    WordPressを運用していると、記事をランキング表示してくれる『W…

  2. wordpress-search-engine-index
  3. shutterstock_373050517-sitemap

    サイト構築

    【サイトの地図】サイトマップを作成してユーザビリティとSEOを向上しよう

    Webサイトは、ページが増えて規模が大きくなればなるほど、その構成や構…

  4. wordpress-ssl-etc

    サイト構築

    【SSL化】サーバーでSSLの申込み&設定が済んだ後に必要な作業

    ここでは、WEBサイトをhttps(SSL)化する一連の作業の中でも、…

  5. wordpress-domain

    サイト構築

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

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

最近の記事

  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