「WordPressは、余計なところまでPタグでラップされて困る」といった経験をされたことはありませんか？
WordPress日本語フォーラム
等々、p要素に絡んだ質問は少なくありません。
その中には、CSSと密接にかかわるような 問題もあります。
隣接セレクタ、兄弟セレクタ等を使用したい時に、対象要素がp要素でラップされてCSSが動作しなくなってしまう
p要素がimg子要素を持つ場合、現在のCSSでは、img子要素を持つp要素のスタイル設定は出来ない
等々、悩ましい
WordPressのユーザーは、p要素自動追加を避けたい時に、にどういった方法で対処しているのか
WordPressで、ラップを解除する典型例は、「the_contentフィルターを使って、正規表現でp要素を削除する,複雑なhtmlは、投稿本文から分離しカスタムフィールドなどに入力しておいて、ショートコードを使って呼び出すといった処理」が多いように思います。
しかし、正規表現を書くのは、誰にでもできる事ではありません。
javascriptなら、要素を指定して、親要素がpだったら、親pをDOMから削除なんてことが、シンプルにできるから この記事では、javascriptでp要素の除去を試みたいと思います。
jQuery
jQuery(function($){
$('img').each(function(){
if ( $(this).parent().is( "p" ) ) {
$(this).unwrap();
}
});
});
テーマで、スクリプトを追加する方法
functions.php
add_action( 'wp_print_footer_scripts', 'my_remove_p' );
function my_remove_p() {
?><script>
jQuery( function ( $ ) {
$( 'img' ).each( function () {
if ( $( this ).parent().is( "p" ) ) {
$( this ).unwrap();
}
} );
} );
</script><?php
}
Photo by Annie Spratt on Unsplash