ワードプレスでブログサイトやコーポレートサイトなど様々な目的のサイトを作る時に必ず必要になる「メニュー」の設定。
メニューを作る目的は非常に明快です。
ユーザーがサイトに訪れた際に各コンテンツへ迷うことなく誘導できるようにすること、Googleにサイト構造を伝えることです。
つまりユーザーとGoogleにサイトを分かりやすく伝えるため。
これがなぜ重要なの?と疑問が湧いた方はこちらの記事をご参照ください→ナビゲーションを追加しよう SEO対策としてのナビゲーション
トップページのヘッダーメニューやサイドバー、更にはフッター部分にメニューを適正表示させることは、自分のサイトのコンテンツをより多く見てもらえるキッカケになります。
検索エンジン側の評価も明快なメニューを持つサイトとそうでないサイトでは変わってきます。
今回は、そんなユーザーにとっても検索エンジンにとっても大切なメニューの設定について解説します。
是非、参考にしてみてください。
メニューの設定方法
ここではメニューを追加する方法を解説します。
ワードプレス管理画面より「外観」→「メニュー」の順に進みます。
「新規メニューを作成」をクリックします。
「メニュー名」に任意のタイトルを入力して「メニューを作成」をクリックします。このタイトルはサイトで表示されませんので、自分が管理しやすいようなタイトルを付けましょう。
「ヘッダー用」とか単純に「メニュー」でも問題ありません。
メニューの編集画面が表示されますので、画面左側を見てみましょう。「固定ページ」には現在、作成されている固定ページの一覧が表示されます。
「投稿」には過去に書いた記事が一覧で表示されます。
「カスタムリンク」には任意でリンクを指定できます。
「カテゴリー」は特定のカテゴリーをメニューに表示する際に使用します。
例えば、固定ページをメニューに追加したい場合は、追加したい固定ページにチェックを入れて「メニューに追加」をクリックすると右側の「メニュー構造」に表示されます。
「メニュー設定」の「固定ページを自動追加」にチェックを入れると固定ページを作成する度に自動でメニューに追加されるようになります。
「メニューの位置」はメニューの位置を指定します。この項目はテーマによって表示のされ方が違います。
全ての設定が完了したら「メニューを保存」をクリックして完了です。
トップページを見てみると、ヘッダーの下にメニューが追加されたことが確認できます。
「メニュー」の設定にある「位置の管理」は複数の位置にメニューを設定する時に使うと便利です。
この設定は使用しているテーマによって変わります。
直感的に操作したい方は「ライブプレビューで管理」がおすすめです。
「ライブプレビューで管理」をクリックするとカスタマイズ画面のメニュー設定が開くので、編集したいメニュータイトルをクリックします。
このように実際のプレビュー画面を確認しながら設定できます。
メニューを並べ替えたい時はメニューの上のマウスカーソルを合わせるとカーソルが十字の形に変わりますので、メニューを好きな位置にドラッグ&ドロップすればOKです。
尚、メニューを階層化して表示させたい場合は画像のように階層化したいメニューをクリックしながら入れ子にしたい親メニューの下で右にズラします。
するとメニューが階層化されてプレビュー画面でもドロップダウンの表示になっているのが分かります。
設定が完了したら「保存して公開」で設定完了です。
メニューをウィジェット(サイドバー)に表示する
ここではサイドバーにメニューを設置する方法を紹介します。
ワードプレス管理画面より「外観」→「ウィジェット」の順に進みます。
ウィジェットの管理画面が表示されますので「カスタムメニュー」を「サイドバー」にドラッグ&ドロップします。
サイドバーエリアにカスタムメニューを挿入するとメニューの設定画面が表示されます。
「タイトル」にはサイドバーに表示されるメニューのタイトルを設定します。
「メニューを選択」の項目からサイドバーに表示させたいメニュータイトルを選択します。
設定が完了したら「保存」をクリックして完了です。
サイトを見てみるとメニューが追加されたことが確認できます。
メニューのプラグイン
ここではメニューを設定する上で便利なプラグインを紹介します。
Nav Menu Images
https://ja.wordpress.org/plugins/nav-menu-images/
メニューに画像を設定したい時に非常に便利なプラグインが「Nav Menu Images」
通常、メニューに画像を設定するとSEO的にあまり良くないと言われており、メニューの文字を画像に置き換えてしまうことは推奨されていません。
ただし、そのようなマーケティング要素はいらいないので綺麗なホームページがほしいという場合にはこのプラグインは役に立つかと思います。
ただし、ワードプレスにアップロードした画像にalt属性を設定することはできるので、完全にSEO的にはNGだという訳ではありません。
CSSを編集しなくても問題なく設定できるのが非常に便利なプラグインです。メニューを綺麗な画像で装飾したい方におすすめです。
Menu Image
https://ja.wordpress.org/plugins/menu-image/
メニューにアイコンを追加できる便利なプラグイン「Menu Image」
このプラグインを活用すればメニューにアイコンを追加することができて視覚的にも分かりやすくなります。表示できるのはページ上部のグローバルメニューになります。
アイコン画像が自分で選べるというのも嬉しいポイントです。マウスカーソルを合わせた時のアイコンの変化も設定できるので、視覚的にユニークなメニューを作ることも可能です。
Max Mega Menu
https://ja.wordpress.org/plugins/megamenu/
メニューの中にウィジェットが設定できる「Max Mega Menu」
非常に高機能なプラグインで、このプラグインからメニューのカラー設定なども可能です。特筆すべきは誰でも簡単にメニューの中にウイジェットを設定できることです。
この機能により例えばメニューの「アクセス」にカーソルを合わせると地図が表示されるようにしたりすることも可能です。
詳細な設定ができるので、CSSの知識がなくても直感的な操作でカスタマイズができます。
SEO対策としてのメニュー
メニューは内部SEO対策として活用できる項目です。メニューをしっかりと構築していると、Googleのクローラー(サイトを巡回するシステム)がサイト構造を把握しやすくなり、また、サイト内を巡回しやすくなると言われています。
Googleがサイトを把握するために、案内ルートをちゃんと構築しておいてあげる。といったイメージですね。
詳しくはこちらのページで→ナビゲーションを追加しよう SEO対策としてのナビゲーション
ワードプレスのメニュー設定のまとめ
ワードプレスのメニューについて解説しました。
サイトを分かりやすくナビゲーションするために必要不可欠なメニューには何でも表示すれば良いわけではなく、適材適所な配置が大切です。
ベストなポジションは1回で見つけられるものではありませんので、試行錯誤を繰り返して、時間をかけて改善していくのが良いでしょう。
メニューの階層化などはセンスよく活用すれば非常に分かりやすい明快なメニューにすることができますので、是非活用してみてください。
単純だからこそ奥の深いメニュー設定。それぞれのサイトイメージにあった設定を心がけましょう!