スマートフォンでサイトを開いたら、ハンバーガーメニューをタップしても何も起きない。あるいはメニューが画面の外まで伸びて横スクロールが発生してしまう——WordPressを運用していると、ある日突然このようなモバイルメニューの不具合に気づくことがあります。
原因はテーマ側にあることもプラグイン側にあることもあり、見た目だけでは判断しづらいのが厄介なポイントです。
この記事では、モバイルメニューが崩れる・反応しないときに考えられる主な原因と、安全に切り分けるための確認手順、症状別の対処法を解説します。修正前に必ず確認しておきたいバックアップや検証環境についても触れていますので、順番に進めてみてください。
モバイルメニューが正常に動作しない主な原因
モバイルメニューの不具合は、多くの場合いくつかの原因が重なって起きています。まずはどのパターンに近いかを把握しましょう。
テーマとプラグインのJS・CSSが競合している
メニューの開閉は基本的にJavaScriptで制御されています。別のプラグイン（スライダー、ポップアップ、アニメーション系など）が同じイベントやライブラリ（jQueryなど）を読み込んでいると、片方の処理が止まったり、エラーで後続のスクリプトが実行されなくなったりすることがあります。
キャッシュ系プラグイン・高速化設定によるJSの遅延読み込み
表示速度を上げるためにJavaScriptを「遅延読み込み（Defer）」や「非同期読み込み（Async）」に設定していると、メニュー開閉用のスクリプトが本来の読み込み順より後に実行され、タップしても反応しないように見える場合があります。高速化系プラグインを導入した直後に症状が出た場合は、これが原因の可能性が高いです。
追加CSSによるz-index・displayの上書き
「外観 → カスタマイズ → 追加CSS」などで書いたスタイルが、意図せずメニューの表示・重なり順を上書きしてしまうケースです。特にoverflow: hiddenやpositionの指定、z-indexの数値違いはメニューが裏に隠れる原因になりやすいです。
テーマ・プラグインの更新、子テーマの記述ミス
更新直後から症状が出ている場合は、更新内容そのものが原因である可能性があります。また、子テーマ（チャイルドテーマ）で元のメニュー関連のHTML構造やクラス名を変更していると、JavaScript側が要素を見つけられず動作しなくなることもあります。
原因を切り分ける安全な手順
不具合の調査では、本番サイトをいきなり触らないことが重要です。以下の順番で、安全に原因を絞り込んでいきましょう。
- 作業前に必ずバックアップを取る
プラグインの停止やCSSの変更は基本的に取り消し可能ですが、誤操作によるデータ損失を避けるため、作業前にデータベースとファイルのバックアップを取得してください。レンタルサーバーの自動バックアップ機能や、バックアッププラグインのいずれかが使える状態にしておくと安心です。
- 可能であれば検証環境（ステージング）で再現確認する
サーバーにステージング機能がある場合は、本番環境を直接操作せずそちらで確認しましょう。ステージングがない場合は、訪問者の少ない時間帯に作業し、変更直後に必ず表示確認を行ってください。
- ブラウザの開発者ツールでJSエラーを確認する
スマートフォン表示のまま右クリック（またはF12）で開発者ツールを開き、「Console（コンソール）」タブを確認します。赤字のエラーが表示されている場合、そのエラー文に含まれるファイル名やプラグイン名が原因の手がかりになります。
- プラグインを1つずつ停止して確認する
すべてのプラグインを一度に停止して症状が消えるか確認し、消えた場合は1つずつ有効化し直して原因のプラグインを特定します。キャッシュ系プラグインを使っている場合は、停止後に必ずキャッシュをクリアしてから再確認してください。
- デフォルトテーマに一時的に切り替えて確認する
プラグイン側に原因がなければ、WordPress標準のテーマ（Twenty Twenty-Fourなど）に一時的に切り替えて症状が出るか確認します。標準テーマでも症状が出る場合はプラグインや追加CSS側、出ない場合は使用テーマ側に原因がある可能性が高いと判断できます。
症状別の対処法
メニューが画面からはみ出す・横スクロールが発生する
メニュー項目の文字数が長い、または画像・アイコンの幅指定がない場合に起きやすい症状です。
原因となっている要素にあたりがついている場合は、開発者ツールで該当要素の幅を確認し、以下のようにmax-widthと折り返し設定を追加すると改善することがあります。
/* モバイルメニューの横はみ出しを防ぐ */
.site-navigation {
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.site-navigation a {
white-space: normal;
word-break: break-word;
}.site-navigationの部分は、実際のメニューを囲んでいる要素のクラス名に置き換えてください。クラス名は開発者ツールで確認できます。
ハンバーガーアイコンをタップしても開かない
前章の切り分け手順でJSの競合が判明した場合、競合しているプラグインのスクリプトを特定のページだけ読み込まないようにすると解決することがあります。
子テーマのfunctions.phpに以下のような記述を追加し、対象のスクリプトハンドル名（プラグインの管理画面やソースコードで確認）を指定してください。
<?php
/**
* 特定のプラグインスクリプトとモバイルメニューの競合を避けるため、
* メニュー操作に関係ないページでは該当スクリプトの読み込みを停止する。
* 'conflicting-plugin-script' は実際に競合しているスクリプトのハンドル名に置き換える。
*/
function apura_dequeue_conflicting_script() {
if ( ! is_admin() ) {
wp_dequeue_script( 'conflicting-plugin-script' );
}
}
add_action( 'wp_enqueue_scripts', 'apura_dequeue_conflicting_script', 100 );この方法はあくまで暫定対応です。
該当プラグインが本当にそのページで必要なければそのままで問題ありませんが、必要な場合はis_page()などの条件分岐で対象ページを絞り込み、必要な機能を残すようにしてください。恒久的な対応としては、プラグインの開発元に競合報告をする、または競合しない別のプラグインへの乗り換えを検討しましょう。
メニューは開くが背面のコンテンツがスクロールできてしまう
メニュー表示中に背面の本文がスクロールしてしまうのは、メニュー展開時にbodyのスクロールを止める処理が効いていないことが原因です。テーマ側にこの制御がない場合、以下のようなCSSを追加することである程度改善できます。
/* メニュー展開中（テーマが付与するクラス名に合わせて調整）に背面スクロールを止める */
body.menu-is-open {
overflow: hidden;
height: 100vh;
}テーマがメニュー展開時にbodyへ付与するクラス名は異なるため、開発者ツールでメニューを開いた状態の<body>タグを確認し、実際に付与されているクラス名に置き換えてください。該当するクラスが見当たらない場合、テーマ側にこの機能自体が実装されていない可能性があります。
切り分け後も直らない場合の選択肢
原因がテーマのモバイルメニュー機能自体の不具合や仕様的な限界にある場合、CSS・JSの調整だけでは解決が難しいこともあります。その場合の選択肢を整理します。
| 状況 | 対応の方向性 |
|---|---|
| プラグインとの競合が原因と判明した | 該当プラグインの開発元へ報告、または競合しない代替プラグインを検討する |
| 追加CSSの記述ミスが原因と判明した | 該当箇所のCSSを修正・削除する |
| テーマのモバイルメニュー機能自体に限界がある | テーマの開発元に問い合わせる、またはモバイルメニュー機能が安定しているテーマへの変更を検討する |
テーマの変更は影響範囲が大きいため、最後の選択肢として検討してください。
Apuraではモバイルメニューの開閉アニメーションや背面スクロールの制御をテーマ標準機能として備えており、カスタマイザーから挙動を調整できます。
Menuタイプは一般的によく使われるOffcanvas、ドロップダウン、フルスクリーンから選択できます。
同じような不具合に繰り返し悩まされている場合は、設定例の一つとして参考にしてみてください。
まとめ
モバイルメニューの不具合は、プラグインとの競合、キャッシュ設定、追加CSS、テーマ側の問題のいずれかに起因することがほとんどです。
本番環境をいきなり触らず、バックアップを取った上でプラグインの停止やデフォルトテーマへの切り替えで原因を切り分けてから対処することで、余計な被害を避けながら解決に近づけます。