別に運営しているサイトはワードプレステーマ『SANGO』を利用している。そのサイトで発生したのが【モバイルの検索フォームに入力→トップに戻る不具合】。
結論から言うと、原因は”SANGOのキャッシュ機能・設定“でした。
該当機能をOFFにすることで、正常に検索結果が表示されるようになっています。
この記事では不具合の発生～解決までの流れを詳しく解説。同様の状況で悩んでいる人がいるなら、もしかしたら参考になるかもしません。
発生した症状
以下のような現象が起きていました。
- 検索フォームから検索するとトップページに戻る
- URLは「/?s=キーワード」で正常
- PCでは問題なし
一見すると正常に見えるため、”原因特定がかなり難しいタイプの不具合“です。
すでに2年以上、ワードプレステーマ『SANGO』で運営している別サイト。なぜ今更こんな不具合が発生してしまったのか？
発生していたけれど気づいていなかった可能性、あります！
環境
運営環境についてカンタンに説明します。
- WordPress
- テーマ：SANGO（子テーマ使用）
- サーバー：シンレンタルサーバー
- ドメイン：XServerドメイン
- キャッシュ系プラグインなし(ただし、SANGOの高速化・キャッシュ設定を利用)
【ワードプレステーマSANGOとは？】
・ユーザー体験を追求したテーマ
SANGOはユーザーフレンドリーを徹底的に追求した有料WordPressテーマです。ブロックエディターにも完全対応しています。
初心者でも簡単におしゃれなサイトを構築できます。
※一部公式サイト引用
有料ではあるものの、複数サイトで利用可能な点、初心者でも扱いやすい印象から気に入って購入しました。
お恥ずかしい話ですが、タメレポ管理人はワードプレスの知識に乏しく、今回のようなトラブル発生は非常に困ります…。
現在、タメレポのワードプレステーマは『SWELL』を利用中。
切り分けで分かったこと
このようなトラブルを相談できる知り合いはいません。生活に余裕がないため、専門業者に依頼するほどお金かけられない。
もう自分でなんとかするしかない！
ということでchatgptやGeminiなどAIを頼ることに。
アドバイスをいただきながら、調査の中で以下が判明しました。
- ワードプレステーマCocoonに変更 → 正常動作
- SANGOのみ不具合発生
- キャッシュ削除直後だけ一時的に改善することあり
この時点でテーマ依存＋キャッシュ関連の問題が濃厚になりました
試した対策（すべて効果なし）
正直、知識がないからあまりいじりたくない。でもやらないと解決しない。重い腰を挙げつつ、色々試してみました。
- search.php の確認
- index.php の確認
- CSSの修正
- SANGO親テーマ再インストール
- クエリ強制処理（pre_get_postsなど）
コードレベルでの修正では解決できませんでした。
致命的なミスをしたらどうしよう…。常にビクビクしながら色々試すものの、一向に改善の兆しが見えない。
原因の特定
最終的に解決した方法は…
SANGO → 高速化設定→キャッシュ設定OFF&インライン設定OFF
だったのです。
- 一度読み込んだページをキャッシュする（β機能）
- HTMLを圧縮してキャッシュする
- CSS / JavaScriptのインライン化
- SANGOテーマのCSSをインラインで読み込む
- SANGOテーマのJavaScriptをインラインで読み込む
これらをOFFにしたところ、モバイルでも正常に検索&表示できるようになりました。
下画像はSANGOのダッシュボード画面。
SANGO設定→高速化→『キャッシュ設定』項目にある2つの項目のチェックを外す。
その下にある『インライン設定』のチェックを外す。
とりあえずはこれで問題解決。
ああ、疲れた…。たったこれだけで数時間もかかってしまった(作業は2日間)。
なぜこの問題が起きたのか？？
SANGOのキャッシュ機能は、ページのHTMLを保存して再利用する仕組みです。
しかし検索ページは本来、
/?s=キーワードごとに内容が変わる
動的ページです。
それにも関わらずキャッシュが優先されると、
- トップページのHTMLが使われる
- WordPressが検索ページと認識しない
- 結果：トップページ表示になる
という不具合が発生します。
モバイルだけ発生した理由についてはSANGOは内部でモバイル判定を行っています。この影響で、
モバイルだけキャッシュの扱いが異なる、判定ズレが起きるのでは？
という結論に至りました。
解決方法（まとめ）
もし、ワードプレステーマ『SANGO』にてモバイルでの検索フォームで不具合が発生した場合、
SANGO → 高速化設定→キャッシュ設定&インライン設定
にて以下の設定をOFFにしてください。
- 一度読み込んだページをキャッシュする（β機能）
- HTMLを圧縮してキャッシュする
- CSS / JavaScriptのインライン化
- SANGOテーマのCSSをインラインで読み込む
- SANGOテーマのJavaScriptをインラインで読み込む
上記で正常に動作する可能性があります。
ただ、このやり方が適切かどうか、正直なところ管理人の拙い知識では判断できません。
ちょっと詳しい人ならもっと素早く、カンタンに原因を特定し、改善できるはず。
今後のおすすめ構成と学び
今回の経験から、以下の構成が安全だと判断。
- テーマのキャッシュ機能 → OFF
- キャッシュはサーバー側に任せる
- 動的ページ（検索など）はキャッシュ対象外
キャッシュはサイトを高速化する便利な機能ですが、不具合の原因になりやすかったり、発見が遅れたりといったデメリットがあります。
今回のトラブル、PC表示は問題なし、でもモバイル表示が…ということで発見が遅れました。
今後はモバイルでの表示も意識しながら運営していきます。
もし、SANGOを利用していて同じような症状で悩んでいる方の参考になれば幸いです。
ちなみに、タメレポはワードプレステーマ『SWELL』を利用中。
WordPressテーマ「SWELL」今のところ不具合はなく、安定しています。
有料テーマなので初回購入時にお金はかかりますが、ほぼ初心者みたいな管理人でも運営できてはいるので、初めての方に『SWELL』はおすすめですよ！
▼SWELLの詳細はこちら
コメント