★人生100年時代を生き抜くための情報をLINE@でお届けします！
ご質問があればお気軽にメッセージを送ってくださいね！
フクロウ(@Fukurou_Japan)です。
今回はWordpressで上限分岐の処理を追加した際に、表示したベージの結果が条件通りにならない・・・という場合の対策をお伝えします。
今回の回答はずばり、
WP Fastest Cashe プラグインを停止したら正常に戻った！
コレです。お急ぎの方はまずはコチラを試してみてください。
条件分岐が効かないことが発覚した経緯
まずはじめに今回の状況をご説明します。
１ ショートコードを使用した パソコン・モバイル の分岐を行った
２ エディターを保存し、ページを開くと、WP管理者ログイン時と非ログイン時に表示の違いがあることが発覚
３ よくよく調査してみると非ログイン時での表示のされ方には２パターンあった
この２パターンはどちらも正常な表示ではない
これが経緯です。
一つずつ状況を見ていきますので、あなたも同じ症状になっているようでしたらぜひ参考にしてください。
１ ショートコードを使用した【パソコン・モバイル】の分岐を行った
このショートコードについてはテーマに最初から用意してあるものもありますし、自作でfunction.phpに追加したものもあるでしょう。
今回はこのようなショートコードがあるものとして話を進めます。
[pc-only][/pc-only]
[mb-only][/mb-only]
これは
【PCとタブレットの場合】のみ表示
【スマホの場合】のみ表示
というショートコードです。
今回はこのショートコード内に
【横並びの３つの画像をスマホ時には２つ並びにする】
という処理を追加しました。
（図1）
この並びがスマホヒョ児では・・・
（図2）
このように並べたい、ということですね。
WordPressの機能のギャラリーで並べても３列→２列にはなりますが、今回は画像の下に文字があるため、ギャラリーだけでは実現が難しいので、条件分岐の処理を使うことにした次第です。
３つの横並び（3PR）がスマホ時には１つの表示・・・ということでしたら、テーマ内に入っているショートコードを使ったり、【Shortcodes Ultimate】プラグインなどを使うことで簡単に実現できますが、今回は３列を２列にしたいため、この２つの方法は使えませんでした。
そして今回はちょいと面倒なのですが、以下のようにショートコードで挟んでいます。
[pc-only] 図1 [/pc-only]
[mb-only] 図2 [/mb-only]
単純ですね。
そしてここから問題が発生します。
２ エディターを保存し、ページを開くと、WP管理者ログイン時と非ログイン時に表示の違いがあることが発覚
管理者でログインしている場合にエディターを保存し、ページを開いてみるときちんと条件分岐が動作しています。
スマホについてはChromeの開発者モード（F12）と実機で確認しました。
こちらについては問題ないです。
３ 非ログイン時での表示のされ方には２パターンあった
次に非ログイン状態で（Chromeのシークレットモードでテスト）ページを開き、確認してみるとなんと・・・
・PCもスマホも図1の表示になる
・PCもスマホも図2の表示になる
という謎の状況が発生したのです！
それもその状況がランダムに発生するのです。実に意味不明。
どのような条件だと症状が出るのかを調査した
別のスマホで表示を確認したり、PCの別のブラウザで確認したりましたがイマイチパターンがわからず、あれこれやっているとついに気づきました！
このような操作をすると確実に再現します。
１ エディターの保存ボタン（更新ボタン）をクリックその後にすぐにPCで確認する。そうするとPCもスマホも図１の表示になる。
２ エディターの保存ボタン（更新ボタン）をクリックその後にすぐにスマホで確認する。そうするとPCもスマホも図2の表示になる
ナニコレ？
一度、パソコン表示になるとずっとどのデバイスでもパソコン表示、その逆パターンも同様です。
症状を再現させることはできましたが、対処方法が全く不明。
原因を調査してみた
なにやらわけのわからない状態になっていますが、一つずつ可能性を潰していくしかありません。
まず考えられるのは、
『ショートコードが正常に動作していないのではないか？』
という単純な疑問です。
こちらついては全く同じショートコードを別のテーマで使ってみたらきちんと分岐ができました。
ということでショートコード自体はおかしくないと・・。
次に
【ショートコードを使わずに直接PHPに wp_is_mobile を書いたらどうなるか？】
を試してみました。
単純化するため、コードの中身は文字だけにしてみました。
こちらがコードのサンプルです。
<?php if (wp_is_mobile()) :?> モバイルです。 <?php elseif (!wp_is_mobile()) : ?> パソコンです。 <?php endif; ?>
どのPHPファイルでテストしても良いですが、私は今回は Post Snippets というプラグインに追加して、エディターの本文にショートコードとして追加する、という方法を使いました。
Post Snippetsを使用する場合は最初のこの部分 <?php
と最後の ?>
この部分は不要ですのでご注意ください。
このように超シンプル、ショートコードも何も関係なし、テーマも何も関係なし！！
これなら絶対に動くでしょう！ という状態でテストしてみたところ・・・
なんと全く同じ症状になったのです。
図1が先に表示されたら、PCもスマホも図1のまま、図2にが先なら図2が表示。
ということで根本的に、
wp_is_mobile という単純な分岐が正常に動作していないことがわかりました。
そして、
おや？ さきほど別のテーマでショートコードを試したときは大丈夫で、今回私が使っているテーマでは駄目ということは、現在の環境の何かが悪さをしているってこと？
このように考え、正常に動作するテーマと、現在使用しているテーマの違いが何かを探ってみたのです。
WP Fastest Casheプラグインが原因だった！！
色んなところを確認して数時間。
ふと『キャッシュ系プラグインは動作がおかしくなる場合がある』という内容をどこかで読んだことを思い出し、プラグインを確認してみると、正常に動作するテーマにはキャッシュ系のプラグインはインストールされておらず、今回使用しているテーマには
WP Fastest Cache というプラグインがインストールされていました。
これをポチッと停止してみると、
なんと正常に条件分岐が行われました！！！
すばらしい！パチパチパチ・・・
ってこれたまたまじゃないよね？ と自分をちょっと疑ったので、あえてプラグインを有効にしてみると再度症状が発生。プラグインを停止すると症状は出ない。
ウム、完璧！
ということで間違いなくこのプラグインが悪さをしているということが確認できました。
その後、PHPのコードではなく、最初行おうとしていた通り、ショートコードで図を囲んでみると、
希望の動作ができるようになりました！
上記の状態がスマホだと、
この状態になりました！
実際には、ショートコードの入れ子（ショートコードの中にショートコードが入ったことが原因かなと思い、そのあたりも調査してみたのですが、ソコは全く関係ありませんでした。
ショートコードの中にショートコードを入れる処理についてはコチラをご参照ください。
その他にも Widget Logic というプラグインを使用し、ウィジェットにis_mobileを設定した上で、Shortcodes Ultimateプラグインのショートコードを使って投稿のエディターに埋め込んだり・・ということもしてみましたが、根本的な部分の is_mobile が効いていなかったわけなので正常に動作はしなかったというオチでした。
結局全く予想もつかないところが原因だった・・・というのが今回のお話の結論です。
まとめ
ここまで探し当てるのに２日を要しました。
複数サイトの複数のテーマでテストをしたり、PHPのコードもいろいろテストしたりしてなかなかに大変でしたが、解決方法は至って単純でした。
ただ、いろいろなことを試してみて可能性のあるものをすべて潰したからこそ行き着いた答えだと思うのでそれはそれでヨシとします。
あなたももし同じような状況になっているようでしたら是非参考にしてみてくださいね。
特に私がテストしてみて効果がなかったことをやらないようにしてくださいね。
非常に時間がかかってしまいますので。
何はともあれ、キャッシュ系のプラグインをオフにすることから先に行ってみてくださいね！
それではまた次回！
(1 投票, 平均: 1.00 / 1)
読み込み中...