【WordPress】preg_match_allを使って投稿のHTMLにクラス属性をつける

直接HTMLタグにCSSを付けるのが嫌いになりました。なので投稿で使用されてるdiv要素以外の<h2><p><blockquote>に全てクラス属性を自動的に付けるプログラムを作成します。

プログラムの流れ

投稿ページでコンテンツを表示するのにはthe_content()関数を使います。この関数は表示の直前にフィルターフックが用意されているので、表示の直前にHTMLタグを取得し、div要素以外のクラスが追加されてないタグに"the-content-{タグ名}"というクラスを追加しようと思います。

preg_match_all()の使い方

preg_match_all( $arg1, $arg2, $arg3 )の3つの引数を使用します。

1つ目は正規表現を渡し、2つ目の引数の文字列の中を検索します。3つ目の引数は検索結果を代入する変数になります。

今回のコードは以下のようになります。

preg_match_all( "/<[^\"\=\/>]+>/i", $content, $target_tags);

"/<[^\"\=\/>"この正規表現は<から始まり>で終わる、"と=と/が含まれていない文字列を指定しています。つまり

となります。

$contentという引数にはthe_content()で表示される投稿の内容がぶち込まれていて、正規表現に引っかかった結果が$target_tagsにぶち込まれます。

コピペできる完成コード

以下のコードをfunctions.phpに記載することで<p>タグや<h2>タグや<h3>タグなどに自動的にclass属性が追加されます。

function add_class_content_tag ( $content ) {
  preg_match_all( "/<[^\"\=\/>]+>/i", $content, $target_tags);
  foreach ( $target_tags[0] as $val ) {

    $tag = substr( $val, 1, -1 );
    if( $tag === 'div' ) {
      continue;
    }
    $content = str_replace( "<{$tag}>","<{$tag} class='the-content-{$tag}'>", $content );

  }
  return $content;
}
add_filter( 'the_content', 'add_class_content_tag', 100 );

まとめ

str_replace関数でclass属性を付与する仕組みを利用すれば<a>タグにtarget=_brankを必ず付ける。やdata属性を付ける。といった応用もできます。