WordPressハンバーガーメニューの作り方と表示されない時の直し方【初心者向け】

はじめに

WordPressサイトをスマホで見たとき、画面右上や左上に表示される三本線のメニューを「ハンバーガーメニュー」と呼びます。限られたスマホ画面でも、固定ページやカテゴリー、お問い合わせページなどへスムーズに移動できるため、多くのWordPressテーマで標準的に使われています。

しかし、いざ設定してみると「ハンバーガーメニューが表示されない」「タップしても開かない」「スマホでは見えるのにPC表示が崩れた」といったトラブルが起きることもあります。

この記事では、WordPressでハンバーガーメニューを作る方法から、表示されない時の原因と直し方、使いやすくするデザインのコツまで、初心者向けに分かりやすく解説します。

1. WordPressのハンバーガーメニューとは？初心者向けに基本を解説

1-1. ハンバーガーメニューとはスマホ表示で使われる三本線メニューのこと

ハンバーガーメニューとは、三本線のアイコンをタップすると開くメニューのことです。三本線がハンバーガーのように見えることから、この名前で呼ばれています。

WordPressサイトでは、スマホ表示のヘッダー部分に設置されることが多く、タップすると以下のようなメニュー項目が表示されます。

ホーム
プロフィール
サービス内容
ブログカテゴリー
お問い合わせ
会社概要

スマホ画面はPCに比べて横幅が狭いため、すべてのメニューを常に表示すると画面が見づらくなります。そこで、普段は三本線アイコンだけを表示し、必要な時だけメニューを開く仕組みが使われます。

1-2. WordPressサイトでハンバーガーメニューが必要な理由

WordPressサイトでハンバーガーメニューが必要な主な理由は、スマホユーザーにとってサイト内を移動しやすくするためです。

スマホで記事を読んでいるユーザーが「運営者情報を見たい」「他のカテゴリーの記事も読みたい」「お問い合わせしたい」と思った時、メニューが分かりやすい場所にないと離脱につながる可能性があります。

特にブログ、企業サイト、店舗サイト、ポートフォリオサイトでは、ハンバーガーメニューを整えておくことで、ユーザーが目的のページへ迷わず移動しやすくなります。

また、WordPressではテーマやプラグインを使えば、専門知識が少なくても比較的簡単にハンバーガーメニューを導入できます。

1-3. グローバルメニュー・ドロワーメニュー・スマホメニューとの違い

ハンバーガーメニューと似た言葉に、グローバルメニュー、ドロワーメニュー、スマホメニューがあります。それぞれの違いを整理しておきましょう。

グローバルメニューは、サイト全体で共通して表示される主要なナビゲーションメニューです。PC表示ではヘッダーに横並びで表示されることが多く、サイトの主要ページへ移動する役割があります。

ドロワーメニューは、画面の横や上からスライドして表示されるメニューのことです。ハンバーガーメニューをタップした時に、横から出てくるメニューがドロワーメニューです。

スマホメニューは、スマホ表示用に用意されたメニュー全般を指します。ハンバーガーメニューもスマホメニューの一種と考えると分かりやすいです。

つまり、WordPressのハンバーガーメニューは「スマホ向けに表示される、三本線アイコンで開閉するナビゲーションメニュー」と理解しておけば問題ありません。

1-4. ハンバーガーメニューを導入する前に確認すべきこと

ハンバーガーメニューを作る前に、まずは現在使っているWordPressテーマがモバイルメニューに対応しているか確認しましょう。

多くの有料テーマや人気の無料テーマでは、スマホ表示時に自動でハンバーガーメニューへ切り替わる機能が用意されています。この場合、コードを編集しなくても、管理画面からメニューを設定するだけで表示できます。

確認すべきポイントは以下です。

使用中のテーマにモバイルメニュー機能があるか
WordPress管理画面の「外観」に「メニュー」があるか
サイトエディター対応テーマかどうか
スマホ用メニューの表示位置が用意されているか
すでにプラグインでメニュー機能を追加していないか

テーマ機能で対応できる場合は、まずテーマの設定を使うのがおすすめです。余計なプラグインやコードを追加せずに済むため、トラブルが少なくなります。

2. WordPressでハンバーガーメニューを作る3つの方法

2-1. テーマ機能を使って作る方法

もっとも簡単なのは、WordPressテーマに用意されているメニュー機能を使う方法です。

Cocoon、SWELL、Lightning、Snow Monkey、JIN、SANGOなど、多くのテーマではスマホ用のメニュー表示に対応しています。管理画面からメニューを作成し、表示位置を「スマホメニュー」「モバイルメニュー」「ヘッダーメニュー」などに設定すれば、スマホ表示でハンバーガーメニューが表示されます。

テーマ機能を使うメリットは、デザインがテーマ全体と自然になじみやすいことです。また、テーマ側でレスポンシブ対応がされているため、初心者でも扱いやすい方法です。

