WordPressのハンバーガーメニュー作り方と直し方！デザインのコツもご紹介

WordPressでサイトを作っていて、スマホで見たときに「ハンバーガーメニューが出ない」「タップしても開かない」と困っていませんか。

この記事では、その原因を整理しながら、ハンバーガーメニューの作り方と直し方を分かりやすく解説します。

WordPressのハンバーガーメニューとは？基本とメリット

ハンバーガーメニューがよく使われる理由

ハンバーガーメニューは、三本線のアイコンをタップするとナビが開く、スマホではおなじみのメニューです。

横幅の狭い画面でもヘッダーをスッキリ見せられるので、今のWebサイトではほぼ標準と言っていいレベルで使われています。

通常のメニューと、ハンバーガー型のメニューを比べるとイメージしやすいです。

項目	通常メニュー（PC向き）	ハンバーガーメニュー（スマホ向き）
表示方法	文字リンクが横一列に並ぶ	アイコンをタップするとメニューが開く
占有スペース	ヘッダーの横幅を大きく使う	アイコン1つ分で済む
向いているケース	情報量が多いPCサイト	スマホ・タブレット中心のサイト
見た目	一目で項目が見える	スッキリしたミニマルな印象

WordPressのテーマやナビゲーションブロックでは、このハンバーガー型のメニュー表示に標準で対応しているものが多く、難しいコードを書かなくても導入できるようになっています。

WordPressでハンバーガーメニューが重要になる場面

私がサイト制作の相談を受けていると、ハンバーガーメニューがとくに重要になるのは次のようなケースが多いです。

こうしたサイトでメニューが分かりにくいと、ユーザーはすぐ戻るボタンを押してしまいます。

逆に、迷わず使えるハンバーガーメニューを用意しておくと、次に読んでほしい記事やコンバージョンにつながるページへ、自然と案内しやすくなります。

WordPressのハンバーガーメニューの3つの実装パターン

3つの実装方法をざっくり比較

大きく分けると、次の3パターンがあります。

• テーマの標準機能で作る
• プラグインで作る
• HTML＋CSS＋JavaScript（jQueryなど）で自作する

それぞれの特徴をざっくりまとめると、こんなイメージです。

実装方法	難易度	向いている人・サイト
テーマ標準機能	低い	初めてWordPressサイトを作る人、手早く形にしたい人
プラグイン	中くらい	デザインや動きを細かく調整したい人
コードで自作	高い	コードに慣れていて完全に自由なメニューを作りたい人

最近のWordPressでは、ナビゲーションブロックに折りたたみメニューやオーバーレイメニューの設定が用意されているので、まずはこの標準機能から試してみるのがおすすめです。

テーマ標準機能で作るパターン

最初に試してほしいのが、今使っているテーマだけでハンバーガーメニューを出す方法です。

多くのテーマでは、次のような流れでスマホ用メニューを設定できます。

• 外観 → メニューで、メニューを作成する
• 「モバイルメニュー」「スマホメニュー」などの位置に、そのメニューを割り当てる
• カスタマイザーやテーマ専用の設定画面で、ヘッダーのレイアウトやハンバーガー表示をオンにする

これだけで、スマホ幅では自動的にハンバーガーメニューに切り替わるテーマも多いです。

PC用メニューとスマホ用メニューを分けられるテーマもあるので、スマホでは項目数を少し絞ってスッキリ見せるようにすると使いやすくなります。

プラグインで作るパターン

テーマ標準のハンバーガーメニューだと、デザインやアニメーションが物足りないと感じることもあります。その場合は、専用のメニュープラグインを入れて、モバイル用のナビゲーションだけをパワーアップする方法が便利です。

プラグインによっては、メガメニュー、アイコン付きメニュー、複数メニュー切り替えなど、高度な機能をコードなしで使えるようになります。

コードで自作するパターン

プラグインに頼らず、自分でHTMLとCSS、JavaScriptを書いてハンバーガーメニューを実装する方法もあります。

自由度はいちばん高いですが、表示崩れやスクリプトのエラーが出たときは自分で原因を追いかける必要があるので、中級者以上向けです。

オリジナルデザインのテーマを作りたい人や、既存テーマの仕様に縛られたくない人には向いているやり方です。

