memocarilog

ライトボックス系で画像の拡大表示をしたい時など、aタグに独自クラスを付与したい場合があると思います。そんな時に自動的にHTMLにクラス付けする方法です。

image_send_to_editor フィルターフックを使う

image_send_to_editor フィルターフックを使用すると、投稿画面から画像挿入する際に出力されるHTMLを加工できるので、これを使うのがよいようです。

画像へのリンクタグに一律でクラス付与する場合は以下のように、functions.php へ記入すればOKです。

add_filter( 'image_send_to_editor', 'addClass' );
function addClass( $html ) {
	$class = 'myClass'; // ←付けたいクラス名が入ります。
	return str_replace( '<a ', '<a class="'. $class. '" ', $html );
}

リンク先が画像でないこともある場合

「メディアを挿入」画面で指定する画像のリンク先が「メディアファイル」のみと予想される場合はよいのですが、カスタムURLで画像ではなく別のサイトアドレス等になる可能性がある場合は不都合がおきることもあります。

そこで、リンク先（href属性）末尾がpng又はjpg又はgifの時にのみ独自クラスを付与するように条件分岐を追加します。
functions.php へ以下のように記入します。

add_filter( 'image_send_to_editor', 'addClass' );
function addClass( $html ) {
	$class = 'myClass'; // ←付けたいクラス名が入ります。
	if(preg_match('/<a href="https?:\/\/+[-_.\/a-zA-Z0-9]+(?:png|jpg|jpeg|gif)"><img/' , $html)){
		$html = str_replace( '<a ', '<a class="'. $class. '" ', $html );
	}
	return $html;
}

これでリンク先が画像の時にのみ、aタグに独自クラスが入るようになります。画像を挿入する時にクラスを付けるので、すでに投稿済みのものにはつきませんので注意です。