2-2. プラグインを使って作る方法

テーマにハンバーガーメニュー機能がない場合や、より細かくデザインを変更したい場合は、プラグインを使う方法があります。

ハンバーガーメニュー用のプラグインを使うと、メニューの表示位置、背景色、文字色、開閉アニメーション、アイコンの位置などを管理画面から設定できます。

ただし、プラグインを増やしすぎると表示速度に影響したり、テーマや他のプラグインと競合したりする場合があります。導入する場合は、必要な機能が揃っていて、更新が継続されているプラグインを選びましょう。

2-3. HTML・CSS・JavaScriptで自作する方法

HTML、CSS、JavaScriptを使って、ハンバーガーメニューを自作することもできます。

自作する場合は、ボタンの見た目や開閉アニメーション、表示条件を自由に調整できます。テーマに依存しにくく、細かいデザインにも対応しやすいのがメリットです。

一方で、コード編集には注意が必要です。テーマファイルを直接編集すると、テーマ更新時に変更内容が消える可能性があります。また、JavaScriptのエラーがあるとメニューが開かなくなることもあります。

初心者の場合は、いきなり本番サイトで編集せず、子テーマやテスト環境を使うようにしましょう。

2-4. 初心者におすすめの作り方はテーマ機能かプラグイン

初心者におすすめなのは、まずテーマ機能を使う方法です。現在のテーマにスマホメニュー機能があるなら、管理画面から設定するだけで十分なケースがほとんどです。

テーマ機能で希望通りにできない場合は、次にプラグインを検討しましょう。コードで自作する方法は自由度が高いものの、HTML、CSS、JavaScript、WordPressテーマ構造の理解が必要になります。

優先順位としては、以下の順番がおすすめです。

テーマ機能で設定する
足りない機能をプラグインで補う
必要に応じてコードでカスタマイズする

最初から難しい方法を選ぶよりも、まずは安全で簡単な方法から試すことが大切です。

3. テーマ機能でハンバーガーメニューを作る手順

3-1. WordPress管理画面からメニューを作成する

まずはWordPress管理画面にログインし、メニューを作成します。

一般的な手順は以下の通りです。

WordPress管理画面にログインする
「外観」から「メニュー」を開く
「新しいメニューを作成しましょう」をクリックする
メニュー名を入力する
「メニューを作成」をクリックする

メニュー名は管理用なので、サイト上にそのまま表示されるわけではありません。「スマホメニュー」「ヘッダーメニュー」「グローバルメニュー」など、後から分かりやすい名前にしておくと便利です。

ブロックテーマを使用している場合は、「外観」ではなく「外観」内の「エディター」や「ナビゲーション」から設定する場合があります。テーマによって画面が異なるため、使用中のテーマに合わせて確認しましょう。

3-2. メニュー項目に固定ページ・カテゴリー・カスタムリンクを追加する

メニューを作成したら、表示したい項目を追加します。

WordPressのメニューには、主に以下の項目を追加できます。

固定ページ
投稿
カテゴリー
カスタムリンク

たとえば、ブログであれば「ホーム」「プロフィール」「おすすめ記事」「カテゴリー」「お問い合わせ」などを追加すると分かりやすいです。

固定ページを追加する場合は、左側の「固定ページ」から表示したいページにチェックを入れ、「メニューに追加」をクリックします。

カテゴリーを追加する場合は、「カテゴリー」から必要なカテゴリーを選択します。カスタムリンクを使えば、外部サイトや任意のURLもメニューに追加できます。

メニュー項目が多すぎるとスマホ画面で見づらくなるため、重要なページを中心に絞るのがおすすめです。

3-3. メニューの表示位置をスマホメニューに設定する

メニュー項目を追加したら、次に表示位置を設定します。

表示位置には、テーマによって以下のような名前が使われます。

ヘッダーメニュー
グローバルメニュー
スマホメニュー
モバイルメニュー
フッターメニュー
ドロワーメニュー

ハンバーガーメニューとして表示したい場合は、「スマホメニュー」や「モバイルメニュー」に該当する位置へチェックを入れます。

テーマによっては、PC用のグローバルメニューとスマホ用のハンバーガーメニューが同じ表示位置で管理されている場合もあります。その場合は、ヘッダーメニューに設定した内容がスマホ表示では自動的にハンバーガーメニューへ切り替わります。

設定後は、必ず「メニューを保存」をクリックしましょう。保存し忘れると、スマホで確認してもハンバーガーメニューが表示されません。

3-4. カスタマイザーやサイトエディターで表示を確認する

メニューを保存したら、実際にスマホ表示で確認します。

WordPress管理画面の「外観」から「カスタマイズ」を開くと、画面下部や上部にPC・タブレット・スマホ表示を切り替えるアイコンがある場合があります。スマホ表示に切り替えて、ハンバーガーメニューが表示されているか確認しましょう。

