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

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

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

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

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

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サイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

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

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

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

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

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

詳細を確認する

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

著者:takaya kondo

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

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

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

  • 2016-03-12

    WordPressのカスタムメニューでアクティブページだけ装飾を変える方法(カレント表示)

    WPのカスタムメニューでアクティブページだけ装飾を変える方法をご紹介します。現在表示されているページがグローバルメニューの中にある場合、そのメニュー部分だけ装飾を変えることができれば、ユーザビリティの向上にも繋がります。3分だけコンテンツを読んでみてください。 記事を読む

  • 2017-08-12

    既存サイトをWordPress化する6つのメリットと2つのデメリットをまとめてみました

    既存サイトをWordpress化するサービスを運営していると、既存サイトをWordpress化するメリットってなんですか?と聞かれることが多々あります。そこで、既存サイトをWordpress化するメリットをまとめてみました。 記事を読む

  • 2016-06-27

    カスタムフィールドの値が一致するかどうかで条件分岐する方法

    カスタムフィールドの値が一致するかどうかで条件分岐する方法をご紹介します。カスタムフィールドを利用しているサイトであれば、意外と利用する機会は多いです。覚えていて損はありません。この機会に3分間でマスターしてしまいましょう。 記事を読む

  • 2015-01-25

    WordPressで特定のカテゴリーに分類されている子カテゴリー一覧を表示する方法

    WordPressで特定の親カテゴリーに分類されている子カテゴリー一覧を表示する方法をご紹介します。とある仕事で必要となり実現する方法を調べました。同じことがしたい方は参考にしてください。 記事を読む

  • 2015-09-09

    WordPressのテーマフォルダにある画像をテーマファイルで表示させるスマートな方法

    テーマフォルダの画像をテーマファイル内でスマートに表示させよう! WordPressのオリジナルテーマを作成し ... 記事を読む

コメントを残す


(必須)