WordPressの投稿画像に任意のclassを自動的に追加する方法
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. WordPressの投稿画像に任意のclassを自動的に追加する方法

最近の作業実績

  • 2020年11月09日子テーマの導入で発生した不具合を修正いたしました。
  • 2020年11月09日LPサイトのレイアウトの崩れを修正いたしました。
  • 2020年11月04日カスタム投稿のアーカイブページで発生していた不具合を修正いたしました。
  • 2020年11月04日WordPressサイトのSEO対策に関するアドバイスをご提供いたしました
  • 2020年11月04日WordPressで構築されたサイトのトップページのデザイン一新しました
  • 2020年11月04日ループ部分のデザインを変更いたしました。
  • 2020年10月28日カスタム投稿専用のカレンダーウィジェットを実装いたしました。
  • 2020年10月28日内部SEO対策を最適化いたしました。
  • 2020年10月28日WordPressサイトのサーバー移管を行いました。
  • 2020年10月28日新規サイト(WordPress)を制作いたしました
  • 2020年10月10日既存サイトをWordPressで再構築いたしました。
  • 2020年10月04日WordPress各ユーザーのユーザー名を変更いたしました。
  • 2020年10月04日PHPのバージョンアップに伴うデータベース確立エラーを解消いたしました。
  • 2020年10月04日WordPressサイトのサーバー移管を担当いたしました。
  • 2020年10月04日複雑怪奇なテーマ構造の一部を分かりやすく再構築いたしました。
  • 2020年10月04日既存サイトにWordPressを導入いたしました。
  • 2020年09月29日WordPress、プラグイン、テーマ、PHPのバージョンアップを行いました。
  • 2020年09月29日WordPressのセキュリティ対策を導入いたしました。
  • 2020年09月22日WordPressのパスワードをデータベースから直接変更いたしました。
  • 2020年09月21日WordPressテーマにオリジナルのPHPファイルを実装いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

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

この投稿は2019/05/04に加筆修正いたしました。

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

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

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

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を自動的に追加する方法をご紹介しました。

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

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

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

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

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

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

詳細を確認する


著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

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

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

コメントを残す

(必須)

CAPTCHA