WordPress：投稿で自動的に出力されるタグに任意のクラスを追加するサンプルコード

2024-03-30

URLをコピーしました！

投稿で自動的に出力されるp、h、imgタグなどに、自動で任意のクラスを追加するサンプルコードをご紹介します。
全てのタグに適用したい場合、特定のタグだけに適用したい場合、どちらもご紹介しています！
（私は特定の要素にフェードインアニメーションを付けるために実装しました！）

サンプルコード：全てのタグに適用したい場合

以下をfunctions.phpへ追加してください。

※3行目の「add-class」を追加したいタグに変更してください。
※imgタグ、figureタグどちらにもクラスが付くようになるので、ブロックエディタでギャラリーを使う場合は注意が必要です。その場合は、次にご紹介する「特定のタグに適用したい場合」のコードを使ってください！
※全てのタグで動作検証したわけではありません。使用する場合は十分に検証の上、必要に応じて修正を加えてご利用ください。

function add_custom_class_to_all_tags( $content ) {
	// クラスを定義する
	$class_to_add = 'add-class';

	// 各タグにクラスを追加する
	$content = preg_replace_callback(
		'/<([^\s>\/]+)([^>]*)>/',
		function ( $matches ) use ( $class_to_add ) {
			$tag        = $matches[1];
			$attributes = $matches[2];
			// タグにclassがない場合
			if ( ! preg_match( '/\bclass\s*=\s*[\'"][^\'"]*[\'"]/', $attributes ) ) {
				$attributes .= ' class="' . $class_to_add . '"';
			} else {
				// タグにclassがある場合、既存のclassに追加する
				$attributes = preg_replace( '/\bclass\s*=\s*([\'"])([^\'"]*)\1/', 'class="$2 ' . $class_to_add . '"', $attributes );
			}
			return "<$tag$attributes>";
		},
		$content
	);
	return $content;
}
add_filter( 'the_content', 'add_custom_class_to_all_tags', 10 );

サンプルコード：特定のタグに適用したい場合

以下をfunctions.phpへ追加してください。

※3行目の「add-class」を追加したいクラス名に変更してください。
※7行目の「(p|h[1-6]|img)」のカッコの中に、適用したいタグを「|」区切りで記載してください。
　（以下のコードではp、h1～h6、imgを指定しています！）

function add_custom_class_to_specific_tags( $content ) {
    // 追加するクラスを定義する
    $class_to_add = 'add-class';

    // 指定したタグにクラスを追加する
    $content = preg_replace_callback(
        '/<(p|h[1-6]|img)([^>]*)>/',
        function ( $matches ) use ( $class_to_add ) {
            $tag = $matches[1];
            $attributes = $matches[2];

            // タグにclassがない場合
            if ( ! preg_match( '/\bclass\s*=\s*[\'"][^\'"]*[\'"]/', $attributes ) ) {
                $attributes .= ' class="' . $class_to_add . '"';
            } else {
                // タグにclassがある場合、既存のclassに追加する
                $attributes = preg_replace_callback(
                    '/\bclass\s*=\s*([\'"])([^\'"]*)\1/',
                    function ( $class_matches ) use ( $class_to_add ) {
                        // 既存のclassに$class_to_addを追加
                        $classes = explode( ' ', $class_matches[2] );
                        $classes[] = $class_to_add;
                        $classes = array_unique( $classes ); // 重複を削除
                        return 'class="' . implode( ' ', $classes ) . '"';
                    },
                    $attributes
                );
            }

            return "<$tag$attributes>";
        },
        $content
    );
    return $content;
}
add_filter( 'the_content', 'add_custom_class_to_specific_tags', 10 );

出力結果

以下は、特定のタグに適用する場合の出力結果です

赤線：追加したいクラス「add-class」が追加されています。
緑線：WordPressで自動出力されるクラスや他の属性、ブロックエディタで追加したクラスも保持されます。
青線：指定していないタグ(今回の場合はfigureタグ)には、何も追加されません。

おまけ：正規表現やメソッドなどメモ

中身を詳しく知りたい人向けです！

タグを表す正規表現

/<(p|h[1-6]|img)([^>]*)>/

