WordPressの地図を直したのに反映されない — 上の層から順に降りて切り分ける

管理画面では新しい色とリンクになっているのに、公開ページを開くと前のまま。この状態でいきなり原因を当てにいくと遠回りになります。症状が「地図は出ている、ただし中身が古い」なら、ブラウザ → サイトのキャッシュ表示を速くするため、一度作ったページや画像を保存して使い回す仕組み。サーバー・プラグイン・ブラウザ・CDNの各段階にあり、「直したのに反映されない」原因になりやすい。 → 設定の保存、と上の層から順に降りるのが結局は速い。 層ごとに見る場所は決まっているので、再インストールや設定の作り直しに手を出す前に、たいていどこかで引っかかります。

例には地図プラグイン「クリッカブル日本地図」を使いますが、降りる順番そのものは他のプラグインにも流用できます。

「出ない」と「古いまま出る」は、原因の層が違う

先に線を引きます。地図が1つも描画されない、ページが空白、ショートコードが文字列のまま残る——このあたりは設置か指定の失敗で、見に行く場所はマップIDやブロックの選択です。そちらの手順は日本地図が表示されない・クリックできないときにまとめました。

この記事が扱うのは反対側。地図はきちんと描画されていて、中身だけが更新前のものという症状です。形が出ているなら、ショートコードもマップIDも通っている。設置は成功していて、届いた内容が古いだけ、ということ。ここを混ぜると、すでに正しい設定を何度も見直す羽目になります。

古いのは1ページだけか、貼った全部か

降りる前に1つ確認しておくと、後の手数が減ります。同じマップを複数のページに貼っているなら、その全部を開いて、どこが古いかを見る。

理由は構造にあります。地図の設定はマップの投稿1件にまとまっていて、貼った側のページはそれを呼び出しているだけ。設定が新しくなれば、呼び出す側は全ページ同時に新しくなります。1ページだけ取り残されるのは、そのページの出力がどこかに保存されているときぐらい。「マップ側を直せば貼った全部に反映される」というこの作りはブロックでの置き方でも触れました。

自分のブラウザだけが古い、という線を先に消す

いちばん上の層はブラウザです。ここは確認が安いので先に片付けます。

シークレットウィンドウで同じURLを開く。あるいはスマホの回線から見る。それで新しくなっていれば、サイト側はもう直っていて、手元のブラウザが古いHTMLとCSSを抱えているだけです。スーパーリロード（Ctrl+Shift+R / Cmd+Shift+R）で解消します。

シークレットウィンドウでも古いままなら、ブラウザは無罪。次の層へ降ります。

地図はページのHTMLごと、キャッシュに入っている

ここから地図特有の話になります。

クリッカブル日本地図が出力しているのは画像ではなく、ページのHTMLに直接書き込まれるインラインSVG図形を点と線の数式で持つ画像形式。拡大しても荒れず、都道府県ごとのようにパーツ単位で色やクリック動作を付けられる。です。地図を映すために別ファイルを取りに行く通信は発生しません。表示速度の面では利点なのですが、キャッシュの観点だと意味が変わります。地図の中身がページのHTMLの一部である以上、そのページのキャッシュが残っていれば、色もリンクも古い状態が丸ごと居座る。

画像で作った地図なら「画像ファイルだけ差し替えれば直る」という抜け道もありますが、こちらにそれはありません。ページのキャッシュを消すしかない、ということ。

見る順番は、キャッシュ系プラグイン → サーバー側のページキャッシュ → CDNContent Delivery Network。画像やCSSなどのファイルを各地のサーバーに複製して配信する仕組み。独自のキャッシュを持つため、更新が反映されない原因になることがある。。重ねて使っているサイトが多いので、1つ消して直らなかったからといって、その層が無関係だったとは言い切れません。ひととおり消してから、シークレットウィンドウで確かめます。

CSSの側にも同じ構造があります。地図のスタイルシートはマップを置いたページでだけ読み込まれる作りで、ポップアップ用のCSSとJavaScriptに至っては、ポップアップを使う構成のマップがあるページにしか出ません。地図のないページにまで使わないCSSを配りたくなくて、ページ単位で出し分ける形にしてあります。配信物がページ単位で決まるなら、キャッシュの単位もページ単位。「サイト全体のキャッシュは消したはず」なのにそのページだけ古い版が残る、は起こり得ます。

プレビューが変わったことは、保存されたことではない

キャッシュを消しても古いなら、保存の層です。

編集画面のプレビューは、入力中のフォームの値をその場でサーバーへ送って描き直しています。保存済みの内容を映しているわけではありません。色を1つ選ぶたびに保存の往復を挟むと作業が止まるので、意図してこの作りにしています。代償として、プレビューが新しく見えていても、投稿を更新していなければフロントは1文字も変わりません。

やることは単純で、マップの編集画面を開いて「更新」を押す。押した記憶があいまいなら、いったん編集画面を再読み込みして、直したはずの色やリンクが残っているかを見ます。消えていたなら保存されていなかった、という答え合わせ。

全ページが古いままなら、直したマップが別物かもしれない

保存もしたのに、貼ったページが全部古い。ここまで降りたら、直しているマップと、ページに貼ってあるマップが別という線が濃くなります。

もう1つ、キャッシュでも保存でもない「変わらない」があります。色の優先順位です。規定色をいくら変えても、その県に個別の上書きが入っていれば上書き側が勝つ。個別の上書き > 地方・エリアの色 > 規定色という並びなので、触るべきは一番下の層ではなく、いま当たっている層のほう。この重ね順は日本地図を色分けする設計に書きました。

上から降りると、たいてい途中で止まる

並べ直すと、ブラウザ（シークレットウィンドウで消える）→ ページのキャッシュ（プラグイン・サーバー・CDN）→ 保存（更新を押したか）→ 参照先（どのマップ、どの属性、どの色が当たっているか）。この順に降りれば、原因はどこかの層で必ず引っかかります。逆から始めると、キャッシュに隠されたまま設定をいじることになり、合っていた設定まで崩しかねません。

管理画面で色やリンクを直して保存すれば、貼ったページのすべてが同時に切り替わる。その前提を実際の設定画面で確かめたいときは、クリッカブル日本地図の製品ページからどうぞ。