WordPressで発生する空のPタグをjQueryで削除する

WordPressでブログを書いていると予期せぬ箇所に空のPタグが生成されてしまうことがあります。

<p></p>

こんな感じです。
なんだろう？

これが生成されてしまうとPタグにはpaddingとか幅や高さを調整するスタイルが記述されているため変な余白がうまれてしまいます。

フックを使って投稿用エディターをカスタマイズするとかそんなことが頭に浮かびましたが。面倒くさいのでとりあえずググッたら。

jQueryを使ってタグの内容が空の場合はそのタグを削除する
https://qiita.com/Cuano/items/8f34f171ed619113745e
[Qiita]

そこで紹介されているのが以下のタグ。

$(function() {
/*空のPタグは削除*/
$("p:empty").remove();
});

おお、簡単。
でも、WordPressにバンドルされているjQueryでは「$」が使えないようになっているので以下のようにします。

jQuery(function($) {
/*空のPタグは削除*/
$("p:empty").remove();
});

テンプレートのheadタグ内に直接置くのなら以下ですね。

<script>
jQuery(function($) {
/*空のPタグは削除*/
$("p:empty").remove();
});
</script>

味噌はセレクタを『p:empty』を使っているところ。
タグの中身が空というのを判別することができる擬似クラスです。
実はこの擬似クラス、これまでコーディングでも使ったことがないので忘れてましたね。

ググってこのコードを見つけたときちょっと『おおっ！』ってなりました。

では。