WordPressでimgを囲むpに独自クラスを設定する

デフォルトでは、WordPressに画像を埋め込むとimgはpで囲まれる。一昔前はpタグを削除するという記事をよく見たが、ここではimgを囲むpに独自のクラスを定義する方法を記述する。

独自クラスを追加

少し修正してはいるが、WordPress Developmentで見つけた方法は以下。pの中にimgタグがあった場合、pに独自クラスを追加するという方法。

通常はこのコードで十分だと思う。

// imgを囲んでいるpにimgWrap classを追加
function img_p_class_content_filter($content) {
  $ptn = "/(<p[^>]*)(\>.*)(\<img.*)(<\/p>)/im"
  $content = preg_replace($ptn, "\$1 class='imgWrap'\$2\$3\$4", $content);
  return $content;
}
add_filter( 'the_content', 'img_p_class_content_filter' ,20);

やや問題なのは、正規表現部分を見ればわかるが、pに他のクラスを定義した上で記事を投稿すると、classが2回定義_クラスの複数定義とは意味が異なる_されてしまう点。

自分の場合、CSS関係で少し問題があったためこれに対応することにした。

方法の選択肢

• 定義したクラスにimgWrapクラスを追加（複数クラス）
• 独自クラスが定義されてないときのみimgWrapを追加

前者が理想的だがコードが長くなるのと、画像を囲むp自体のCSSを切り替えたかったので、後者の方法を取ることにした。

クラスが定義されていない場合にのみ適用する

// imgを囲んでいるpにimgWrap classを追加
function img_p_class_content_filter($content) {
  $ptn = "/(\<p)(?!\sclass)(.*\>.*)(\<img.*)(<\/p>)/im"
  $content = preg_replace($ptn, "\$1 class='imgWrap'\$2\$3\$4", $content);
  return $content;
}
add_filter( 'the_content', 'img_p_class_content_filter' ,20);

現状、問題なく動作する。