ブロックテーマの場合は、サイトエディターでヘッダー部分のナビゲーションブロックを確認します。スマホ表示時にメニューが折りたたまれる設定になっているか、ナビゲーションの配置が正しいかを見てください。

ただし、カスタマイザー上では正常に見えても、実際のスマホでは表示が異なることがあります。最終確認は必ずスマホ実機で行いましょう。

3-5. Cocoon・SWELL・Lightningなど主要テーマでの設定ポイント

Cocoon、SWELL、Lightningなどの主要テーマでは、ハンバーガーメニューに関する設定項目がテーマ独自に用意されています。

Cocoonの場合は、メニュー設定に加えて、Cocoon設定内のモバイル関連項目を確認します。モバイルボタンやヘッダーモバイルメニューの表示設定がオフになっていると、メニューが表示されない場合があります。

SWELLの場合は、管理画面のメニュー設定でグローバルナビやスマホ開閉メニューの位置を確認します。カスタマイザー内のヘッダー設定やスマホメニューのデザイン設定もあわせて確認しましょう。

Lightningの場合は、外観のメニュー設定でヘッダーナビやモバイル用の表示位置を確認します。テーマカスタマイザーのヘッダー設定でナビゲーションが非表示になっていないかも重要です。

テーマごとに名称は異なりますが、基本的には「メニューを作成する」「表示位置を設定する」「テーマ側のヘッダー設定を確認する」という流れは同じです。

4. プラグインでハンバーガーメニューを作る手順

4-1. ハンバーガーメニュー用プラグインを使うメリット・デメリット

プラグインを使うメリットは、コードを書かずにハンバーガーメニューを追加できることです。アイコンの位置、背景色、文字サイズ、開閉アニメーションなどを管理画面から調整できるため、初心者でも扱いやすいです。

また、現在のテーマにスマホメニュー機能がない場合でも、プラグインを使えばハンバーガーメニューを追加できる可能性があります。

一方で、デメリットもあります。プラグインを追加すると、読み込まれるCSSやJavaScriptが増え、表示速度に影響することがあります。また、テーマやキャッシュ系プラグイン、最適化プラグインと相性が悪いと、メニューが表示されない、開かないといったトラブルが起きることもあります。

プラグインは便利ですが、必要最低限に抑えることが大切です。

4-2. おすすめプラグインの選び方

ハンバーガーメニュー用プラグインを選ぶ時は、見た目だけでなく、信頼性や使いやすさも確認しましょう。

選ぶポイントは以下です。

最終更新日が古すぎない
使用中のWordPressバージョンに対応している
有効インストール数が一定数ある
レビュー評価が極端に低くない
設定画面が分かりやすい
不要な機能が多すぎない
レスポンシブ対応している
表示速度への影響が少ない

「高機能そうだから」という理由だけで選ぶと、設定項目が多すぎて初心者には扱いにくい場合があります。まずは、自分が必要としている機能があるかを基準に選びましょう。

4-3. プラグインのインストールと有効化

プラグインを使う場合は、WordPress管理画面からインストールします。

手順は以下の通りです。

WordPress管理画面にログインする
「プラグイン」から「新規追加」を開く
検索欄にメニュー系プラグイン名を入力する
目的のプラグインを見つける
「今すぐインストール」をクリックする
「有効化」をクリックする

有効化すると、管理画面のサイドバーや「設定」内にプラグイン専用の設定項目が追加されることがあります。

プラグインによっては、有効化しただけではメニューが表示されません。メニューの選択、表示位置、表示条件などを設定する必要があります。

4-4. メニューの表示位置・デザイン・開閉アニメーションを設定する

プラグインを有効化したら、ハンバーガーメニューの表示設定を行います。

主に設定する項目は以下です。

使用するWordPressメニュー
アイコンの表示位置
メニューを開く方向
背景色
文字色
アイコン色
メニュー幅
開閉アニメーション
表示する画面幅
PCで表示するかスマホのみ表示するか

スマホ用に使う場合は、PC表示では非表示にし、スマホやタブレットの画面幅だけで表示されるように設定するのが一般的です。

また、メニューが開いた時に背景を暗くするオーバーレイ設定や、閉じるボタンの表示設定がある場合は有効にしておくと、ユーザーが操作しやすくなります。

4-5. プラグイン導入後にスマホで動作確認する

設定が終わったら、必ずスマホ実機で確認しましょう。

確認すべきポイントは以下です。

三本線アイコンが表示されているか
タップするとメニューが開くか
もう一度タップすると閉じるか
各リンクが正しいページへ移動するか
背景や文字色が見やすいか
画面の端に隠れていないか
他のボタンや広告と重なっていないか
PC表示に影響が出ていないか

特にキャッシュ系プラグインを使っている場合、設定を変更してもすぐに反映されないことがあります。変更後はキャッシュを削除し、ブラウザを再読み込みして確認してください。

