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

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

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

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

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

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

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

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

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

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

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

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

function add_class_images($content){
$my_custom_class = "test";
$add_class = str_replace('<img class="', '<img class="'.$my_custom_class.' ', $content);
return $add_class;
}
add_filter('the_content', 'add_class_images');

参考:投稿画像に任意のclassを追加する方法

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

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

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

1点だけ注意が必要です。

先ほどのコードで指定したクラスが付与されるのは、コードをfunctions.phpに追記した後に投稿された画像だけです。過去に投稿された画像にクラスは付与されません。

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

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

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

まとめ

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

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

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

この記事が気に入ったら【いいね】しよう!

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

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

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

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

詳細を確認する

著者:とあるWEBディレクター

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

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

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

  • 知ってて損なし!記事URLから投稿IDを取得する方法

    2015-09-10

    WordPressサイトの記事URLから投稿IDを取得する方法をご紹介します。なんでそんなことするの?と疑問に思われるかもしれませんが、投稿IDを取得することができれば、記事URLを指定するだけで様々な情報を取得できるようになります。カスタマイズの幅も広がること間違いありません。 記事を読む

  • WordPressのfunctions.phpがある場所

    2016-03-29

    WordPressのfunctions.phpがある場所をご存知ですか?WordPressに触れたばかりで知らなという方は、絶対に覚えておいた方が良い知識です。3分間だけ時間を確保して、このコンテンツに目を通してください。functions.phpの場所を理解することが出来ます。 記事を読む

  • WordPressの投稿・固定ページ・カテゴリーなどのIDを調べる方法

    2015-01-04

    WordPressの記事や固定ページ、カテゴリーなどには個別のIDが振り分けられています。このIDですが、何かしらのカスタマイズなどで必要になる機会が割りと多くあるように感じます。このページでは、記事・固定ページ・カテゴリーのIDを取得する方法をご紹介します。 記事を読む

  • 簡単だった!WordPressサイトの画像に自動的に付与されるclass等のタグを削除してみた。

    2015-09-18

    WordPressサイトの投稿に記事を挿入すると、自動的にclassやtitleなどのタグが付与されます。場合によってはこのタグは邪魔になる事ってありませんか?これらのタグを付与させないカスタマイズのご紹介です。コピペだけで実装可能です! 記事を読む

  • contact form 7に確認用メールアドレスの項目を設置する方法

    2016-04-18

    ContactForm7にメールアドレスの確認機能を実装する方法をご紹介しています。メールアドレスの入力ミスを防ぐことができるので便利かと個人的には考えています。2016/4/18の時点で動作確認を行っております。興味のある方は参考にしてください。コピペのみで実装可能です。 記事を読む

コメントを残す


(必須)

CAPTCHA