WordPressの投稿画像に任意のclassを自動的に追加する方法

WordPressサイトで投稿した画像にオリジナルのクラスを指定する方法

画像を投稿する時、その画像にオリジナルのクラスを指定したい。
とある案件で必要になったカスタマイズです。

WordPressのメディアに投稿した画像にオリジナルのクラス、例えば【class=”test”】を追加したいという希望がクライアント様から出てきました。

このカスタマイズは、色々な案件でよくご要望が出てくるのですが、これまでにその方法をご紹介したことがありませんでした。

備忘録もかねて、シェアをさせていただきます。

投稿した画像にオリジナルのクラスを付与するカスタマイズ

カスタマイズの方法は簡単です。
お馴染みのfunctions.phpにコードを1つ追記するだけでOKでした。

以下のコードをfunctions.phpに追記してください。
場所はどこでも構いません。

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

赤文字の【test-class】部分が付与したいクラス名になります。
この部分を付与したいクラス名に変更してください。

このコードを追記するだけで、投稿した画像のタグに【test-class】とオリジナルのクラスを付与できます。
実際にコードを追記して、画像タグを確認してみてください。

複数のクラスを指定したい場合

先ほどのコードは、【test-class】というクラスを一つだけ追加する方法でした。
複数のクラスを指定したい場合は、以下のようにします。

【test-class2】というクラスが追加されています。
クラス名を複数指定したい場合、半角スペースで区切ってクラス名を増やしてください。

クラス名を半角スペースで区切らないと、不具合が生じてしまいます。
詳しくは後述しています。

投稿した画像にオリジナルのクラスを付与するカスタマイズの注意点

今回のカスタマイズを実践する場合、いくつかの注意が必要です。
個別に開設していきます。

注意：クラス名の区切りには半角スペースが必須

上記のコードを確認すると分かりますが、オリジナルクラスの前に【半角スペース】があります。
この半角スペースは、絶対に削除しないでください。

クラス名が一つだけの場合、複数の場合、いずれも各クラス名の前に半角スペースがあります。
この半角スペースは、絶対に削除しないでください。

この半角スペースを削除してしまうと、Wordpressが自動的に挿入する複数のクラスの最後と、今回のカスタマイズで自動挿入させるオリジナルクラスが合体してしまうためです。

半角スペースがある場合

半角スペースが無い場合

半角スペースがないと、上記の赤文字部分のように、クラスが合体してしまいます。
そうなりますと、どちらのクラスに設定した装飾も反映されません。

半角スペースを削除しないように注意してください。

注意：過去の画像にクラスは付与されません

今回のカスタマイズでクラスが付与されるのは、コードをfunctions.phpに追記した後に投稿された画像だけです。過去に投稿された画像にクラスは付与されません。

過去の画像にクラスを付与したい場合は、過去記事の画像タグを個別に編集しなければなりません。

この点を理解していないと、過去記事の画像にもクラスが付与されていると考え、結果として付与されていないとガッカリすることになります。

過去記事の画像にはオリジナルクラスは付与されません。
この点をしっかりと認識してください。

まとめ

WordPressの投稿画像に任意のclassを自動的に追加する方法をご紹介しました。

画像周りの装飾をする時など、役立つカスタマイズかと思います。
過去に投稿した画像にはクラスが付与されませんので、この点だけ注意が必要です。

コピペだけでカスタマイズできますので、ぜひ挑戦してみてください。