[WordPless]自動でimgタグの前後にdivタグを追加する方法

WordPlessでお困りの同士の皆さんこんにちは。オリジナルテンプレートを作っているときに、「投稿に画像を挿入するとき、勝手にimgタグをdivタグで囲んでくれたら神なのに」って思うことありますよね。そう、あるんです。
そんな皆さんに朗報です。勝手に<div><img></div>にしてくれるphpをお教えします！

ちなみに、function.phpに書き加えるものになります。「function.php…？知らない…いじりたくない…」という方はごめんなさい。

function.php

add_filter('the_content', 'filter_imgtags');
function filter_imgtags( $content ){
  return preg_replace('/(<figure .*>)(<img .* \/>)(.*<\/figure>)/iU', '$1<div class="ImgWrap">$2</div>$3', $content);
}

ちょっと解説

実は筆者もそこまでphp詳しくないので解説できないんですが、preg_replaceは正規表現ができるヤツみたいです。で

return preg_replace('/(<figure .*>)(<img .* \/>)(.*<\/figure>)/iU'

のところで検索したい文字列（ここでは<figure …><img… ><figure>）を指定しています。
(　)で3つに分けられていることがポイントです。

'$1<div class="ImgWrap">$2</div>$3'

そして次に置換する文字列を指定して、<div class=”ImgWrap”>を挿入しています。
$1～3は、先ほど(　)で囲んでいた文字列を順番に抜き出せる表現だそうです。
１つめの(　)は$1で取り出せるということですね。

ちなみに、投稿画面で画像を挿入するときは画像が<figure>で囲まれるので、記事内の画像に限定するためにここでは<figure>も文字列を検索するときに含めていますが、「ちょっとやりたいことと違った…！」ってときは文字列とにらめっこして、うまくカスタマイズしてみてください。
(　)の位置や中身を変えれば色々なタグの前後に応用できるはずです。

まとめ

imgタグってCSSで::beforeとか::afterとか疑似要素作れないから面倒くさいですよね。筆者がこれをしたかった理由は、画像をインスタントフィルム風のデザインにしたかったからです。こんな感じ。

素敵でしょ？おしまい。