5. コードでハンバーガーメニューを自作する基本手順

5-1. 子テーマを用意して編集する

コードでハンバーガーメニューを自作する場合は、必ず子テーマを用意しましょう。

親テーマのファイルを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。子テーマを使えば、親テーマの機能を引き継ぎながら、安全にカスタマイズできます。

編集前には、以下を行っておくと安心です。

サイト全体のバックアップを取る
編集するファイルをコピーして保存する
可能ならテスト環境で作業する
FTPやサーバーのファイルマネージャーにアクセスできる状態にしておく

コード編集に慣れていない場合は、少しの記述ミスでも表示崩れやエラーにつながることがあります。作業前のバックアップは必須です。

5-2. HTMLでメニューボタンとナビゲーションを作る

まずは、ハンバーガーメニューのボタンとナビゲーション部分をHTMLで作ります。

基本的な構造は以下のようになります。

HTML
<button class="hamburger" aria-label="メニューを開く" aria-expanded="false">
  <span></span>
  <span></span>
  <span></span>
</button>

<nav class="mobile-nav">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/profile/">プロフィール</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

buttonタグを使うことで、クリック操作だけでなくキーボード操作にも対応しやすくなります。aria-labelやaria-expandedを入れておくと、アクセシビリティ面でも分かりやすいメニューになります。

WordPressのメニュー機能と連携させる場合は、テーマファイル内でwp_nav_menu()を使ってメニューを呼び出す方法もあります。

5-3. CSSで三本線アイコンと開閉メニューをデザインする

次に、CSSで三本線アイコンとメニューの見た目を整えます。

CSS
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 2px;
  background: #333;
  margin: 6px auto;
  transition: 0.3s;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  z-index: 1000;
  padding: 80px 24px 24px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav li {
  margin-bottom: 20px;
}

.mobile-nav a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.mobile-nav.is-open {
  display: block;
}

@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
  }
}

このCSSでは、スマホ幅の時だけハンバーガーボタンを表示し、メニューが開いた時に.is-openクラスを付けて表示する仕組みにしています。

5-4. JavaScriptでクリック時の開閉動作を追加する

HTMLとCSSだけでは、ボタンをタップしてメニューを開閉する動きは作れません。JavaScriptでクリック時の処理を追加します。

JavaScript
document.addEventListener('DOMContentLoaded', function () {
  const hamburger = document.querySelector('.hamburger');
  const mobileNav = document.querySelector('.mobile-nav');

  if (!hamburger || !mobileNav) {
    return;
  }

  hamburger.addEventListener('click', function () {
    const isOpen = mobileNav.classList.toggle('is-open');
    hamburger.setAttribute('aria-expanded', isOpen);
  });
});

このコードでは、ハンバーガーボタンをクリックした時に、メニューへ.is-openクラスを付けたり外したりしています。

DOMContentLoadedを使うことで、HTMLが読み込まれた後にJavaScriptが実行されるようになります。要素が存在しない場合は処理を止めるため、エラーも起きにくくなります。

5-5. レスポンシブ対応でスマホだけに表示する

ハンバーガーメニューは、基本的にスマホ表示で使われることが多いです。PCでは通常の横並びメニューを表示し、スマホではハンバーガーメニューを表示するようにCSSで切り替えます。

CSS
.desktop-nav {
  display: block;
}

.hamburger,
.mobile-nav {
  display: none;
}

@media screen and (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .mobile-nav.is-open {
    display: block;
  }
}

このように設定すれば、PCでは通常メニュー、スマホではハンバーガーメニューという形にできます。

ただし、テーマ側ですでにレスポンシブ対応のCSSが入っている場合、自作CSSと競合することがあります。表示がおかしい時は、既存のメニューCSSと重複していないか確認しましょう。

5-6. コード編集時の注意点とバックアップ方法

コード編集でよくある失敗は、テーマファイルを直接編集して元に戻せなくなることです。

安全に作業するために、以下を守りましょう。

親テーマではなく子テーマを編集する
編集前にバックアップを取る
一度に多くのコードを変更しない
変更後はすぐ表示確認する
エラーが出たら直前の状態に戻す
functions.phpの編集は特に慎重に行う

CSSやJavaScriptの追加だけなら、テーマの追加CSS機能やカスタムJS用プラグインで対応できる場合もあります。ただし、本格的にテーマへ組み込む場合は、子テーマで管理する方が安全です。

不安がある場合は、無理に自作せず、テーマ機能やプラグインを使う方法を選びましょう。

6. WordPressのハンバーガーメニューが表示されない主な原因

6-1. メニューの表示位置が設定されていない

WordPressのハンバーガーメニューが表示されない原因として多いのが、メニューの表示位置が設定されていないケースです。

メニュー項目を作成していても、表示位置にチェックが入っていなければサイト上には表示されません。