テーマ機能でWordPressのハンバーガーメニューを設定する手順

クラシックテーマでの基本操作

Cocoonのようなクラシックテーマでは、管理画面のメニュー設定とテーマ設定を組み合わせて、スマホ用メニューを作ることが多いです。

基本的な流れは次のような感じです。

テーマによっては、スマホ用に別メニューを登録できるものもあります。

スマホでは「サービス」「料金」「アクセス」「お問い合わせ」など、厳選したリンクだけを入れて、迷わない構成にすると使いやすいです。

ブロックテーマとナビゲーションブロックの設定

ブロックテーマでは、サイトエディターでヘッダーのテンプレートを開き、ナビゲーションブロックを使ってメニューを作ります。

ナビゲーションブロックには、ハンバーガーメニューとオーバーレイメニューに関する設定がいくつか用意されています。

ブロックの設定パネルをよく見ると、メニューの開き方や閉じ方、配置などを細かく調整できるので、一度触りながら確認しておくと後々のカスタマイズがとても楽になります。

代表的な日本語テーマのハンバーガーメニュー事情

日本語テーマの中には、ハンバーガーメニュー周りをかなり作り込んでくれているものもあります。

テーマ例	ハンバーガーメニューの特徴	補足ポイント
Lightning系	ナビゲーションブロックと組み合わせたオーバーレイメニューに対応	ヘッダーのレイアウトやメニュー位置を細かく調整しやすい
unitone	オーバーレイメニューをテンプレートパーツとして差し替えられる	メニューの中身をブロックで自由に組み立てられる
Emanonなど	スマホのハンバーガーメニューを固定表示にする設定を用意しているテーマもある	オーバーレイとの組み合わせ方など、テーマ独自の仕様はマニュアルも要チェック

自分のテーマ名と「ハンバーガーメニュー」「スマホメニュー」といったキーワードで検索すると、公式マニュアルや解説記事が出てくることが多いので、一度目を通しておくと安心です。

プラグインでWordPressのハンバーガーメニューを作る方法

プラグインで実装するメリット・デメリット

プラグインを使うと、コードを書かなくても、かなりリッチなハンバーガーメニューを作れるようになります。

一方で、読み込むCSSやJavaScriptが増えるぶん、入れすぎると表示速度に影響することもあります。

観点	メリット	デメリット
デザイン	テンプレートやアニメーションが豊富	テーマと雰囲気が合わない場合がある
機能	メガメニューやアイコン付きメニューなど高機能	設定項目が多く、慣れるまで時間がかかる
パフォーマンス	コードを書かずに高度な表現ができる	プラグインの数が増えるほど読み込みが重くなりやすい

「とりあえず便利そうだから」とプラグインを追加し続けると、あとからトラブルの原因になりやすいので、本当に必要な機能だけを選ぶのがポイントです。

おすすめハンバーガーメニュープラグイン5選

国内外の解説でよく名前が挙がる、代表的なプラグインを5つだけピックアップしておきます。

プラグイン名	特徴	向いているサイト
Max Mega Menu	無料版でも多機能なメガメニュー。ドラッグ＆ドロップでメニューを組める。	コンテンツ量の多いブログや企業サイト
Responsive Menu	コーディング不要で、モバイル用ハンバーガーメニューを細かくデザインできる。	スマホ表示を重視したサイト全般
WP Mobile Menu	モバイル専用メニューに特化。ECサイトなどでも使いやすい。	ネットショップや会員制サイト
WP Responsive Menu	シンプルな設定で、短時間でモバイルメニューを用意できる。	小規模サイトや個人ブログ
Superfly	サイドからスッと出てくる縦型メニューが得意。	デザイン性を重視したサイト

迷ったときの目安としては、「長く使うメインのナビを作りたいならMax Mega Menu」「モバイル用メニューだけ手軽に追加したいならResponsive MenuかWP Mobile Menu」と覚えておくと選びやすいです。

代表例：Max Mega Menuの導入の流れ

ここでは例として、Max Mega Menuを使ってハンバーガーメニューを導入する大まかな流れをイメージしておきます。

