WordPressの記事一覧ページなどで記事のアイキャッチ画像を表示させるには、
<?php the_post_thumbnail(); ?>
というPHPコードを記述することで記事のアイキャッチ画像を表示させることが可能になります。
例えば
- サイトURL：https://aaa.com/
- ファイル名：test.jpg
- アップロード日：2020年1月
上の条件でアップしたtest.jpgを記事のアイキャッチ画像として設定し、記事一覧ページのPHPファイルにアイキャッチ画像を元々の画像サイズで表示させるには
<?php the_post_thumbnail('full'); ?>
とPHPコードを記述することで
<img src="https://aaa.com/wp-content/uploads/2020/01/test.jpg">
という感じでアイキャッチ画像が表示されます。
しかし、コーディングデータによってはアイキャッチ画像を表示させる<img src=””>にclassを追加できたら良いなぁ、となる場面が出てくることもあるかもしれません。
そこで今回はアイキャッチ画像の<img src=””>にclassを追加させる方法についてお話したいと思います！
アイキャッチ画像にclassを追加させる方法は？
今回、例としてアイキャッチ画像にclass=”thumb-img”を追加させたいと思います。
その場合、
<?php the_post_thumbnail( 'full', array('class' => 'thumb-img') ); ?>
上記のように記述することで以下のようにアイキャッチ画像が出力されます！
<img src="https://aaa.com/wp-content/uploads/2020/01/test.jpg" class="thumb-img">
まとめ
今回の方法を使えば、アイキャッチ画像にclassを追加したい！となった時に実装可能になるので、是非ともご活用ください！