「外観」から「メニュー」を開き、作成したメニューが「スマホメニュー」「モバイルメニュー」「ヘッダーメニュー」などに割り当てられているか確認しましょう。

6-2. スマホ用メニューに項目が登録されていない

テーマによっては、PC用メニューとスマホ用メニューが別々に管理されています。

PCではメニューが表示されているのに、スマホのハンバーガーメニューだけ空になる場合は、スマホ用メニューに項目が登録されていない可能性があります。

スマホ用の表示位置に、固定ページやカテゴリーなどのメニュー項目が入っているか確認してください。

6-3. テーマ側のヘッダー設定がオフになっている

テーマ独自の設定で、ヘッダーやモバイルメニューが非表示になっている場合もあります。

たとえば、テーマカスタマイザー内に「モバイルメニューを表示する」「ヘッダーナビを表示する」「スマホヘッダーを有効にする」といった項目がある場合、これがオフになっているとハンバーガーメニューが表示されません。

メニュー設定だけでなく、テーマ側のヘッダー設定もあわせて確認しましょう。

6-4. CSSでメニューが非表示になっている

CSSの指定によって、ハンバーガーメニューが画面上に表示されなくなっていることもあります。

特に確認したいCSSは以下です。

display: none;
visibility: hidden;
opacity: 0;
position
z-index
overflow: hidden;

メニュー自体は存在しているのに見えない場合、CSSで隠れている可能性があります。ブラウザの検証ツールを使って、該当要素にどのCSSが適用されているか確認しましょう。

6-5. JavaScriptやjQueryのエラーで開かない

ハンバーガーメニューが表示されているのに、タップしても開かない場合は、JavaScriptやjQueryのエラーが原因かもしれません。

ハンバーガーメニューの開閉にはJavaScriptが使われることが多く、エラーが発生するとクリックしても反応しなくなります。

ブラウザの検証ツールでConsoleを開き、赤いエラーメッセージが出ていないか確認しましょう。特に、テーマやプラグインの更新後にメニューが開かなくなった場合は、JavaScriptの読み込み順や競合が原因になっていることがあります。

6-6. キャッシュや最適化プラグインが影響している

キャッシュ系プラグインや高速化プラグインが原因で、ハンバーガーメニューが正しく表示されないこともあります。

CSSやJavaScriptを圧縮・結合・遅延読み込みしている場合、メニューに必要なファイルが正しく読み込まれないことがあります。

よくある影響は以下です。

CSSの変更が反映されない
JavaScriptが実行されない
メニューの開閉が動かない
スマホだけ表示が崩れる

設定変更後は、WordPress側のキャッシュ、ブラウザキャッシュ、サーバーキャッシュを削除して確認しましょう。

6-7. プラグイン同士が競合している

複数のプラグインが同じような機能を持っていると、競合が起きる場合があります。

特に、メニュー系プラグイン、キャッシュ系プラグイン、画像最適化プラグイン、JavaScript最適化プラグイン、ページビルダー系プラグインを併用している場合は注意が必要です。

あるプラグインを有効化した後からハンバーガーメニューが表示されなくなった場合、そのプラグインが原因の可能性があります。

6-8. テーマやWordPress本体の更新後に不具合が起きている

WordPress本体、テーマ、プラグインを更新した後に、ハンバーガーメニューが表示されなくなることもあります。

更新によってHTML構造やCSSクラス、JavaScriptの仕様が変わると、以前のカスタマイズが合わなくなる場合があります。

特に自作コードを入れている場合、テーマ更新後に動作しなくなることがあるため、更新前にはバックアップを取り、更新後はスマホメニューの動作を確認しましょう。

7. ハンバーガーメニューが表示されない・開かない時の直し方

7-1. まずスマホ実機とブラウザの検証ツールで確認する

ハンバーガーメニューの不具合を直す時は、まず実際のスマホで確認しましょう。

PCのプレビュー画面では問題なく見えても、スマホ実機では表示が崩れることがあります。iPhone、Android、タブレットなど、可能であれば複数の端末で確認すると安心です。

あわせて、PCブラウザの検証ツールでスマホ表示に切り替え、メニュー要素がHTML上に存在しているか確認します。要素が存在しているのに見えない場合はCSSの問題、要素自体がない場合はWordPressのメニュー設定やテーマ設定の問題である可能性が高いです。

7-2. WordPressのメニュー設定と表示位置を見直す

次に、WordPress管理画面でメニュー設定を確認します。

「外観」から「メニュー」を開き、以下をチェックしてください。

メニューが作成されているか
メニュー項目が登録されているか
表示位置にチェックが入っているか
スマホ用メニューに正しいメニューが割り当てられているか
メニューを保存しているか

意外と多いのが、メニューを作成しただけで表示位置を設定していないケースです。設定後は必ず保存し、スマホで再確認しましょう。

7-3. テーマカスタマイザーのヘッダー・モバイルメニュー設定を確認する

