【ワードプレス5.7 不具合?】Pタグによる謎の空白が発生!

投稿日:2021/3/19 更新:2021/3/19 コメント 2件 ワードプレス , , ,


ワードプレス5.7アップデート直後は気付かなかったんですが所有サイトの一部で変な空白ができてレイアウトが狂ってました。

edius…?

hitfilm…?

正解

 

余白がおかしい問題1 空のPタグに余白ができる

index.phpの問題がある部分は下図のようなPHPコードでHTMLを生成させています。

<?php the_excerpt(); ?>というテンプレートタグは何も処理をしないと<p>~</p>タグで囲まれてHTMLとして出力されるそうですが、アップデートする前までは下記コードでも問題く表示されていたのでアップデートが問題だったのは間違いないと思います。

index.php

<p class="excerpt_p"><?php the_excerpt(); ?></p>

取り敢えず、「functions.php」に下記のコードで自動生計を停止させたらPタグによる空白はなくなりました。

functions.php

remove_filter('the_excerpt', 'wpautop');

ただ、さらに調べてみると海外の公式フォーラムでも同じような不具合報告があり、その記事によると空のPタグがあると下記の疑似要素が追加されるそうです。

style.css

p:empty:before {
content: "​";
}

「content: “”」が余計な空白を生み出しているので下記のように「content」を「none」にすると見事に謎のPタグによる空白は解消しました。

style.css

body p:empty:before {
content: none !important;
}

 

 




余白がおかしい問題2 「marginの相殺」  

ただ、これ以外にもsingle.phpのマージン(余白)もなんかおかしいですよね。下図は正常なマージンなんですが、画像もPタグで囲っているのでそのマージンと合わせて40pxのスペースが空くようにしています。※オレンジ色がマージン

サンプルページ: https://edit-anything.com/edius/poor-quality-of-timeline-rendering.html

余白部分がなんか重なっていつもより余白が少ないんですよね。尚、プラグインはすべて停止してみましたが解消しませんでした。

CSSやHTMLは独学なので詳しいことは分かりませんが、これは「marginの相殺」が起きているみたいで、垂直マージンを指定した2つのブロックレベル要素が並んだ時などに起こるそうです。

今まで問題なかったのになぜアップデートで「marginの相殺」が起きるようになったのかは全く分かりませんが、この問題はいずれ修正されるかもしれませんし、そのほかにレイアウトに大きな狂いはなく幅が狭まっただけなのでしばらく放置しようと思います。

因みにこの問題が起きないようにするには「マージンの指定は単一方向にする」のがいいみたいので今後のCSSデザインはそのようにやっていこうと思います。

 

▼参考サイト

WordPress5.7アップデート後の空のスペース(英語)

WordPressのthe_excerpt()に付与されるpタグを削除する方法+α

WordPress 5.7にするとコメントアウトにPタグが自動挿入される場合の対処方法

marginの相殺

 

2 件のコメント

  • 同じ状況になっていたものです…以前Wordpress5.6で普通に使用していたサイトをAll in one migrationで移行し、Wordpress5.7バージョンアップしたところ固定記事内のショートコードの前に謎の空白が…
    クラシックエディタのテキスト上では入っていないのにソースを確認するとpタグが勝手に付き、改行をbrで修正すれば正常に表示されるのでどうしようかと悩まされていたところ、こちらの記事に記載されていた
    body p:empty:before {
    content: none !important;
    }
    で解消いたしました。ありがとうございます。
    しかし更新することで謎の空白が増え、対応が必要になるのはなんとも…記事によると他のところも不具合が起きている様子。アップデートで良くなることを祈ります…。

    • お役に立てたようで良かったです。(o^-^o)

      ワードプレスは自分好みに色々と
      カスタマイズ出来るところが最高に気に入っているんですが、
      こういった問題がたまにあるので困りますよね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です