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サイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

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

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

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

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

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

  • 2015-09-10

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

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

  • 2015-01-02

    WordPressでアップロードしたのに未使用のメディアを一括で削除する方法

    WordPressで構築したサイトを運営していると画像や動画など未使用のメディアが増えてくるかと思います。ほっといても良いのですが、ゴチャゴチャしてメディアの管理に支障を来たすかもしれませんし、用量の問題もあるかと思います。今回は未使用のメディアを一括で削除する方法をご紹介します。 記事を読む

  • 2015-10-20

    WordPress管理画面のダッシュボードを1カラムにカスタマイズする方法

    WordPress管理画面のダッシュボードを1カラムにカスタマイズする方法をご紹介します。ダッシュボードを1カラムに変更したい方は参考にしてください。たった1分でダッシュボードを1カラムに変更することができます。 記事を読む

  • 2015-09-28

    WordPressの管理画面に外部サイトへのリンクを設置する方法

    WordPressの管理画面にオリジナルリンクを追加して、そのリンク先を外部サイトに変更してみました。ブログ更新のとき、よく参考にするサイトへ簡単にアクセスしたいと考えてのカスタマイズです。コードを掲載しておきますのであなたも実装してみてください。 記事を読む

  • 2018-03-08

    投稿内の最初の画像を任意の場所に表示させる方法

    投稿内の最初の画像を任意の場所に表示させる方法をご紹介します。ループや関連記事などで各投稿の最初の画像を表示させたい場合など、今回の内容が役立ちます。5分程度で行えるカスタマイズです。 記事を読む

コメントを残す


(必須)