> – `page-xxx.php` ページに直接 HTML を書いていたときは崩れなかったレイアウトが、管理画面からhtmlを編集できるようにテンプレート側を `the_content();` に切り替えて **管理画面から固定ページで HTML を貼り付けた途端にガタガタになっちゃった！**……。 > DevTools を開き確認すると勝手に `

` タグや改行が挿入されているのが原因でした。この記事ではその時の解決をメモします。 ## 1. 再現した手順 1. `page-happy.php` を作り、ヘッダー・フッターを呼び出しつつ中身は直書き： ```

Title

…

``` → **表示 OK** 2. 本文を投稿画面から編集できるようにする。 ``` ``` 3. 固定ページ編集画面に、さきほどの HTML 全文をコピペ → 更新。 4. 表示を確認すると CSS が崩壊。DevTools でみると： ```

Title

…

``` `

` ラップ + `
` 挿入でセレクタが想定外に。 ## 2. 原因 – wpautop フィルタ WordPress は投稿本文 (`the_content`) を表示する直前に `wpautop()` を走らせ、改行を自動で `

` / `
` に変換します。 - ブログ記事には便利だが、**HTML をそのまま貼りたい LP には邪魔**。 - `

` などブロックレベル要素を `

` で包むため、CSS のセレクタ階層が変わり崩れる。 ## 3. 解決策 ### 3‑2. テンプレート側で wpautop を無効化（最短） ``` ``` > **ポイント** : 同じテンプレート内で `remove_filter()` → `the_content()` の順に呼ぶ。ほかのページへの影響はない。 ## まとめ Before After 効果 `the_content()` + `wpautop()` で `

` 挿入 `remove_filter( 'the_content', 'wpautop' )` 余計なラップを防ぎ、CSS が元どおり > **教訓** : LP や静的ページを投稿エディタで管理するときは、まず *wpautop* を疑う！ > **もうひとこと** : WordPress のエディタは “ページをその場で組み立てる” には便利ですが、**外部ツールで作成したデザインをそのままコピペすると自動整形で `

` など余計なタグが入り、レイアウトが崩れやすい**。コピー＆ペースト運用をする場合は、3-0 / 3-1 の対策を必ず入れるようにする！

[wordpress] 固定ページ化したときにcssが崩れちゃう問題

[Wordpress]WP_Queryでページネーションが404になる理由と正しい使い分け

[wordpress] 固定ページ化したときにcssが崩れちゃう問題

[Wordpress]WP_Queryでページネーションが404になる理由と正しい使い分け