2022.12.08Webサイトやブログには、メニューを配置するのが一般的です。WordPressにもメニューを設定する機能があります。今回のコラム記事では、上記のような疑問に対して回答します。使いやすいメニューを作成して、Webサイトのユーザビリティを高めましょう。まとめWordPressのメニューとはWordPressのメニューとは、主にヘッダーに表示されるナビゲーションリンクの設定ができる機能のことです。WordPressのメニュー設定をすると、Webサイトの上部にメニューの追加ができます。メニューは、ユーザーがWebサイトのコンテンツにスムーズにアクセスできるように補助する役割があります。メニューの特徴は、どのWebページでも同じ箇所に表示されることです。メニューは検索エンジンにWebサイトの構造を知らせる役割も担っています。重要なコンテンツをメニューに表示することで、SEO効果が期待できます。WordPressのテーマによっては、フッターやサイドバーにもメニューを表示することが可能です。ポイント!Webサイトのメニューは、別名「グローバルメニュー」「ナビゲーションメニュー」とも呼ばれています。メニューによく設定されるコンテンツの例Webサイトのメニュー(ヘッダー・サイドバー・フッター)によく設定されるコンテンツは、以下のとおりです。免責事項HTMLサイトマップブログの場合は、メニューに主要なカテゴリーを設置するのが一般的です。メニューに必要な項目は、Webサイトやブログによって異なります。主要なコンテンツや、ユーザーに読んでほしい重要なコンテンツをメニューに盛り込みましょう。WordPressのメニュー設定前に準備しておくことメニューに含める項目は、一般的にWebサイト内へのリンク(内部リンク)です。そのため、メニューを作成する前にコンテンツを公開しておく必要があります。カテゴリーをメニューに入れるなら、カテゴリーページとそのカテゴリーに属する投稿記事の作成が必要です。固定ページをメニューに入れるなら、固定ページを事前に作っておきましょう。替えなどの設定方法について解説します。メニュー設定画面の開き方メニューの設定画面は、WordPressの管理画面から「外観」→「メニュー」で開けます。メニューを作成メニューを新規作成するには「メニュー構造」に必要な項目を設定することが必要です。「メニュー名」の入力と「メニュー設定」のチェックを行いましょう。「メニュー名」はWebサイトには表示されませんので、自分がわかりやすい名前を入力しましょう。「メニュー設定」ですが「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れると、新しい固定ページの作成時に自動でメニューへ追加されます。固定ページの自動追加は親ページのみになります。子ページは、自動で追加されることはありません。「メニューの位置」の内容はテーマによって変わります。今回は、Webサイトに適用するデスクトップメニューとモバイルメニューにチェックを入れました。設定が完了したら、画面右下にある「メニューを作成」をクリックしてメニューを保存してください。「メニューを作成」をクリックすると、メニューの編集画面になります。画面右下にある「メニューを保存」をクリックして設定を保存しましょう。メニュー項目の追加メニューの設定が保存できたら、メニュー項目を追加していきましょう。メニューに追加する項目は、画面内にある「メニュー項目を追加」から選んでください。追加できる項目は以下のとおりです。タグ固定ページ固定ページを追加するには、画面左側の「メニュー項目を追加」→「固定ページ」を開き、追加したい固定ページにチェックを入れて「メニューに追加」をクリックしてください。メニューに追加すると、画面右側の「メニュー構造」に追加した固定ページが表示されます。複数の固定ページを追加して並べ替えたい場合は、ドラッグ&ドロップで移動してください。投稿で作成した記事をメニューに追加するには、画面左側の「メニュー項目を追加」→「投稿」を開き、追加したい記事を検索しましょう。インスタント検索になっており、キーワードを入力すると自動で結果が表示されます。追加したい投稿が表示されたら、チェックを入れて「メニューに追加」をクリックしてください。追加した投稿は、固定ページと同じくドラッグ&ドロップで順番を並べ替えられます。カスタムリンクカスタムリンクとは、任意のテキストにURLを設定できる仕組みのことです。カスタムリンクを活用することで、外部リンクやSNSのURLをメニューに追加できます。カスタムリンクをメニューに追加するには「メニュー項目を追加」→「カスタムリンク」を開き、URLとリンク文字列を入力しましょう。次に「メニューに追加」をクリックすれば追加されます。カスタムリンクはメニューに追加したあとでもURLやナビゲーションラベルを変更できます。カテゴリーカテゴリーページもメニューに追加できます。カテゴリーページとは、Webサイトのコンテンツを分類して一覧にして表示するページのことです。カテゴリーページをメニューに追加するには、画面左側の「メニュー項目を追加」→「カテゴリー」を開きます。追加したいカテゴリーにチェックを入れたら「メニューに追加」をクリックしてください。タグWordPressはデフォルトで、タグが「メニュー項目を追加」に表示されていません。タグを表示させるためには、画面右上にある「表示オプション」を開き「タグ」にチェックを入れてください。「タグ」にチェックを入れると「メニュー項目を追加」にタグが現れます。メニューにタグを追加するには「メニュー項目を追加」→「タグ」を開き、追加したいタグにチェックを入れて「メニューに追加」をクリックしましょう。投稿で設定しているタグしか表示されないのでご注意ください。メニュー項目の並べ替えメニュー項目を並べ替える方法は、主に2つあります。一つは、ドラッグ&ドロップで並べ替えたい項目を移動させる方法です。メニュー項目にカーソルを合わせ、左クリックしたまま並べ替えたい場所に移動させてください。一つは、メニュー項目の設定画面を開いて移動させる方法です。移動したいメニュー項目右側の矢印をクリックし、設定を開いたら以下の項目から移動する方向を選びましょう。先頭へメニューの表示位置メニューの表示位置の設定は、テーマによって異なります。現在、WordPressのほとんどのテーマはレスポンシブデザインを採用しており、デスクトップメニューとモバイルメニューがあります。どちらでもメニューが表示されるように設定するのがおすすめです。メニューの表示位置の設定は「メニュー構造」の下にある「メニュー設定」から行います。今回は「デスクトップ水平メニュー」「モバイルメニュー」にチェックを入れました。メニュー位置の設定を行ったら「メニューを保存」をクリックしてください。メニューを保存メニュー項目の追加やメニューの設定を終えたら、かならず画面右下にある「メニューを保存」をクリックしましょう。メニューを保存したあとは、実際にWebサイトを表示してメニューの確認をするのがおすすめです。Chromeのデベロッパーツールを使えば、パソコンからでもモバイルメニューの確認ができます。Chromeで確認したいWebサイトにアクセスします。ChromeWebサイトが表示されたら「右クリック」→「検証」でデベロッパーツールを開きましょう。Chromeデベロッパーツールを開いたら「デバイスのツールバーを切り替え」アイコンをクリックしてスマートフォンモードに切り替えます。スマートフォンモードでWebサイトが表示されるので、メニューの確認をしましょう。階層メニューの作成WordPressのメニュー機能では、階層メニューを作ることができます。階層メニューとは、親メニューと子メニューから構成されており、親メニューにカーソルを合わせると子メニューが表示されるスタイルのことです。「メニュー構造」でメニューの下にメニューをドラッグ&ドロップすると、上記のような親メニューと子メニューができます。Webサイトの表示では、親メニューにカーソルを合わせると子メニューがプルダウンされるスタイルが多いです。階層メニューの表示方法はテーマによって異なるため、階層メニューを作成したらかならず確認しましょう。複数メニューの位置を管理WordPressのメニュー機能では、複数のメニューを作成して、それぞれ異なる位置に配置することもできます。複数のメニューを作成するには、WordPressの管理画面から「外観」→「メニュー」を開いて「新しいメニューを作成しましょう」をクリックしてください。新しいメニューを作ったら保存しましょう。複数のメニューの位置を管理するには、タブの「位置を管理」を開きます。メニューの位置ごとにメニューが選択できますので、必要な箇所を変更しましょう。メニューの変更をしたら「変更を保存」をクリックして保存してください。メニュー項目の削除メニュー項目を削除したい場合は、メニュー設定を開き「メニュー構造」にある削除したい項目の矢印をクリックしてください。「削除」をクリックしましょう。一度削除すると、ナビゲーションラベルなどの設定は残らないので注意してください。知っておくと便利!WordPressのメニューの応用設定WordPressのメニュー機能には、いろいろと便利な設定があります。便利な設定について、わかりやすく解説します。メニュー項目の表示名の変更メニュー項目の表示名は自由に変更できます。メニュー項目の表示名は、デフォルトではもともとの名前が設定されています。固定ページなら固定ページ名、カテゴリーならカテゴリー名です。メニュー項目の表示名を変更するには、メニュー設定の「メニュー構造」から変更したいメニュー項目の矢印をクリックします。「ナビゲーションラベル」に好きな表示名を入力しましょう。表示名を変更したら「メニューを保存」をクリックして保存しましょう。リンクを新しいタブで開くデフォルトのメニュー画面では、リンクを新しいタブで開く設定はできません。画面右上の「表示オプション」を開いて「リンクターゲット」にチェックを入れることで設定できるようになります。リンクを新しいタブで開くには、メニュー設定の「メニュー構造」から変更したいメニュー項目の矢印をクリックします。「リンクを新しいタブで開く」にチェックを入れましょう。メニュー項目に固定ページを自動で追加メニュー項目に固定ページを自動で追加する設定もあります。固定ページを作成するごとにメニュー設定を行うのは手間がかかります。自動で追加されるようにしておけば、固定ページの作成だけで済みます。メニューに固定ページを自動追加させるには、メニュー設定の「メニュー構造」→「メニュー設定」→「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れて保存してください。この設定はこれから新しく作る固定ページが自動追加されるのであり、すでに作成済みの固定ページは手動で追加する必要があります。作成したメニューが不要になったら削除ができます。メニューの削除方法は、メニュー設定から「メニュー構造」の下にある「メニューを削除」をクリックしてください。ポップアップが表示されて、本当に削除してよいのかが確認されます。削除する場合は「OK」を選択しましょう。WordPressのメニューをカスタマイズするおすすめプラグインWordPressのメニューをカスタマイズできる、おすすめのプラグインを紹介します。紹介するプラグインは以下のとおりです。Imageは、WordPressのメニューにアイコンや画像を追加できるプラグインです。マウスオーバーしたときの画像も設定できるため、カーソルを合わせたときに違う画像にしたり色を変えたりすることもできます。アイコンそのものはプラグインには含まれていません。MONO」などの素材サイトを利用するのがおすすめです。Menuは、スマートフォンに対応したモバイルメニューを簡単に作れるプラグインです。HTMLやCSS、JavaScriptなどの知識がない人でも簡単にモバイルメニューを作れます。テーマにモバイルメニューがない場合はもちろんのこと、既存のメニューに置き換えて利用することも可能です。Menuではメニューの色やテキスト、検索ボックスの有無などを簡単にカスタマイズできます。Menuは、モバイルメニューが簡単に作れるプラグインです。階層メニューをモバイルメニューで表示、2つのメニューを左右に配置といった特徴があります。2つのメニューを左右に配置できるため、メニュー内容を分割してシンプルにできます。Menuは、WordPressでメガメニューが導入できるプラグインです。メガメニューとは、通常のメニューより広いスペースを利用するスタイルのことです。別名「メガナビゲーションメニュー」や「メガドロップダウン」とも呼ばれています。多層構造のリンクをわかりやすく表示したり、商品画像やアイコンをメニュー内に表示したりすることが特徴です。Menuは手軽にメガメニューを導入し、デザインをカスタマイズできるプラグインです。UberMenuUberMenuは、美しいレイアウトでスタイリッシュなメガメニューを実現するプラグインです。完全にレスポンシブデザイン対応で、パソコンでもスマートフォンでも適切に表示されます。メガメニューへ簡単に画像を追加することができ、視覚的な訴求効果を生み出します。スタイリッシュなメガメニューを導入するなら、UberMenuはおすすめのプラグインです。まとめWordPressのメニュー機能について解説をしました。WordPressにおけるメニューとは、主にヘッダーに表示されるナビゲーションリンクの設定ができる機能のことです。メニューを設置することでユーザーがWebサイトの主要コンテンツに、スムーズにアクセスできます。メニューには固定ページや投稿、カテゴリー、カスタムリンク、タグといった項目が配置できます。適切なメニューはユーザビリティを高め、ユーザーの滞在時間を向上させることが可能です。WordPressのメニューの作成方法を覚え、便利でユーザビリティの高いメニューを作りましょう。美容業まずは無料でご相談ください。