WordPressのp要素で困ったときに

WordPressは、余計なところまでPタグでラップされて困る」といった経験をされたことはありませんか?

WordPress日本語フォーラム

ワードプレス日本語フォーラムでのP要素に関連する質問例

等々、p要素に絡んだ質問は少なくありません。

その中には、CSSと密接にかかわるような 問題もあります。

隣接セレクタ、兄弟セレクタ等を使用したい時に、対象要素がp要素でラップされてCSSが動作しなくなってしまう

  1. 隣接兄弟結合子 - CSS | MDN
  2. 一般兄弟結合子 - CSS | MDN
意図しないp要素のラップで動作しなくなるようなCSSプロパティ

p要素がimg子要素を持つ場合、現在のCSSでは、img子要素を持つp要素のスタイル設定は出来ない

等々、悩ましい

WordPressのユーザーは、p要素自動追加を避けたい時に、にどういった方法で対処しているのか

WordPressで、ラップを解除する典型例は、「the_contentフィルターを使って、正規表現でp要素を削除する,複雑なhtmlは、投稿本文から分離しカスタムフィールドなどに入力しておいて、ショートコードを使って呼び出すといった処理」が多いように思います。

しかし、正規表現を書くのは、誰にでもできる事ではありません。

javascriptなら、要素を指定して、親要素がpだったら、親pをDOMから削除なんてことが、シンプルにできるから この記事では、javascriptでp要素の除去を試みたいと思います。

jQuery

テーマで、スクリプトを追加する方法
functions.php

Photo by Annie Spratt on Unsplash


新着記事

コメントは受け付けていません