メニュー設定に問題がない場合は、テーマカスタマイザーを確認します。

「外観」から「カスタマイズ」を開き、ヘッダー、メニュー、モバイル、ナビゲーションといった項目を確認しましょう。

チェックしたい項目は以下です。

ヘッダーが非表示になっていないか
モバイルメニューが有効になっているか
ハンバーガーアイコンが表示される設定になっているか
ヘッダーロゴやボタンと重なっていないか
スマホ表示時のレイアウトが崩れていないか

テーマによって設定名が異なるため、「モバイル」「ドロワー」「スマホ」「ナビゲーション」などの名前を探してみてください。

7-4. キャッシュを削除して再読み込みする

設定を変更しても反映されない場合は、キャッシュを削除します。

削除すべきキャッシュは以下です。

WordPressキャッシュプラグインのキャッシュ
ブラウザキャッシュ
サーバーキャッシュ
CDNキャッシュ
テーマ独自のキャッシュ

キャッシュが残っていると、古いCSSやJavaScriptが読み込まれ続けることがあります。

キャッシュ削除後は、スマホのブラウザでページを再読み込みします。シークレットモードや別ブラウザで確認すると、キャッシュの影響を受けにくくなります。

7-5. プラグインを一時停止して競合を確認する

ハンバーガーメニューが開かない場合は、プラグイン競合を確認しましょう。

手順は以下です。

事前にバックアップを取る
キャッシュ系・最適化系プラグインを一時停止する
メニューが表示・開閉するか確認する
問題が解決したら、1つずつプラグインを有効化する
どのプラグインで不具合が再発するか確認する

すべてのプラグインを一度に停止すると、原因が分かりにくくなることがあります。できれば、影響がありそうなものから順番に確認しましょう。

特にJavaScriptを圧縮、結合、遅延読み込みする設定は、ハンバーガーメニューの動作に影響しやすいです。

7-6. CSSのdisplay・visibility・z-indexを確認する

メニューが画面に表示されない場合は、CSSを確認します。

ブラウザの検証ツールでハンバーガーメニューの要素を選択し、以下の指定がないか見てください。

CSS
display: none;
visibility: hidden;
opacity: 0;
z-index: -1;
overflow: hidden;

また、メニューが他の要素の後ろに隠れている場合は、z-indexを調整すると表示されることがあります。

CSS
.hamburger {
  z-index: 1001;
}

.mobile-nav {
  z-index: 1000;
}

ただし、むやみに大きな数値を指定すると、他のポップアップや固定ヘッダーと重なる場合があります。サイト全体のレイアウトを見ながら調整しましょう。

7-7. JavaScriptエラーを確認して修正する

ハンバーガーメニューがタップしても開かない時は、JavaScriptエラーを確認します。

Chromeの場合は、ページ上で右クリックして「検証」を開き、「Console」タブを確認します。赤いエラーメッセージが表示されている場合、JavaScriptのどこかで問題が起きています。

よくある原因は以下です。

jQueryが読み込まれていない
JavaScriptの読み込み順が間違っている
存在しない要素を取得しようとしている
プラグインの圧縮・結合でコードが壊れている
古いコードが現在のテーマに合っていない

初心者の場合、エラー内容を見ても分かりにくいかもしれません。その場合は、直前に追加したコードやプラグインを一度外して、動作が戻るか確認しましょう。

7-8. テーマを一時的に切り替えて原因を切り分ける

メニュー設定やプラグインを確認しても解決しない場合は、テーマが原因かどうかを切り分けます。

一時的にWordPress公式テーマなどへ切り替え、ハンバーガーメニューやメニュー設定が正常に動くか確認します。

ただし、本番サイトでテーマを切り替えるとデザインやウィジェット配置が崩れる可能性があります。できればテスト環境で行うのがおすすめです。

公式テーマでは問題なく動作する場合、使用中のテーマ側の設定、カスタマイズ、テンプレートファイルに原因がある可能性が高いです。

7-9. 解決しない場合はバックアップから復元または専門家に相談する

どうしても解決しない場合は、無理に触り続けるよりも、バックアップから復元するか専門家に相談しましょう。

特に、以下のような場合は注意が必要です。

functions.phpを編集して画面が真っ白になった
管理画面にログインできなくなった
ヘッダー全体が崩れた
複数のプラグインを変更して原因が分からなくなった
売上や問い合わせに影響するサイトで不具合が続いている

バックアップがある場合は、不具合が起きる前の状態へ戻すのが安全です。バックアップがない場合は、サーバー会社の自動バックアップ機能が使えるか確認しましょう。

8. ハンバーガーメニューを使いやすくするデザインのコツ

8-1. メニュー項目は多くしすぎない

ハンバーガーメニューには、重要な項目だけを入れるのが基本です。

メニュー項目が多すぎると、ユーザーが目的のページを見つけにくくなります。特にスマホでは縦に長くなりやすいため、項目数はできるだけ絞りましょう。