実際の項目名はテーマや言語設定によって少し違いますが、「メニューを作る → プラグインに紐づける → モバイル表示の挙動を決める」という流れは、どのメニュープラグインでも基本的に同じです。

コードでWordPressのハンバーガーメニューを自作するときのポイント

HTMLとCSSで作る基本構造

ハンバーガーメニューの構造自体は、それほど複雑ではありません。

• ハンバーガーアイコン用の要素（buttonやdivなど）
• メニューの中身となるリスト（ulとli）
• 「開いている状態」「閉じている状態」を切り替えるためのクラス

CSS側では、例えば次のような考え方で組み立てます。

• 三本線アイコンは、1つの要素に::beforeと::afterの疑似要素を使って描く
• 最初はメニューを非表示にしておき、「開いている状態」のクラスが付いたときだけ表示する
• スマホ幅では、メニューを画面いっぱいに広げて、オーバーレイ風に見せる

最初はサンプルコードを写経する形でもいいので、「どのクラスが何の役割を持っているか」だけは自分の言葉で説明できるようにしておくと、あとからの調整がぐっと楽になります。

JavaScriptで開閉させるときの注意点

開閉のアニメーションなどは、JavaScriptやjQueryで制御することが多いです。

書き方はいろいろありますが、トラブルを減らすために、次のようなことを意識すると安定しやすいです。

• クリックイベントを設定する要素を1つに決める（アイコンやボタンなど）
• クリックされたら「開いている状態のクラス」を付け外しするだけに処理をシンプルにする
• メニューを開いている間は、bodyに専用クラスを付けて、背景のスクロールを止める
• 閉じるボタンやオーバーレイの背景をタップしたときもメニューが閉じるようにしておく

複数のスクリプトが同じ要素を操作すると、動きがちぐはぐになりがちです。

どのコードがどのクラスを制御しているのか、紙やメモアプリに書き出して整理してから実装すると、デバッグの手間をかなり減らせます。

WordPressテーマへの組み込みのコツ

作ったハンバーガーメニューをWordPressテーマに組み込むときは、次のような点も意識しておきたいところです。

• メニューの中身は、wp_nav_menu() またはナビゲーションブロックで出力する
• 子テーマを作り、header.phpやテンプレートパーツにHTMLを追加する
• functions.phpでスクリプトやスタイルを読み込むときは、jQueryなどの依存関係を指定する

もともとテーマ側にもモバイルメニュー用のスクリプトが入っている場合は、両方が同時に動かないように、片方を無効にするか、条件分岐で出し分けるようにしましょう。

デザインとUXで差がつくハンバーガーメニューの作り方（WordPress）

タップしやすさとレイアウト

スマホで触るメニューなので、まずは「指で押しやすいかどうか」が大事です。

ナビゲーションブロックやテーマ設定によっては、オーバーレイメニューの配置や余白を細かく調整できるので、実際にスマホで触りながら最適な位置を探してみてください。

メニュー構成と導線設計

ハンバーガーメニューの中身は、「どのページに行ってほしいか」を意識して並べ替えるのがコツです。

• 最初の3〜5項目は、サイトのゴールに直結するページを置く
• 階層は深くしすぎず、2階層くらいまでにとどめる
• お問い合わせや予約、資料請求などはボタン風にして目立たせる

例えばコーポレートサイトなら「サービス」「料金」「実績」「会社概要」「お問い合わせ」、ブログなら「カテゴリ」「人気記事」「プロフィール」「お問い合わせ」といった構成が典型的です。

アクセス解析を見ながら、ユーザーがよく見ているページや、もっと見てほしいページをメニューの上のほうに持ってくるのもおすすめです。

アクセシビリティとSEOのちょっとした気配り

ハンバーガーメニューは、アクセシビリティやSEOとも少し関係してきます。

WordPressのナビゲーションブロックは、こうしたアクセシビリティ面を考慮した作りになっているので、できるだけ標準機能を活かしながらデザインを整えると安心です。

ハンバーガーメニューが表示されない・崩れるときの対処法（WordPress）

よくあるトラブル原因とチェック表

ハンバーガーメニュー周りで起きやすい症状と、よくある原因、最初に確認したいポイントを表にしました。

