A2-blog

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

投稿日:2021/3/19 更新:2021/3/19 コメント 2件 ワードプレス 5.7, ワードプレス, 不具合, 空白

ワードプレス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の相殺