WordPressで作った診断が表示されないときの対処

診断を作って固定ページに貼ったのに、肝心の診断が出てこない。投稿のプレビューでは見えるのに公開ページだと真っ白。テンプレートに組み込んだら何も表示されない——このあたりは、診断シミュレーションProを使っていると一度は遭遇しやすいところです。

先に結論から言うと、原因のほとんどは次の2つです。

  • 本文以外(テンプレートやACFのフィールドなど)から呼んでいるのに「アセット強制読み込み」がオフのまま
  • ショートコードの id が、実際の設問セットIDと違っている

この2つで大半は片付きます。逆に言うと、いきなりサーバー設定やテーマを疑う前に、まずこの2点を確認したほうが早いです。以下、症状ごとに切り分けていきます。

目次

まずショートコードのidを疑う

固定ページや投稿に貼ったのに表示されないときは、最初にショートコードを見直します。設置に使うのはこの1行です。

[mqs_simulator id="設問セットID"]

id には、自分で作った設問セットのIDが入ります。診断シミュレーションProでは設問セットを作った時点でIDが振られるので、そのIDを正確に入れないと、当然ながら何も表示されません。

よくあるのは、別の診断のIDをコピペしたまま、id の数字を直し忘れているパターンです。あとは全角の数字が混ざっている、引用符が " ではなく別の記号になっている(コピー時に変わることがあります)といった、地味なミスも多いです。

設問セットのIDがそもそも分からない場合は、設問セットの一覧か編集画面で確認できます。手で打ち込むより、編集画面から正しいショートコードをコピーして貼るほうが事故りにくいです。

ブロックで設置している場合は、ショートコードではなく「診断シミュレーション」ブロックを使います。このとき、ブロックを置いただけで対象の診断を選び忘れていると表示されません。ブロックを選択して、表示する設問セットがきちんと指定されているかを見てください。

本文の外から呼んでいるなら、ほぼこれが原因

idが正しいのに表示されない、というときに一番疑うべきなのがここです。

診断シミュレーションProは、固定ページや投稿の本文にショートコード(やブロック)を置いた場合は、必要なJS/CSSを自動で読み込みます。ところが、本文ではなくテンプレートファイルやACFのカスタムフィールド、ウィジェットなどから呼び出すと、本文を解析するタイミングを外れてしまい、表示に必要なアセットが読み込まれないことがあります。

このときの対処はシンプルで、設定画面の「アセット強制読み込み」をオンにするだけです。これを入れると、診断に必要なJS/CSSが確実に読み込まれるようになり、本文以外から呼んでいても表示されるようになります。

実際、テンプレート直書きやACFで埋め込んだケースで「真っ白」「ショートコードの文字列がそのまま出る」となっているときは、ほぼこれで解決します。本文に貼っているのに出ない、という場合は前述のidミスのほうを先に疑ってください。

キャッシュで古い状態が残っているケース

設定もidも直したのに、まだ反映されない。このときに見落としやすいのがキャッシュです。

キャッシュプラグインやサーバー側のキャッシュが効いていると、修正前の古いJS/CSSやHTMLが配信され続けて、変更が反映されないことがあります。診断を直したのに表示が変わらない、ショートコードが反映されない、というときは、

  • キャッシュプラグインのキャッシュをクリアする
  • サーバー側にキャッシュ機能があればそれもクリアする
  • ブラウザのスーパーリロード(強制再読み込み)で自分の端末のキャッシュも外して確認する

この順で確認すると切り分けやすいです。とくに「自分の画面では直っているのに他の人には古いまま」というときは、サーバーやCDN側のキャッシュが残っていることが多いです。

設問セット側から「今どこに置かれているか」を確認する

そもそも自分がどのページに設置したのか分からなくなった、というのも意外とあります。

診断シミュレーションProには、設問セットの編集画面で設置中のページ(使用中ページ)を確認できる機能があります。ここを見れば、その診断が実際にどのページから使われているかが分かるので、「貼ったつもりのページが違った」「下書きのまま公開していなかった」といった勘違いに気づけます。

表示されないと言いつつ、実は設置先のページ自体が公開されていなかった、というのもよくある落とし穴です。

1ページに複数の診断を置いているとき

1つのページに複数の診断を置くこと自体はできます。ただ、複数置いたときに片方しか出ない、表示が崩れるという場合は、競合を疑います。

同じページに別のプラグインのスクリプトが多く乗っていると、JSがぶつかって動かなくなることがあります。まずは診断を1つだけにしたページを作って、そこでは正常に出るかを確認してみてください。1つなら出るのに複数だと出ない、というときは、他プラグインとの相性やページ側のスクリプトを順番に外して切り分けるのが近道です。

動作環境が足りていないケース

ここまでで直らないときは、環境側も一度確認しておきます。

診断シミュレーションProが想定しているのは、WordPress 6.0以上/PHP 7.4以上です。古いPHPのまま運用していると、そもそも正しく動かないことがあります。レンタルサーバーの管理画面でPHPのバージョンを確認し、古ければ上げてから再確認してください。

なお、結果コンテンツの中でContact Form 7のフォームを使っている場合は、Contact Form 7は6.0以上が必要です。CF7の6.x系はWordPress 6.7以上を求めるので、CF7をフォームに使うときだけはWP側も6.7以上が必要になる点に注意してください。診断自体の表示要件(WP6.0+/PHP7.4+)とは別物なので、混同しないようにします。

切り分けの順番をまとめると

表示されないときは、だいたい次の順で見ると最短です。

  1. ショートコードの id が正しい設問セットIDか(コピペミス・全角・引用符)
  2. ブロックなら対象の診断を選べているか
  3. 本文以外(テンプレート/ACF等)から呼んでいるなら「アセット強制読み込み」をオン ← 最重要
  4. キャッシュプラグイン・サーバーキャッシュをクリア
  5. 設問セット編集画面で設置中ページを確認(設置先・公開状態の勘違い)
  6. 複数診断なら1つに減らして競合を確認
  7. WP6.0+/PHP7.4+(CF7利用時のみCF7 6.0+・WP6.7+)を満たしているか

上から順に潰していけば、たいていはどこかで表示されます。経験上、最初の3つ、とくに「アセット強制読み込み」とidミスで止まっていることが圧倒的に多いです。

設置や設定の基本的な流れをもう一度押さえたいときは、使い方ガイドに手順がまとまっています。これから診断を作るところ、という場合は製品ページもあわせて確認してみてください。

目次