症状	主な原因の例	まず試したいこと
アイコン自体が表示されない	テーマのモバイルメニュー設定がオフ、メニューが割り当てられていない	テーマ設定とメニューの割り当てを見直す
アイコンはあるが開かない	JavaScriptエラー、プラグイン同士の競合	ブラウザのコンソールと、プラグインの一時停止で切り分ける
開くがレイアウトが崩れる	テーマやブロックの仕様変更、独自CSSの影響	追加CSSを一度コメントアウトし、素の状態で崩れないか確認する
スマホでだけ挙動がおかしい	ブレイクポイントやモバイル専用設定のミス	表示条件を見直し、キャッシュをクリアしてから確認する

WordPress本体やテーマのアップデートで、ナビゲーションブロックのHTML構造が変わることがあります。

その場合は、ハンバーガーメニュー用に書いていたCSSが今の構造に合っているかを、一度見直してみてください。

テーマ・プラグインを疑う前にやること

トラブルが起きると、つい「テーマが悪いのかな」「プラグインが重いのかな」と考えがちですが、その前に確認しておきたいポイントがあります。

• ブラウザのシークレットウィンドウや別の端末で表示してみる
• キャッシュ系プラグインの機能を一時的にオフにする
• JavaScriptやCSSの圧縮・結合などの最適化機能を一度切ってみる
• 最近追加したコード（functions.phpや追加CSS）を一時的にコメントアウトする

これだけでも、キャッシュや最適化が原因なのか、コードやテーマ側の問題なのか、かなり切り分けられるようになります。

それでも直らないときの相談先

ひと通り試してもハンバーガーメニューが直らない場合は、無理に自己流でいじり続けず、どこかに相談してみるのも大事です。

• 使っているテーマの公式サポートや販売元
• プラグインのサポートページ
• WordPressのフォーラムやコミュニティ

そのときには、次の情報をメモにまとめておくとやり取りがスムーズです。

• 使っているテーマ名とバージョン、おおまかな構成
• 使っているメニュープラグインの名前
• どの画面サイズで問題が出ているか（PC・タブレット・スマホ）
• どの操作をしたときに、どんな不具合になるか

ここまで整理してから相談すると、原因の特定も早くなり、無駄な作業も減らせます。

よくある質問（WordPressのハンバーガーメニュー編）

Q1. ハンバーガーメニューはSEO的に不利になりませんか？

A. ハンバーガーメニューという仕組みそのものが、直接SEOにマイナスになることは基本的にありません。

大事なのは、WordPressのハンバーガーメニューの中に、ユーザーが本当に必要としているページへのリンクをきちんと用意できているかどうかです。

内部リンクが増えて回遊しやすくなり、スマホでも迷わず目的のページに行けるのであれば、むしろプラスに働くこともあります。

Q2. PCでもハンバーガーメニューにしたほうがいいですか？

A. サイトのデザインやターゲットによりますが、多くの場合は「PCでは通常メニュー、スマホではハンバーガーメニュー」という構成がいちばん分かりやすいです。

ナビゲーションブロックやテーマの設定では、「常にハンバーガー表示にする」「モバイルだけハンバーガーにする」といった切り替えができるものも多いので、アクセスが多いデバイスやユーザー層に合わせて選びましょう。

Q3. プラグインとテーマ機能、どちらを優先して使うべきですか？

A. 基本の考え方としては、「テーマ機能を優先し、どうしても足りない部分だけプラグインで補う」のがおすすめです。

テーマの標準機能は、WordPress本体のアップデートやテーマの更新に合わせて調整されることが多く、長期的な運用がしやすいからです。

テーマで満たせる範囲はテーマだけで完結させ、それでも足りなければプラグイン、それ以上のこだわりが出てきたらコードで自作、という順番で考えると失敗しにくくなります。

まとめと、WordPressのハンバーガーメニューで最初にやること

この記事の要点を簡単に整理します

今日できる最初の一歩としては、「今使っているテーマだけで、スマホ用のハンバーガーメニューをどう設定できるか」を10分だけ触って確認してみてください。

そのうえで、足りないところが見えてきたら、この記事を手がかりにプラグインやコードカスタマイズを少しずつ足していけば、迷子になりにくく、使い勝手のいいメニューに育てていけます。