おすすめは、5〜7項目程度です。ブログなら「ホーム」「プロフィール」「カテゴリー」「人気記事」「お問い合わせ」など、ユーザーがよく使うページを中心に入れると分かりやすくなります。

8-2. タップしやすいサイズと余白を確保する

スマホでは指で操作するため、メニュー項目のタップしやすさが重要です。

文字が小さすぎたり、項目同士の間隔が狭すぎたりすると、誤タップが増えます。メニューリンクは十分な高さを持たせ、上下に余白を確保しましょう。

目安として、1つのメニュー項目には40px以上の高さを確保すると操作しやすくなります。文字サイズも小さくしすぎず、読みやすい大きさに設定しましょう。

8-3. 開閉状態が分かるアイコンやアニメーションを入れる

ハンバーガーメニューは、開いているのか閉じているのかが分かりやすいことも大切です。

メニューを開いた時に三本線がバツ印に変わる、背景が暗くなる、メニューが横からスライドして出てくるなど、視覚的な変化があるとユーザーに親切です。

ただし、アニメーションを派手にしすぎると、表示速度や操作感に影響します。シンプルで分かりやすい動きにしましょう。

8-4. 背景色・文字色のコントラストを高める

メニューの背景色と文字色のコントラストが低いと、文字が読みにくくなります。

たとえば、薄いグレーの背景に白い文字を使うと、屋外や明るい場所では見づらくなることがあります。背景が白なら文字は黒や濃いグレー、背景が濃い色なら文字は白にするなど、はっきり読める配色を選びましょう。

デザイン性も大切ですが、まずは読みやすさを優先することが重要です。

8-5. 閉じるボタンや背景タップで閉じられるようにする

ハンバーガーメニューは、開きやすいだけでなく閉じやすいことも大切です。

ユーザーがメニューを開いた後、閉じ方が分からないとストレスになります。三本線アイコンがバツ印に変わる、閉じるボタンを表示する、メニュー外の背景をタップすると閉じるといった動作を用意すると便利です。

特に画面全体を覆うメニューの場合は、閉じる操作が分かりやすい位置にあるか確認しましょう。

8-6. CTAやお問い合わせ導線を入れる

企業サイトや店舗サイト、サービスサイトでは、ハンバーガーメニュー内にCTAを入れるのも効果的です。

CTAとは、ユーザーに行動してもらうための導線のことです。たとえば、以下のような項目があります。

お問い合わせ
無料相談
資料請求
予約する
LINEで相談
見積もり依頼

スマホユーザーは、メニューから問い合わせページを探すことも多いため、目立つ位置にCTAを配置すると成果につながりやすくなります。

ただし、CTAを入れすぎると押し売り感が出るため、サイトの目的に合わせて自然に配置しましょう。

9. ハンバーガーメニュー作成後に確認すべきチェックリスト

9-1. スマホで正しく表示されるか

ハンバーガーメニューを作成したら、まずスマホで正しく表示されるか確認します。

PCの管理画面やプレビューだけではなく、実際のスマホでサイトを開き、三本線アイコンが見えるか確認しましょう。

ヘッダーのロゴ、検索ボタン、SNSアイコン、広告などと重なっていないかも重要です。

9-2. タップしてメニューが開閉するか

次に、ハンバーガーメニューをタップして、正常に開閉するか確認します。

確認するポイントは以下です。

1回タップすると開くか
もう一度タップすると閉じるか
閉じるボタンが機能するか
背景タップで閉じる設定がある場合、正常に動くか
連続でタップしても表示が崩れないか

アイコンは表示されていても、JavaScriptエラーなどで開かないことがあるため、必ず操作して確認しましょう。

9-3. 各メニューリンクが正しいページに遷移するか

メニュー内のリンクも1つずつ確認します。

固定ページのURLを変更した後や、カテゴリーのスラッグを変更した後は、古いURLがメニューに残っていることがあります。

リンク切れがあるとユーザーに不便なだけでなく、サイトの信頼性も下がります。お問い合わせ、サービスページ、プロフィールなど、重要なリンクは特に丁寧に確認しましょう。

9-4. PC表示に影響が出ていないか

スマホ用のハンバーガーメニューを設定した後は、PC表示も確認します。

スマホでは問題なくても、PCで通常のグローバルメニューが消えていたり、ハンバーガーアイコンが不要な位置に表示されていたりする場合があります。

PCでは横並びメニュー、スマホではハンバーガーメニューというように、画面幅に応じて適切に切り替わっているか確認しましょう。

9-5. 表示速度が遅くなっていないか

プラグインやアニメーションを追加した場合、表示速度に影響が出ることがあります。

ハンバーガーメニューのために多くのCSSやJavaScriptを読み込むと、サイト全体が重くなる可能性があります。特にスマホユーザーは通信環境によって表示速度の影響を受けやすいため注意が必要です。

