【つまずき編】移行で起きた表示の不具合と、その直し方

連載「サイト移行の記録」の第3回は「つまずき編」です。データの取り込み自体は数字どおり完了したのに、実際に画面を開くと表示の不具合がいくつも残っていました。代表的なものと、その直し方を紹介します。

不具合1：本文にショートコードの文字が残る

WordPressで目次や吹き出しを表示していたショートコード（[toc]のような文字列）が、移行先ではただの文字として本文に残ってしまいました。

対処として、ショートコードを一括で取り除き、吹き出し部分は元のデータからHTMLとして書き戻しました。吹き出しは495か所あり、元の数と一致することを確認しています。

取り込みの過程で、カテゴリーの「親」が記録されず、全カテゴリーが同じ階層に並んでしまいました。この影響で、記事のカテゴリー表示やパンくずが実際と違うものになっていました。

対処は2段構えです。表示側のプログラムで、元のWordPressデータが持っていた親子構造をもとに階層を組み直し、記事ごとに「いちばん深いカテゴリー」を正しく選ぶようにしました。

EmDashには、記事本文に含まれるHTMLを安全な形に整える仕組み（サニタイズ）があります。安全なのは良いことですが、動画タグやSVG、記事内のデモ用スクリプトまで取り除かれてしまい、埋め込み動画100件以上やアニメーションのデモが表示されなくなりました。

対処として、記事ページに「加工せずにそのまま描画する」専用ブロックを用意し、該当箇所をそちらへ移しました。これで動画やGSAPのデモも移行前どおり動くようになりました。

ほかにも、実際に画面を見て直したものがいろいろあります。

取り込み件数の一致は「データがある」ことの確認にはなりますが、「正しく見える」ことの確認にはなりません。件数を数える確認と、実際に画面を開く確認は、両方必要でした。特にショートコードやサニタイズのような問題は、画面を見なければ気付けません。

次回では、ローカルで整えたサイトを本番へ公開し、独自ドメインへ切り替えるまでの流れを説明します。