画像と文章を横に並べるつもりで、記事に2列のHTMLを書きました。ところが表示すると、文章が画像の下に落ちて、右側が空いたままになりました。
HTMLの書き間違いではありません。WordPressの「自動整形（wpautop）」が、HTMLの途中に余計な閉じタグを入れていたのが原因です。テストサイトで崩れ方を再現して、直し方を3つ試しました。
自動整形（wpautop）とは
自動整形は、クラシックエディターで書いた本文を表示するときに、改行を自動でタグに置き換える機能です。
- 空行で区切った文章を、段落のタグ（<p>）で囲む
- 段落の中の改行を、改行のタグ（<br>）に置き換える
文章を書くだけならとても便利です。困るのは、本文に自分で書いたHTMLを入れたときです。
テストサイト（WordPress 7.1.3）で確かめたところ、自動整形が働くのはクラシックエディターで書いた本文だけでした。ブロックエディターの「カスタムHTML」ブロックに入れたHTMLには、余計なタグは入りませんでした。
自作HTMLでレイアウトが崩れる例
画像と文章を2列に並べる、次のHTMLを本文に入れました（見た目の指定は省略しています）。
<div class="plan-card"><img src="plan.jpg" alt="">
<div class="plan-text">スタンダードプラン…</div>
</div>plan-card には「左200px、右は残り」の2列のグリッドを指定しています。表示すると、文章（①）が右の列ではなく、画像の下に落ちました。
表示されたHTMLを見ると、画像のすぐ後ろに、元のHTMLにはない </p> が入っていました。
<div class="plan-card"><img src="plan.jpg" alt=""></p>
<div class="plan-text">スタンダードプラン…</div>
</div>ブラウザは、対になる開始タグのない </p> を、中身が空の段落（<p></p>）として扱います。この空の段落がグリッドの右の列に入り、文章は次の段に押し出されていました。
<div> の先頭が <img> や <a> のような文中に置くタグで、その後ろに <div> などのブロックが続くと、この余計な </p> が入ります。横並び（flex）のボックスでも、空の項目が1つ増えるので、すき間がずれたり、折り返したりします。
レイアウトの崩れを直す3つの方法
直し方は3つあります。手軽な順に並べました。
直し方1：CSSで空の段落を消す
いちばん手軽なのは、空の段落を表示しないCSSを1行足す方法です。
.plan-card p:empty { display: none; }「.plan-card」の部分は、自分のHTMLの外側のクラス名に変えます。サイト全体の「p:empty」に指定すると、ほかの場所にも効いてしまうので、範囲を絞っておきます。CSSは「外観」→「カスタマイズ」→「追加CSS」などに書きます。
同じHTMLのまま、文章が画像の右に並びました。
直し方2：先頭のタグをブロックで包む
HTMLを書き換えられるなら、<img> を <div> や <figure> で包むと、余計な </p> そのものが入らなくなります。
<div class="plan-card"><figure><img src="plan.jpg" alt=""></figure>
<div class="plan-text">スタンダードプラン…</div>
</div>直し方3：自動整形を止める
自作のHTMLを入れる記事が多いなら、自動整形そのものを止める方法もあります。ただし止めると、普通の文章の段落も自動では作られなくなり、<p> を自分で書く必要があります。すでに公開している記事の見た目が変わることもあるので、止める範囲は絞ります。
コードを追加するときは、テーマのファイルを直接書き換えるより、「Code Snippets」のようなプラグインを使うのが安全です。
WordPressの「functions.php」ファイルは、初心者はあまり触らない方が無難です。 色んなカスタマイズが可能な反面、操作を間違えるとエラーが出てしまうリスクがあるからです。 そこで本稿でご紹介するのは「Code Snippets」というプラグイン。functions.ph...
すべての記事で止める
remove_filter( 'the_content', 'wpautop' );テストサイトで同じHTMLに試すと、余計な </p> は入らなくなりました。
特定の投稿タイプだけ止める
たとえば、投稿タイプ「news」の記事だけ止めるときは、次のように書きます。「news」の部分を、止めたい投稿タイプの名前に変えます。
add_action( 'wp', function () {
if ( is_singular( 'news' ) ) {
remove_filter( 'the_content', 'wpautop' );
}
} );以前の方法は使えなくなっている
以前は、「ユーザー」→「プロフィール」の「ビジュアルエディターを使用しない」にチェックを入れて、自動整形を避ける方法がよく紹介されていました。今のWordPressでは、このチェック欄は、すでにチェックが入っていたユーザーにしか表示されません。
自動整形を切り替えられるプラグイン「Toggle wpautop」も、更新が止まっているため、今から使うのはおすすめしません。
まとめ
自作のHTMLで横並びが崩れたら、まず表示されたHTMLに、書いた覚えのない </p> が入っていないかを確かめます。入っていれば、自動整形が原因です。
直すときは、手軽な順に「CSSで空の段落を消す」「先頭の画像やリンクを <div> で包む」「自動整形を止める」の3つを試します。止める方法は、ほかの記事の見た目にも影響するので、最後の手段にします。
WordPressテーマ集
コメント