WordPressで思わぬところに発生して表示がぶっ壊れる空のpタグ。こちらをcss一行で削除…というか非表示にする方法を解説します。
空のpタグを削除する方法【css一行】
結論から言うと、この一行をcss編集画面の一番最後に埋め込むだけ。
p:empty{display: none;}
固定ページだけ適用したいならbodyに追加されるclass「page」を利用。固定ページはデザインを追い込むことが多いのでこれ使いたい人も多そう。
body.page p:empty{display: none;}
css込みでページを作り込んでる場合は、追加した特定のブロックだけ空のpタグを非表示にすることもできます。
div.tokutei-block p:empty{display: none;}
投稿ページだけ適用したい時も同様に投稿ページのclass「single-post」を利用。
body.single-post p:empty{display: none;}
特定のページだけに適用したいならこのコードをページのhtml編集モードでどこでも良いから追記します。
<style>p:empty{display: none;}</style>
他の方法
function.phpに追記する方法
WordPressはwpautopというフィルターで空のpタグを自動付与しています。
このフィルターを削除すれば全てのページで空のpタグを削除できます。
remove_filter('the_content', 'wpautop');
is_page( array( ) ) や in_category( ) を使って特定のページやカテゴリーだけ、フィルターを削除するのもアリでしょう。
if is_page( array( 'page-slug1','page-slug2','page-slug3' ) ) {//arrayの中に適用するページのスラッグを入れる
remove_filter('the_content', 'wpautop');
}
if in_category( "category-name" ) {//適用するカテゴリーを入れる
remove_filter('the_content', 'wpautop');
}
オススメしない方法
jQueryで消す方法
こちらの方法を紹介しているサイトも見受けられますがが、空のpタグを意図的に利用しているプラグインを使用している場合、プラグインが正常に動作しなくなることがあります。
Contactform7で送信できない場合はこの処理を入れて無いか要確認。
$(function() { $("p:empty").remove(); });
プラグインで消す方法
wpautopのフィルターを無効にするプラグインも存在しますが、更新が止まったり、プラグイン同士のコンフリクトがあったりするのでオススメはしません。
まとめ
ぶっちゃけますと、cssで空のpタグを消す方法はWordPressじゃなくても使えます。
他のブログサービスでも空のpタグを自動付与されてイラっとした際にはお試しください。
それではまた…さよならいち・∀・)ノ
