WordPressでメディアから投稿に挿入した画像に「好きなクラス名を追加する」方法

カスタマイズ情報など このページをあとで読む

WordPressで文章を書いていると「この場所に画像を入れようかな〜」と思うことがあります。

パソコンでの操作を例にしますと・・・画像を入れるには、WordPressの管理画面から投稿の編集画面の左上にある「メディアを追加」ボタンを押して、自分の持っている画像をアップロードするか、すでにアップロードした画像（メディアライブラリ）の中から選んで「投稿に挿入」を押せば手軽に入れられます。

「メディアを追加」ボタン

insert_image_add_class01

画像を選んで「投稿を挿入」ボタンを押すと画像を挿入できます

insert_image_add_class02

挿入した画像にはクラス名が自動で追加される

ところで「メディアを追加」ボタンから挿入した画像には「添付ファイルの表示設定」の値によって、特定のクラス名が自動で追加されます。

insert_image_add_class00

どんなクラス名が追加されるのか、以下にまとめました。

「配置」の設定で追加されるクラス名

なし左中央右
配置alignnonealignleftaligncenteralignright

「リンク先」の設定で追加されるクラス名

なしメディアファイル添付ファイルのページカスタムURL
リンク先なしなしなしなし

「サイズ」の設定で追加されるクラス名

サムネイル中フルサイズ
サイズsize-thumbnailsize-mediumsize-full

という感じで、例えば下の寿司ランチの画像があるじゃないですか。

higashijujo_takezushi03

この画像のソースコードを見ると、下のようにクラス名が自動で追加されています。

<img class="alignnone size-full wp-image-27965" src="・・・（以下省略）

先ほども登場した「添付ファイルの表示設定」の値によってクラス名が自動で追加されている、ということがなんとなくわかったと思います。

insert_image_add_class00

クラス名の中にある「wp-image-27965」は、添付ファイルのID「27965」に関連しています。（ここで「添付ファイルにも個別にIDが割り振られている」ということがわかりますね）

以上が長い前提で、以下が本題です。

挿入した画像に「お好みでクラス名を追加したい場合」はこうする

メディアから挿入した画像には「好きなクラス名を追加したい」ということがありました。その場合は、以下コードをテーマフォルダ内にある「functions.php」ファイルに書くとできます。（Codexのコードを参考にしました。ありがとうございます）

//挿入した画像に好きなクラス名を追加する
add_filter('get_image_tag_class', 'add_image_class');
function add_image_class( $classes ) {
 return $classes . ' insert-image'; //クラス名「insert-image」を追加する
}

上のコードでは、自動で追加されるクラス名の後ろに「insert-image」というクラス名を追加しています。

過去に挿入した画像には反映されないので、こうしよう

上のコードを書けば、以降に挿入した画像には自動で指定したクラス名を追加することができます。

ですが、これまで挿入した画像には自動で追加されるわけではないので、注意が必要です。「過去の画像にも同じクラス名を入れたい」という場合は、置換プラグイン「Better Search Replace」を使って、過去に挿入した画像に対して追加したいクラス名を入れてあげるのもいいと思います。

私は置換前の文字列「 wp-image-」置換後の文字列「 insert-image wp-image-」で一括置換をしました。

insert_image_add_class03

※他にももっといい方法がありましたら、ご教示いただけますと嬉しいです。

まとめ

WordPressで文章を書いたり、画像を追加する方法は様々だと思います。例えば、「メディアを追加」ボタンから挿入する画像以外にも、他のサイトやサービスから提供された画像（コード）を入れたい場合もあると思います。

もし「メディアから挿入した画像には、特別なスタイルを適用したいんだよな〜」という場合があった時には、役に立つ方法だと思います。

何かのご参考となりましたら嬉しいです。

応用：画像を挿入した時のHTMLを変えたい場合はこうする

Creator Clipの運営をしている鹿の方から、下のような要望がありました。

ちょっと調べたり、いろんな方から助言をいただきました。以下の2つの方法を参考にすればできると思います。

どちらも以前から交流のあるお二方の技術記事なのですが「ブログ書いてていろんな方と交流を持ててよかったな〜」と思った瞬間でした。実装できるといいですね！！

著者:bouya Imamura