【備忘録】WordPress ページトップにメニューバーを設置

記事内に広告が含まれています。

WordPressにメニューバーやカテゴリーを追加する

WordPressのメニューバーは、ウェブサイト上に表示されるナビゲーションメニュー(*1)です。主要なページやカテゴリーへのリンクを提供します。 *1 グローバルナビゲーションともいいます

当サイトもご覧のようにヘッダーにナビゲーションメニューを設置しており、それぞれのカテゴリが一目瞭然でわかるように配置しています。今回はこのナビゲーションメニュー設置について説明しています。bonpon424-top

タカマル
タカマル

簡単なので是非試してみてね!

 

 

スポンサーリンク
スポンサーリンク

メニューバーを設置する5つのメリット

ナビゲーションの向上
メニューバーはサイトのナビゲーションが改善しますので、訪問された方々が必要な情報に簡単にアクセスできるようになります。知りたい情報のページやカテゴリーへのリンクが見つけやすくなるので、ユーザーエクスペリエンスが向上します。
サイト構造の整理
メニューバーを設置することで、サイトの階層構造を整理することが出来ます。カテゴリーをメニューバーに配置することで、訪問された方々が目的のコンテンツをよりスムーズに見つけられるようになります。
SEOの強化
カテゴリー分けされたメニューバーは、検索エンジン(SEO)がサイトのコンテンツを理解しやすくなるので、ランクアップにも良い影響があるでしょう。
カスタマイズ性と柔軟性
WordPressのメニューバーはカスタマイズが容易であり、外観や配置を自由に変更できます。ウェブサイトのテーマに合わせたデザインやスタイルにカスタマイズすることで、ブランディングや視覚的な統一感を向上させることができます。
レスポンシブデザインのサポート
WordPressのメニューバーはレスポンシブデザインに対応しており、異なるデバイスでの表示に適応します。モバイルデバイスやタブレットでもメニューが使いやすいため、訪問された方々が快適にサイトを閲覧出来るようになります。
タカマル
タカマル

サイトが使いやすくなるのは、とても良いことですね

 

メニューバーの設置手順

それではメニューバーを設置してみましょう。

まず、WordPress外観 → メニュー を開きます。

メニュー構造
メニュー名
ここでは「グローバルメニュー」としていますが、決まりはないので任意で構いません。

メニュー設定メニューの位置
□ヘッダーメニュー
□ヘッダーモバイルメニュー
この2つにチェックを入れて、右下のメニューを作成ボタンを押す

global-menu

 

外観の「メニュー項目を追加」項目から
カテゴリー
を選択
すべて表示
タブを選択
□*** ※表示させたいカテゴリーすべてチェック
メニューに追加ボタンを押す

global-menukouzo

 

外観の「メニュー項目を追加」項目から
固定ページ
を選択
すべて表示
タブを選択
□ホーム
にチェックを入れてメニューに追加ボタンを押す

最後に右下にある メニューを保存 ボタンを押せば設定完了です

global-kansei

タカマル
タカマル

下のようにメニューバーが表示されていればOKです!

bonpon424-top

 

 

タブバーとダブりに注意

Cocoonの場合、カテゴリーの記事をタブ化して表示することが出来ます。
※「タブ一覧」の際は、3つまで有効。4つ目以降は無視されます。

今回、メニューバーを設置した場合しましたので、カテゴリーがダブって表示されることになります。
特に問題がないようなら、そのままで構いませんが、気になる場合は以下の設定を変更すればダブりはなくなりますので、試してみて下さい。
  1. Cocoon設定インデックスタブを選択
  2. フロントページタイプ
    表示形式       ◯一覧(デフォルト) にチェックする
    表示カテゴリー  □*** ※すべてのカテゴリーのチェックを外します
index-top

まとめ

今回の記事で説明したことは以下の通りです。

  • WordPressのメニューバーは、ナビゲーションメニューやグローバルナビゲーションともいう
  • メニューバー設置による5つのメリット
    ナビゲーションの向上
    サイト構造の整理
    SEOの強化
    カスタマイズ性と柔軟性
    レスポンシブデザインのサポート
  • メニューバーの設置方法
  • メニューバーとタブバーのダブりに注意

ページトップにメニューを設置することで、それぞれのカテゴリが一目瞭然でわかるようになりました。
SEO的にも効果があるようなので、是非設置してみてください。

タカマル
タカマル

最後まで読んで頂きありがとうございました。

スポンサーリンク

コメント

error: Content is protected !!
タイトルとURLをコピーしました