グローバルメニューのカスタマイズ WordPressカスタマイズ
京都のホームページ制作会社 株式会社ファンフェアファンファーレでは、WordPressサイトのグローバルメニューのカスタマイズなどWordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPressテーマ（テンプレート）やプラグインのカスタマイズサービスを提供しております。
このページでは、WordPressのカスタマイズサービスのうち、「WordPressサイトのグローバルメニューのカスタマイズ」について掲載しております。WordPressテーマをカスタマイズすることで、グローバルメニューのデザイン・レイアウトといった表示に関する変更やメニュー項目の追加、管理画面の「メニュー」から操作できる仕様への変更、スマートフォン版グローバルメニューの新設追加などが可能です。
弊社では、WordPressテーマファイルの編集によるWordPressサイトのグローバルメニューのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。
「グローバルメニューの表示を変更したい」
「グローバルメニューの項目設定をWordPress管理画面から行えるようにしたい」
「画像で制作されたメニューからテキストベースのグローバルメニューへと変更したい」
「スマホ用のメニューを新設したい」
といった場合に、WordPressテーマのカスタマイズによってグローバルメニューの表示変更や新規設置などを手がけさせていただいております。
既に運営されているWordPressサイトのグローバルメニューのデザイン変更・レイアウト変更、グローバルメニューの機能エラーの修正やグローバルメニューの追加など、各種「WordPressのグローバルメニュー」に関するカスタマイズに対応可能です。
WordPressのカスタマイズのうち、WordPressサイトの「グローバルメニュー」のカスタマイズについてご紹介します。
WordPressサイトのグローバルメニュー
WordPressテーマの仕様にもよりますが、WordPressをベースとしたホームページ（WordPressサイト）のヘッダー部には、グローバルメニューがついています。
このグローバルメニューは、基本的にホームページのヘッダー部分に設置されるため、一般的に全てのページで表示され、WordPressサイトの主要コンテンツページへのリンクが設置されています。
基本的にはWordPressテーマによってテキストベースでメニュー項目が表示されますが、オリジナルのWordPressテーマの場合、Webデザイン性向上のために画像ベースでグローバルメニューが作成されている場合もあります。
WordPressサイトのヘッダー部分の横並びのメニューが一般的ですが、テーマによってはサイドバーやフッター部分にグローバルメニューが設置されていることもあります。
グローバルメニュー
WordPressサイト グローバルメニュー
グローバルメニューは、テキストベースで設置され、WordPressの「メニュー機能」を利用しているものや、画像を利用し、テーマに固定的に組み込まれたものなど、様々なパターンがあります。
場合によっては、WordPressのメニュー機能を使用せず、WordPressテーマ内でオリジナルメニューとして制作されたものもあります。
メニュー項目が画像ボタンで制作されている場合、メニュー項目の追加には画像の新規作成が必要になります。
また、横並びのグローバルメニューの場合、項目追加によってレイアウトが段落ちする可能性もありますので、グローバルメニューの各メニュー項目の横幅などには注意する必要があります。
もしメニュー項目の追加によってグローバルメニューのレイアウトが崩れてしまう場合は、各メニュー項目の横幅をCSSで調整する必要があります。この時、メニュー項目が画像で作成されていた場合は、それぞれの画像を再作成する必要があるケースがあります。
未対応テーマにグローバルメニューを追加
WordPressテーマによっては、グローバルメニューが設置されていない場合もありますが、ユーザビリティ向上のための新規グローバルメニューの設置をご希望の際には、ヘッダー部などに設置させていただくことも可能です。
この新規グローバルメニューの設置は、WordPressテーマファイルを編集する必要があるため、管理画面の設定などでは行うことはできません。
弊社では、このWordPressサイトのグローバルメニュー未対応テーマに、管理画面から設定操作できるグローバルメニューを追加するカスタマイズも手がけております。
カスタムメニューの利用
WordPressの「メニュー機能」を利用した「カスタムメニュー」が実装されていない場合でもカスタマイズによって、WordPress管理画面からメニュー項目を設定することができるWordPressテーマへと変更することができます。
固定的なグローバルメニューを設置させていただくことももちろん可能ですが、こうしたカスタムメニューを実装することのほうがメリットがたくさんあります。
WordPressサイトの大分類としてのメニュー項目が追加削除されたり、SEOなどの関係で各ページがタイトル変更されたときであっても、メニューの表示項目をご自身で設定していただけたり、そのままページタイトルがグローバルメニューの表示項目へと反映されるなど、カスタムメニューの利用にはたくさんのメリットがあります。
グローバルメニューのカスタマイズ
WordPressテーマの仕様によって、グローバルメニューのパターンは様々です。
WordPressの「メニュー機能」を利用したもの（カスタムメニュー）や、システムを利用せずに設置されたもの、画像を配置して設置されているもの、様々なグローバルメニューのパターンがあります。
WordPressテーマの修正により、グローバルメニューの仕様やメニュー項目のカスタマイズが可能です。また、グローバルメニューのデザインにつきましても、レイアウト、配色、配置箇所など、あらゆる面でカスタマイズが可能です。
なお、画像で制作された「WordPressサイトのグローバルメニュー」は、画像の再作成が必要になる場合がありますことを予めご留意ください。
画像で制作されたグローバルメニューをテキストベースに変更し、グローバルメニューの背景に画像を埋め込み、メニュー項目名称変更に柔軟に対応できるようにするカスタマイズも可能です。
変更しにくい「画像で作成されたグローバルメニュー」を廃止し、管理画面から編集可能なグローバルメニューを設置する
独自WordPressテーマを利用している場合などにおいては、グローバルメニューが画像で作成されテーマ内に埋め込まれて表示されている場合があります。
これは、CSSの技術が進んでいなかったり、Webフォントが充実していなかった時代に、背景に美しいグラデーションを表現する、美しいフォントを利用してメニューを際立たせたいという意図があったためであり、作成時期においてはWebデザインの面で適切な方法のひとつであったと考えることができます。
しかしながら背景やフォントの美しさの反面、メニュー項目が変更となったり、項目を追加する必要が出てきた場合に、メニュー編集の煩雑さが生まれるというデメリットがありました。
この場合、グローバルメニューの項目を変更する場合に画像を再作成する必要がある他、メニュー項目の追加があった場合には、各画像の横幅などを調整しなければならないなど修正において不便な点がたくさんあります。
現代では、CSSによるグラデーション表現やWebフォントも充実し、グローバルメニュー用に画像ボタンを作成しなくてもある程度美しいメニューを作成することが可能です。
スマートフォン表示との兼ね合い、汎用性の面からも、管理画面内で編集操作できるグローバルメニューに切り替えた方が運用の面では楽になります。
こうした変更しにくい「画像で作成されたグローバルメニュー」を廃止し、管理画面から編集可能なグローバルメニューを設置するカスタマイズにも対応可能です。
グローバルメニューのモバイルフレンドリー化
WordPressのグローバルメニューがモバイルフレンドリー対応していない場合、WordPressテーマの編集によって、モバイルフレンドリー化するカスタマイズも可能です。
PC閲覧では問題のないWordPressサイトであっても、モバイル閲覧の際に、表示面積が大きすぎたりと、スマホユーザーの操作性が悪いケースや、グローバルメニュー内のに設置した画像リンクやテキストリンクの「リンクの距離」が近すぎたりと、モバイルフレンドリーサイトとして適していない場合に、こうしたグローバルメニューに関する問題をWordPressカスタマイズによって対応させていただくことが可能です。
スマートフォン用グローバルメニューの新規設置
WordPressグローバルメニューのモバイルフレンドリー表示
また、グローバルメニューのモバイルフレンドリー化にあたり、WordPressテーマの仕様が複雑で新規グローバルメニューの設置が必要になり、カスタマイズ価格が高額になる場合、モバイル端末用グローバルメニューを新規設置させていただき対応させていただくケースがあります。
スマートフォン用のグローバルメニューの新規設置、もしくは、PC用のグローバルメニューの仕様変更によってメニューをスマートフォン対応にカスタマイズさせていただいております。
スマートフォン対応していないメニューをレスポンシブ化する場合、横並びのメニューの場合は縦に間延びしたメニューになってしまいます。
そうした仕様であっても理論上はモバイルフレンドリーサイトになりますが、ユーザーにとっては扱いにくく、見栄えの悪いWebデザインになってしまいます。
「タップしてオープン」といった一般的なスマホ用メニューを新設し、PC版のメニューとスマホ版のメニューをそれぞれの端末で個別に表示できるにようにします。
こうしたカスタマイズは、モバイルフレンドリー化サービスと合わせてよくご利用いただいております。
メニュー項目の名称変更に対応する仕様へとカスタマイズ
さらに、スマートフォン用メニューを含め、WordPressサイトのグローバルメニューに表示するメニュー項目の名称変更に柔軟に対応できるようにするためには、画像ベースのメニューをテキストベースのメニューへと変更する必要があります。
メニュー項目が画像で作成されていた場合、項目名称の変更の際には、「画像の再作成→適用」という施策が必要になり、「文字入れがなされていない背景画像」が手元にないと修正が困難になる他、特殊フォントを使用していた場合は、周りのメニューとの整合性が取れない場合が出てきます。
メニュー項目の変更のしやすさの重要性
SEOなどを実施する場合、メニュー項目の変更や名称変更を柔軟に行えるようにしておくに越したことはありません。またSEOに力を入れていなくても、業務内容の変更などがあった場合にメインメニューの変更を行う必要が出てくる可能性は、どの企業にも存在します。
こうしたメニュー項目が画像で設置されているタイプのグローバルメニューを「背景画像とテキスト」で表示するタイプのグローバルメニューへと変更するカスタマイズにも対応しております。
こうしたメニューのカスタマイズを行っておくことで、「画像作成の手間を省き、メニュー文字入力だけで変更できる」という仕様に変化します。
なお、この場合は、WordPress管理画面のメニュー設定からカスタムメニュー設定を行っていただけるようになります。
WordPressサイトのグローバルメニューの新規設置、グローバルメニューのカスタマイズ、メニューのモバイルフレンドリー化、スマートフォン用メニューの新設などをお求めの場合は、ぜひ弊社までお問い合わせください。
ユーザーの認知負荷を下げるナビゲーション設計の心理学
Webマーケティングにおいて、グローバルメニューは単なる「リンクの羅列」ではありません。それは、初めてサイトを訪れたユーザーに対して、「このサイトには何があり、何ができるのか」を瞬時に伝えるためのコミュニケーションツールです。
私たちは、メニュー項目の選定において「マジックナンバー（認知の限界数）」を意識します。一般的に、短期記憶で保持できる数は「7±2」と言われてきましたが、現代のWeb閲覧環境においては「5つ前後」が最適とされています。あまりに多くの項目を並べすぎると、ユーザーは選択のパラドックスに陥り、結局どれもクリックしないという結果になります。
項目の並び順にも戦略があります。心理学的な「初頭効果」と「親近効果」により、ユーザーはリストの「最初」と「最後」を最も記憶に残します。したがって、最も重要な「事業内容」を左端に、最もコンバージョンに近い「お問い合わせ」を右端に配置するのが定石です。私たちは、こうした人間工学に基づいた設計を、WordPressのメニュー構造に落とし込みます。
SEOにおける内部リンクジュースの配分装置としての機能
SEOの観点から見ると、グローバルメニューはサイト内の全ページからリンクが張られる、極めて強力な内部リンクのハブです。
Googleのクローラーは、リンクを辿ってサイト内を巡回します。グローバルメニューに含まれるページは、サイト内で最も重要度が高いと判断され、多くの「リンクジュース（評価）」が配分されます。したがって、SEOで順位を上げたい重要ページ（キラーコンテンツ）は、必ずグローバルメニューに含めるべきです。
しかし、注意点があります。ドロップダウンメニューなどで過剰にリンクを詰め込みすぎると、1ページあたりの発リンク数が膨大になり、リンクジュースが希釈されてしまいます。私たちは、サイトの規模とクロールバジェットを考慮し、グローバルメニューに置くべきリンクと、フッターやサイドバーに回すべきリンクを厳密に選別します。この「リンク構造の設計」こそが、強いドメインを作るための基礎工事となります。
Walker_Nav_Menu クラスによるHTML構造の完全制御
技術的な側面、特にマークアップの自由度において、WordPress標準の wp_nav_menu() 関数だけでは限界があります。デフォルトでは ul や li タグに大量のクラスが付与され、HTMLが肥大化したり、独自のCSSフレームワーク（BootstrapやTailwind CSSなど）との親和性が悪かったりします。
ここでトップエンジニアが使用するのが、Walker_Nav_Menu クラスの継承と拡張です。これはWordPressがメニューのHTMLを生成する際の「設計図」にあたるクラスです。
このクラスをオーバーライド（上書き）することで、出力されるHTMLタグを完全にコントロールできます。例えば、BEM（Block Element Modifier）記法に基づいたクリーンなクラス名を付与したり、li タグの中に説明文用の span タグを追加したり、アイコンフォントのタグを自動挿入したりすることが可能になります。デザインの再現性を100%にし、かつソースコードを美しく保つために、私たちはこのWalkerクラスを駆使してメニューを実装します。
メガメニューの実装と階層構造の視覚化
大規模なコーポレートサイトやECサイト（ホームページ）では、情報の階層が深く、単純なドロップダウンだけでは全体像を伝えきれない場合があります。そこで採用されるのが「メガメニュー」です。
メガメニューとは、メニュー項目にマウスを乗せた際、画面幅いっぱいに大きなパネルが展開し、その中に第2階層、第3階層のリンクだけでなく、特集記事のサムネイル画像や、キャンペーンバナー、簡単な説明文などを表示するUIです。
これをWordPressで実装するには、高度なカスタマイズが必要です。管理画面のメニュー設定において、通常の親子関係だけでなく、メガメニュー用のカスタムフィールドを追加し、「この項目はメガメニューとして表示する」「背景画像にはこれを使う」といった設定ができるようにバックエンドを拡張します。フロントエンドでは、CSSとJavaScriptを用いて、展開時のアニメーションや、意図しない閉塞を防ぐためのマウス操作の遅延処理（ホバーの待機時間調整）などを緻密に調整します。
レスポンシブ対応とハンバーガーメニューの最適解
スマートフォンにおけるナビゲーション設計は、PCとは全く異なるアプローチが必要です。画面領域が限られているため、一般的には「ハンバーガーメニュー（三本線アイコン）」が採用されます。
しかし、ただハンバーガーメニューの中に全てを押し込めば良いというわけではありません。ユーザーにとって「メニューを開く」というワンタップは、心理的なコストがかかります。
私たちは、スマホ版においては「ヘッダーメニュー」と「ドロワーメニュー（開閉式メニュー）」、そして画面下部の「フッター固定バー（タボバー）」を組み合わせたハイブリッドな設計を提案します。最も重要な「電話」や「LINE予約」などはフッター固定バーに常に表示させ、回遊のためのリンクはドロワーメニューに格納する。そして、WordPressの wp_is_mobile() 関数やCSSメディアクエリを使って、デバイスごとに最適なメニュー構造が出力されるように制御します。
アクセシビリティ（WAI-ARIA）への準拠とキーボード操作
公共性の高いサイトや、グローバルな事業を展開する企業にとって、Webアクセシビリティ（a11y）への対応は必須です。マウスを使えないユーザーや、視覚障がいを持つユーザーが、スクリーンリーダーやキーボード操作だけでメニューを操作できるようにする必要があります。
プロフェッショナルな実装では、WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）の仕様に基づいて属性を付与します。ドロップダウンの親要素には aria-haspopup=”true” と aria-expanded=”false” を、展開されたパネルには role=”menu” などを設定します。
また、JavaScriptを用いて、キーボードの「Tab」キーでフォーカスが移動した際にドロップダウンが自動的に開くようにしたり、「Esc」キーで閉じるようにしたりといった挙動を実装します。見た目だけでなく、構造そのものをユニバーサルな設計にすることで、Googleからの評価向上も期待できます。
wp_get_nav_menu_items フックによる動的メニュー生成
WordPressのメニューは基本的に管理画面で静的に設定するものですが、事業の状況に合わせて動的にメニュー項目を変えたいという要望もあります。
例えば、「ログインしている会員ユーザーには『マイページ』を表示し、ログアウトしているユーザーには『新規登録』を表示する」といったケースです。あるいは、「今週のキャンペーン商品」という項目を自動的にメニューに追加したい場合もあります。
私たちは、wp_get_nav_menu_items フィルタフックを使用して、メニューデータがデータベースから取得された直後に割り込み処理を行います。PHPのプログラムによって条件分岐を行い、動的に項目を追加・削除・書き換えを行います。これにより、運用担当者が毎回手動でメニューを更新する手間を省き、常にユーザーの状態に合わせた最適なナビゲーションを提供できます。
パフォーマンスチューニングとメニューのキャッシュ戦略
メニュー構造が複雑になればなるほど、データベースへのクエリ回数は増え、HTML生成の負荷が高まります。特にメガメニューや動的生成を行う場合、ページ表示速度への影響は無視できません。
そこで重要になるのが「メニューのキャッシュ化」です。WordPressのTransient APIを利用して、生成されたメニューのHTMLを一時的にデータベースやオブジェクトキャッシュに保存します。
2回目以降のアクセスでは、重い生成処理をスキップしてキャッシュされたHTMLをそのまま出力するため、ミリ秒単位での高速化が実現できます。もちろん、管理画面でメニューが更新された際には、自動的にキャッシュをクリアするフック（wp_update_nav_menu）もセットで実装し、情報の鮮度とパフォーマンスを両立させます。
スクロール追従（Sticky Header）とCLS対策
ユーザーがページをスクロールしても、メニューが画面上部に固定されて追従する「スティッキーヘッダー」は、ユーザビリティ向上に有効です。いつでも他のページへ移動できる安心感を与えるからです。
しかし、実装方法を誤ると、Core Web Vitalsの指標であるCLS（Cumulative Layout Shift：視覚的な安定性）を悪化させる原因になります。スクロールした瞬間にヘッダーの高さが変わったり、コンテンツがガクッとずれたりするのはご法度です。
私たちは、CSSの position: sticky; プロパティを適切に使用し、JavaScriptによるクラスの切り替えと組み合わせて、滑らかで安定した追従動作を実装します。また、ページ内リンクをクリックした際に、固定ヘッダーの高さ分だけスクロール位置をずらす処理（オフセット調整）も忘れずに行います。これもCSSの scroll-padding-top プロパティを活用することで、モダンブラウザにおいてスムーズな挙動を実現します。
現在地表示（カレント表示）のスタイリングとパンくずとの連動
ユーザーが「今、サイトのどこにいるのか」を直感的に理解できるように、現在表示しているページに対応するメニュー項目を目立たせる「カレント表示」は基本中の基本です。
WordPressは自動的に current-menu-item や current-menu-ancestor（親階層）といったクラスを出力してくれます。私たちはこれらに対してCSSでスタイルを当てるだけでなく、より深い階層にいる場合でも、どのメインセクションに属しているかがわかるように設計します。
これは「パンくずリスト」と密接に関係しています。グローバルメニューの構造とパンくずリストの階層構造が一致していることは、ユーザーにとっても検索エンジンにとっても、サイト構造を理解する上で非常に重要です。私たちはテーマ開発において、この両者の整合性が取れるように設計を行います。
アイコンやバッジによる視覚的訴求の強化
テキストだけのメニューは質実剛健ですが、少し味気ない場合もあります。「NEW」や「SALE」といったバッジをつけたり、項目の横にアイコンを表示したりすることで、視認性とクリック率を高めることができます。
管理画面のメニュー設定にある「CSSクラス」や「説明」フィールドを活用し、そこにアイコンフォントのクラス名などを入力できるようにします。さらに高度なカスタマイズでは、カスタムフィールドを追加して、画像アイコンをアップロードできるようにしたり、バッジの色を選択できるようにしたりします。
デザインのアクセントとしてだけでなく、ユーザーの視線を誘導するためのマーケティングツールとして、メニューの装飾機能を拡張します。
グローバルメニューのカスタマイズ
グローバルメニューのカスタマイズは、ホームページ制作において最も工数をかけ、知恵を絞るべきポイントの一つです。それはサイトの顔であり、案内人であり、最強のSEOツールでもあります。
標準の機能をそのまま使うだけでは、あなたの事業の独自性や魅力を十分に伝えることは難しいかもしれません。ユーザー心理に基づいた設計、SEOを意識した構造化、そして最新技術による快適な操作性。これらが融合して初めて、成果を生み出すナビゲーションが完成します。
あなたのサイトのメニューは、ユーザーを正しく導けているでしょうか？ もし改善の余地を感じるなら、ぜひ株式会社ファンフェアファンファーレにご相談ください。世界標準の技術と視点で、あなたのサイトの「背骨」を強固なものへと再構築いたします。
