【エックスサーバー】独自ドメインプレゼントキャンペーン実施中!《9月26日(木)18:00まで》

WordPressでimgタグに独自のclassを追加する方法

WordPressでimgタグに独自のclassを追加する方法


WordPressで「メディアを追加」から画像を挿入すると、

class="alignnone size-full wp-image-1"

といったように、classが自動で追加されますよね。

「ここに独自のclassを追加できたらいいのに」

そう思って実現するための方法を調べていたら、いい方法が見つかりました。今回はその方法をご紹介します。

この方法であれば、「メディアを追加」から挿入した画像に、自動で独自のclassが追加されます。画像挿入後にいちいちclassを手入力しなくて済むので、作業が効率化しますよ!

挿入済みの画像に独自のclassを追加する方法も合わせてご紹介しますね。

画像挿入時に自動で独自のclassを追加する方法

「メディアを追加」から画像を挿入した時に自動で独自のclassを追加するには、function.phpに以下のコードを追加します。

注意
function.phpを編集する時は失敗に備えてバックアップをとっておきましょう。
add_filter( 'get_image_tag_class',
	function( $class ) {
		return $class . ' img_style';
	}
);

この場合、「img_style」というclassがimgタグに追加されます。

コード追加前に画像を挿入した時の表示結果とimgタグのclass
WordPressでimgタグに独自のclassを追加する方法

コード追加後に画像を挿入した時の表示結果とimgタグのclass
WordPressでimgタグに独自のclassを追加する方法

もちろん、img_styleというclass名は好きな名前に変更していただいてOKです。


挿入済みの画像に独自のclassを一括で追加する方法

上の方法だと、これから挿入する画像にはclassが追加されますが、挿入済みの画像にはclassは追加されません。

「挿入済みの画像にも同じclassを追加したいんだけど…これは全部手入力しなきゃいけないのか!?」

……と焦ったのですが、冷静に考えると「Search Regex」プラグインを使えば一瞬でできることに気が付きました。

MEMO
Search Regexは、指定した文字列を別の文字列に一括で置き換えることができるプラグインです。導入がまだの方は、「プラグイン」⇒「新規追加」から「Search Regex」で検索し、当該プラグインをインストール・有効化してください。

Search Regexを使ったclassの追加方法は以下の通りです。

「ツール」⇒「Search Regex」を選択します。

WordPressでimgタグに独自のclassを追加する方法

下の画像のように設定します。

WordPressでimgタグに独自のclassを追加する方法

  • Search pattern:wp-image
  • Replace pattern:img_style wp-image

このように設定すると、「wp-image-X」の前に「img_style」が追加されます。

「Replace」を選択し、どのように置き換わるか確認します。

WordPressでimgタグに独自のclassを追加する方法

問題がなければ「Replace & Save」を選択します。

WordPressでimgタグに独自のclassを追加する方法

これで挿入済みの画像にも同じclassを追加することができました。

挿入済み画像のimgタグを見てみると……

WordPressでimgタグに独自のclassを追加する方法

「wp-image-X」の前に「img_style」が追加されていることが確認できます。

おわりに

画像を挿入した時、imgタグに自動で独自のclassを追加するには、function.phpに独自のclassを追加するためのコードを書きます。

挿入済みのimgタグに独自のclassを一括で追加したい時は、「Search Regex」プラグインを使いましょう。