不要なプラグインを増やさない、画像やアイコンを軽くする、過度なアニメーションを避けるなど、シンプルな設計を意識しましょう。

9-6. 複数ブラウザで問題なく動作するか

最後に、複数のブラウザで動作確認をします。

確認したいブラウザは以下です。

Chrome
Safari
Firefox
Edge
Android標準ブラウザ

特にiPhoneのSafariとAndroidのChromeでは表示が異なることがあります。可能であれば、複数の端末やブラウザで確認しておくと安心です。

10. WordPressハンバーガーメニューに関するよくある質問

10-1. ハンバーガーメニューはPCにも表示できますか？

はい、PCにも表示できます。

CSSやテーマ設定、プラグインの表示条件を変更すれば、PCでもハンバーガーメニューを表示できます。ただし、PCでは横幅に余裕があるため、通常はグローバルメニューを横並びで表示する方が分かりやすい場合が多いです。

デザイン上の理由でPCにもハンバーガーメニューを使う場合は、ユーザーがメニューの存在に気づきやすい位置に配置しましょう。

10-2. 固定ページがメニューに表示されない時はどうすればいいですか？

固定ページがメニューに表示されない場合は、WordPress管理画面の「外観」から「メニュー」を開き、該当の固定ページがメニュー項目に追加されているか確認してください。

固定ページを作成しただけでは、自動でメニューに追加されない場合があります。手動でチェックを入れて「メニューに追加」をクリックし、最後に「メニューを保存」します。

また、下書き状態の固定ページは通常サイト上に表示されません。ページが公開済みになっているかも確認しましょう。

10-3. ハンバーガーメニューの色や位置は変更できますか？

はい、変更できます。

テーマ機能やプラグインを使っている場合は、カスタマイザーやプラグイン設定画面から色や位置を変更できることがあります。

細かく変更したい場合は、CSSで調整します。たとえば、アイコンの色を変えるには、三本線に指定されている背景色やボーダー色を変更します。

ただし、テーマによってCSSクラス名が異なるため、検証ツールで該当要素を確認してから編集しましょう。

10-4. プラグインなしでも作れますか？

はい、プラグインなしでも作れます。

使用中のWordPressテーマにスマホメニュー機能があれば、プラグインを使わずにハンバーガーメニューを表示できます。また、HTML、CSS、JavaScriptを使って自作することも可能です。

初心者の場合は、まずテーマ機能で対応できるか確認しましょう。テーマ機能で足りない場合に、プラグインやコードカスタマイズを検討するのがおすすめです。

10-5. テーマ変更後にメニューが消えた場合の対処法は？

テーマ変更後にメニューが消えた場合は、メニューの表示位置がリセットされている可能性があります。

WordPress管理画面の「外観」から「メニュー」を開き、新しいテーマの表示位置にメニューを割り当て直してください。

テーマによって表示位置の名前が違うため、以前のテーマで使っていた「スマホメニュー」が、新しいテーマでは「モバイルナビ」や「ヘッダーメニュー」という名前になっていることもあります。

また、テーマ独自のヘッダー設定やカスタマイザー設定も確認しましょう。

10-6. メニューが開かない原因を初心者でも確認できますか？

はい、初心者でも基本的な確認はできます。

まずは、スマホ実機でタップして開くか確認します。次に、キャッシュを削除し、別のブラウザでも試してみます。それでも開かない場合は、最近追加したプラグインを一時停止して、動作が戻るか確認しましょう。

難しいコードの確認まではできなくても、「設定ミス」「キャッシュ」「プラグイン競合」までは初心者でも切り分けられます。

JavaScriptエラーやテーマファイルの問題が疑われる場合は、無理に編集せず、バックアップを取ったうえで詳しい人や専門家に相談するのが安全です。

まとめ

WordPressのハンバーガーメニューは、スマホユーザーがサイト内を移動しやすくするために重要なメニューです。三本線アイコンをタップして開閉するシンプルな仕組みですが、設定や表示位置、CSS、JavaScript、プラグイン競合などが原因で、表示されない・開かないといったトラブルが起きることもあります。

初心者の場合は、まず使用中のテーマに用意されているメニュー機能を使うのがおすすめです。テーマ機能で足りない場合はプラグインを使い、さらに細かく調整したい場合にコードでの自作を検討しましょう。

ハンバーガーメニューが表示されない時は、メニューの表示位置、スマホ用メニューの項目、テーマカスタマイザー、キャッシュ、プラグイン競合、CSS、JavaScriptの順番で確認すると原因を見つけやすくなります。

作成後は、スマホ実機での表示確認、タップ操作、リンク先、PC表示への影響、表示速度、複数ブラウザでの動作確認を忘れずに行いましょう。

使いやすいハンバーガーメニューを整えることで、WordPressサイトの回遊性が高まり、読者や見込み客が目的のページへスムーズに移動しやすくなります。