この現象は、制作時にWordpressのエディタがwysiwygエディタだった場合、その後のアップデートでブロックエディタであるGutenberg(グーテンベルグ)に変更された事により、稀に発生致します。
全てのサイトで発生する訳ではなく、特定のサイトで発生する事があります。
また、発生するページはお客様サイドで対象ページを更新した場合に発生します。
※修正しなくても、表示だけして更新した場合や、表示して一定時間経過放置した事で自動保存された場合も発生します。また開いた際に既に自動体裁機能が働く為、正常なHTMLではなくなっています。(すぐにページを離れれば更新されないので、影響ありません。)
原因
WordPressには元々自動体裁機能という機能があり、段落タグ(<p>)や改行(<br>)を自動で挿入する機能がございます。
当社で制作したサイトはCMS化されていないページ＝静HTML的ページは全て固定ページとして登録しています。
固定ページをエディタで登録しているのではなく、HTMLを登録しています。その関係で自動体裁機能が働くと、HTMLが自動改変される事で体裁崩れが発生する事があります。
これを防ぐ為に自動体裁を無効にする処理をプログラム側で設定しています。
しかし、Gutenbergが実装された事で、この「自動体裁を無効にする処理」が効かなくなってしまいました。
※Gutenbergリリース以降1年未満のお客様は、wysiwygエディタを維持する為のプラグイン「Classic Editor」をインストールしてあります。この「Classic Editor」を無効にしなければ「自動体裁を無効にする処理」は有効であるので、問題はありません。
対策
既に登録済の固定ページまたはHTMLで登録した投稿を更新する場合
上記の通り、一度開くと自動体裁が働いてしまうので、ブラウザで対象ページのソースコードを開いて登録部分を登録し直します。この際に以下「自動体裁されない為のコード追加」をしたHTMLを登録します。
なお、コピーしたソースコードを全てペーストしてしまうと、不要なソースコードまでペーストされているので、更に体裁崩れやエラーが発生してしまいます。必ず、記事登録されている部分だけのソースコードを登録し直す必要があります。
免責事項
当社は、非CMSである固定ページの登録内容はお客様サイド更新するという事は想定しておりません。従って、もし既に自動体裁された状態で更新した場合や、対象部分のソースコードを抜き出す事が困難である場合、その修正は別途有償となりますのでご了承ください。
自動体裁されない為のコード追加
HTMLモードでHTMLを登録する場合は、登録するHTMLの先頭に 「<!-- wp:html -->」を追加、HTMLの最後尾に「<!-- /wp:html -->」を追記します。
こうする事で、ブロックエディタでも自動体裁機能が働かないで登録できます。