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

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

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

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

更新が面倒なHTMLサイトお持ちではありませんか?

ADhttp://wordpress-supporters.com/wordpress-ka/

そのサイト、Wordpressを導入して更新しやすくしちゃいましょう!
Wordpress請負人なら、既存サイトでもWordpress化することが可能です。
見積もり無料、実績100件以上、サポート充実、再現性バツグン。

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

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

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

更新が面倒なHTMLサイトお持ちではありませんか?

ADhttp://wordpress-supporters.com/wordpress-ka/

そのサイト、Wordpressを導入して更新しやすくしちゃいましょう!
Wordpress請負人なら、既存サイトでもWordpress化することが可能です。
見積もり無料、実績100件以上、サポート充実、再現性バツグン。

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

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

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

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

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

詳細を確認する

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

著者:takaya kondo

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

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

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

  • 2015-02-26

    【完全版】WordPressサイトの検索結果から「ページ」を除外する方法

    WordPressサイトの検索結果から「ページ」を除外する方法をご紹介します。あらゆる不具合を回避した方法です。参考にしてください。 記事を読む

  • 2015-09-20

    WordPressの「続きを読む」リンクから#more…をコピペで消してみた。

    WordPress の 「続きを読む」()を利用したとき、「続きを読む」をクリックすると、URL の末尾に #more … といったハッシュが付与されます。以前から必要ないと感じていたのでこの部分をコピペのみで削除してみました。 記事を読む

  • 2016-03-12

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

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

  • 2015-10-07

    【WordPress】溜まったカスタムフィールドの変数をサクッと削除する方法

    溜まったカスタムフィールドの変数をスッキリと削除させる方法をご紹介します。カスタムフィールド使用していると、もう使わなくなった変数が溜まったりしてしまいませんか?この記事を参考にすれば、2分後には溜まった変数をスッキリと削除することができます。 記事を読む

  • 2017-11-23

    WordPressで設定しているアイキャッチ画像を一括削除する方法

    Wordpressで設定しているアイキャッチ画像を一括削除する方法をご紹介します。コピペだけで行える方法です、興味のある方は参考にしてください。 記事を読む

コメントを残す


(必須)