WordPressの投稿画像に任意のclassを自動的に追加する方法
  • WordPressの投稿画像に任意のclassを自動的に追加する方法
  • 記事公開:2016/10/24
  • 最終更新:2019/02/24

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

WordPressの投稿画像に任意のclassを自動的に追加する方法をご紹介します。画像にオリジナルのクラスを追加しておけば、装飾の幅が広がるのではないでしょうか?ご興味のある方はご覧ください。6分間でマスターできます。

この記事は約 6 分で読めます。

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

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

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

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

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

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

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

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


function add_image_class( $classes ) {
return $classes . ' test-class';
}
add_filter('get_image_tag_class', 'add_image_class');

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

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

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

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

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


function add_image_class( $classes ) {
return $classes . ' test-class test-class2';
}
add_filter('get_image_tag_class', 'add_image_class');

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

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

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

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

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

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

return $classes . ' test-class';
return $classes . ' test-class test-class2';

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

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

半角スペースがある場合

class="alignnone size-large wp-image-11020 test-class"

半角スペースが無い場合

class="alignnone size-large wp-image-11020test-class"

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

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

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

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

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

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

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

まとめ

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

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

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

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2015/09/17

    【WordPress】記事へのコメントを送信した後にサンクスページを表示させる方法

    WordPressで構築したサイトの記事へコメントを送信した後にサンクスページを表示させる方法をご紹介します。思いつきで調べてみたカスタマイズ方法ですが、どなたかのお役に立つとうれしいです。 記事を読む

  • 2017/12/11

    【WordPress】投稿を保存した後もカテゴリー構造を保持する方法

    WordPressの投稿を保存するとカテゴリーの構造が保持されないのをご存知でしょうか?パッと見てカテゴリー構造が分からないので後々面倒な事になる可能性があります。投稿保存してもカテゴリー構造が保持されるようにするカスタマイズをご紹介します。 記事を読む

  • 2015/09/17

    WordPress管理画面のフッターテキストを変更する方法

    WordPress管理画面のフッターテキストを変更する方法をご紹介します。とある案件でカスタマイズ方法を勉強しましたのでシェアします。管理画面フッターのテキストを自由に変更する方法です。参考にしてください。 記事を読む

  • 2016/08/30

    セキュリティ強化!WordPressのユーザー名をadminから別のユーザー名に変更する手順

    WordPressのユーザー名をadminから別のユーザー名に変更する手順をご紹介します。adminというユーザー名を使っていると不正ログインをされる確立が高まります。3分間だけ時間時間をください。WordPressのユーザー名を変更する方法をお伝えします。 記事を読む

  • 2015/11/18

    WordPressのアイキャッチのパスだけを取得するコード

    WordPressのアイキャッチのパスだけを取得するコードをご紹介します。アイキャッチ画像のURLだけを取得したい方は参考にしてください。たった1分でアイキャッチの画像パスだけを取得する方法が分かります。 記事を読む

コメントを残す

(必須)

CAPTCHA