/: 正規表現の始まりを表すデリミタです。JavaScriptやPHPなどの多くのプログラミング言語では、正規表現を示す際に / を使います。正規表現パターンは、このデリミタで囲まれます。
<: < 文字そのものです。HTMLタグの開始を示します。
(p|h[1-6]|img): キャプチャグループです。これは、<p>、<h1> から <h6>、および <img> というタグ名のいずれかにマッチします。| は “または” を意味し、これにより複数の候補が指定されています。
- p: <p> タグを表します。
- h[1-6]: <h1> から <h6> までの見出しタグを表します。[1-6] は数字の範囲を指定し、h に続く数字が1から6までのいずれかにマッチします。
- img: <img> タグを表します。
([^>]*): キャプチャグループです。これは、< と > の間にあるタグの属性を表します。[^>]* は、> 以外の文字の0個以上の繰り返しを表します。つまり、> が現れるまでのすべての文字列をマッチさせます。
>: > 文字そのものです。HTMLタグの終了を示します。
/: 正規表現の終わりを表すデリミタです。

クラスとその内容を表す正規表現

/\bclass\s*=\s*([\'"])([^\'"]*)\1/

/: 正規表現の始まりを表すデリミタです。
\b: ワード境界を示すメタ文字です。これにより、class という単語の境界を定義します。これにより、class の前には単語の境界が存在し、他の単語が結合されることはありません。
class: マッチさせたい文字列そのものです。これは class 属性を指定します。
\s*: 空白文字 (スペース、タブ、改行など) の0個以上の繰り返しを表します。この部分は、class と = の間の任意の空白をマッチさせます。
=: イコール記号です。class 属性の名前と値を区切ります。
\s*: 同じく、空白文字の0個以上の繰り返しを表します。これは = と " (引用符) の間の任意の空白をマッチさせます。
(['"]): キャプチャグループです。これはシングルクォーテーション ' またはダブルクォーテーション " をキャプチャします。これは class 属性の値を引用符で囲むために使用されます。
([^'"]*): もう一つのキャプチャグループです。これは、引用符の中にある class 属性の値をキャプチャします。[^'"]* は、シングルクォーテーション ' またはダブルクォーテーション " 以外の文字の0個以上の繰り返しを表します。
\1: 後方参照です。これは、最初のキャプチャグループでマッチした引用符と一致するものをマッチさせます。つまり、class 属性の値がシングルクォーテーションまたはダブルクォーテーションで囲まれていることを確認します。
/: 正規表現の終わりを表すデリミタです。

メソッド preg_match

関数は、指定された正規表現パターンが文字列内でマッチするかどうかを調べるために使用されます。PHPで正規表現を使って文字列を検索、マッチング、置換する際によく利用されます。

preg_match($pattern, $subject, $matches, $flags, $offset);

$pattern: マッチングを行う正規表現パターンを指定します。
$subject: マッチングを行いたい文字列を指定します。
$matches (オプション): マッチングした結果が格納される配列です。この配列は関数が終了した後に、マッチングした部分文字列やキャプチャグループの内容を含みます。
$flags (オプション): フラグを指定します。詳細なマッチングの挙動を制御するために使用されます。
$offset (オプション): マッチングを開始する文字列内の位置をオフセットとして指定します。

preg_match 関数は、マッチした場合には1を返し、マッチしなかった場合には0を返します。また、エラーが発生した場合は false を返します。

例えば、次のコードは preg_match を使ってマッチングを行い、結果を確認しています。

$pattern = '/apple/';
$subject = 'I like apples and oranges.';
if (preg_match($pattern, $subject, $matches)) {
    echo "Match found!\n";
    print_r($matches); // マッチした結果を表示
} else {
    echo "Match not found!\n";
}

この例では、$subject 文字列内で apple がマッチするかどうかを調べています。

メソッド preg_replace_callback

正規表現にマッチした部分文字列をコールバック関数で置換する際に使用されます。PHPで文字列内のパターンに基づいて置換を行う際によく利用されます。

preg_replace_callback($pattern, $callback, $subject, $limit = -1, &$count = null);

$pattern: パターンを指定します。このパターンにマッチする部分文字列が置換の対象となります。
$callback: マッチした部分文字列を置換するためのコールバック関数を指定します。
$subject: 置換を行う対象の文字列を指定します。
$limit (オプション): 置換を行う回数の上限を指定します。デフォルトは -1 で、すべてのマッチした部分文字列が置換されます。
$count (オプション): 置換が行われた回数が格納される変数への参照です。

コールバック関数は、マッチした部分文字列を受け取り、置換された部分文字列を返す必要があります。

コールバック関数の基本的な構文は次の通りです。

function callback_function($matches) {
    // 置換したい処理を行う
    return $replacement_string;
}

コールバック関数内で $matches 変数を使ってマッチした部分文字列にアクセスできます。$matches はマッチした部分文字列全体と、正規表現でキャプチャされたグループに対応する要素を含む配列です。コールバック関数は、マッチした部分文字列の置換後の結果を文字列として返します。

以下は、preg_replace_callback の使用例です：

$text = "Apples are round, and apples are juicy.";
$pattern = '/apples/i';
$result = preg_replace_callback($pattern, function($matches) {
    return strtoupper($matches[0]); // マッチした部分文字列を大文字に変換して置換
}, $text);
echo $result; // "APPLES are round, and APPLES are juicy."

の例では、$text 文字列内で apples という単語にマッチし、その部分文字列を大文字に変換して置換しています。

メソッド preg_replace_callback の関数内で使用されている useキーワード

preg_replace_callback 関数は、第2引数にコールバック関数を取ります。このコールバック関数は、マッチした部分文字列を受け取って置換処理を行います。しかし、このコールバック関数内で外部の変数やオブジェクトにアクセスする場合、その変数やオブジェクトを use キーワードで引き継ぐ必要があります。

具体的には、次のような構文を使います：

function ($matches) use ($external_variable) {
    // コールバック関数の中で $external_variable を使用する処理
}

ここで $external_variable は、外部の変数やオブジェクトです。この方法を使うことで、無名関数内で外部の変数やオブジェクトにアクセスできます。

キャプチャグループ

以下のように正規表現の中で()で囲むことで、キャプチャグループを定義することができます。

        '/<(p|h[1-6]|img)([^>]*)>/',

1つめの()が1つめのキャプチャグループ。（橙線の部分）
2つめの()が2つめのキャプチャグループ。（緑線の部分）
もし3つめ以降も()があれば、それぞれ3つめ、4つめ…のキャプチャグループになります。

キャプチャグループの使い方：preg_replace編

// タグにclassがある場合、既存のclassに追加する
$attributes = preg_replace( '/\bclass\s*=\s*([\'"])([^\'"]*)\1/', 'class="$2 ' . $class_to_add . '"', $attributes );

正規表現1つめの()(橙線)：キャプチャグループ1つめ＝$1で表されます(このコードでは使われていません)。
正規表現2つめの()(緑線)：キャプチャグループ2つめ＝$2で表されます。

キャプチャグループの使い方：preg_replace_callback編

$content = preg_replace_callback(
        '/<(p|h[1-6]|img)([^>]*)>/',
        function ( $matches ) use ( $class_to_add ) {
            $tag = $matches[1];
            $attributes = $matches[2];

preg_replace_callback 関数は、コールバック関数に引数$matches を渡します。
この変数は、マッチングした結果の情報を含む配列です。

$matches[0]: マッチした全体の文字列が含まれます。
$matches[1]: マッチした正規表現の1番目のキャプチャグループに対応する部分文字列が含まれます。
$matches[2]: マッチした正規表現の2番目のキャプチャグループに対応する部分文字列が含まれます。
以降、$matches[3]、$matches[4]、… のようにキャプチャグループに対応する部分文字列が含まれます。

メソッド explode

explode() 関数は、指定された区切り文字に基づいて文字列を分割し、それぞれの部分を要素とする配列を返します。第1引数には区切り文字を、第2引数には分割したい文字列を指定します。

具体的には、explode( ' ', $class_matches[2] ) は、スペースを区切り文字として、$class_matches[2] で指定された文字列を分割して配列に格納します。

例えば、次のような文字列を考えます：

$class_string = "class1 class2 class3";

この文字列をスペースで区切って配列に分割すると：

$class_array = explode(' ', $class_string);
print_r($class_array);

出力は次のようになります：

Array
(
    [0] => class1
    [1] => class2
    [2] => class3
)

$class_matches[2] は、preg_replace_callback 関数内のコールバック関数で使用されており、マッチしたクラス属性の値を表します。この値がスペースで区切られた複数のクラス名を持つ文字列であれば、explode() 関数を使ってそれを個々のクラス名の配列に分割することができます。

メソッド implode

implode() 関数は、配列の要素を指定された区切り文字で連結して文字列にします。第1引数には区切り文字を、第2引数には連結したい配列を指定します。

具体的には、implode( ' ', $classes ) は、スペースを区切り文字として、配列 $classes の要素を連結して文字列にします。

例えば、次のような配列を考えます：

$classes = array("class1", "class2", "class3");

この配列をスペースで区切って文字列に連結すると：

$class_string = implode(' ', $classes);
echo $class_string;