WordPressでアイキャッチ画像に任意のクラスを入れる方法

WordPressでアイキャッチ画像に任意のクラスを入れる方法WordPress

今回はWordPressのアイキャッチ画像(サムネイル)に任意のクラスを付与する方法を解説します。

アイキャッチ画像の基本的な表示方法については以下の記事で解説しているので参考程度にどうぞ。

>>WordPressでアイキャッチ画像を有効化して表示するコードの書き方

スポンサーリンク

アイキャッチ画像に任意のクラスを付与する方法

the_post_thumbnail()

the_post_thumbnail()を使って表示したアイキャッチ画像にクラスを付与する場合、第二引数に['class' => 'クラス名']という形で指定します。

the_post_thumbnail( 'thumbnail', ['class' => 'hoge fuga'] );

半角スペースで区切ると複数のクラスを付与できます。

 

get_the_post_thumbnail()

get_the_post_thumbnail()を使って表示したアイキャッチ画像にクラスを付与する場合は第三引数に同じように指定します。

$thumb = get_the_post_thumbnail( get_the_ID(), 'thumbnail', ['class' => 'hoge fuga'] );
echo $thumb;

get_the_post_thumbnail()は第一引数に記事のIDを指定するので、get_the_ID()で各記事のIDを取得しています。

クラスの付与の仕方はさっきと同じですね。

 

アイキャッチ画像に任意のクラス名を入れるとよりカスタマイズがしやすいと思うので、必要な時は試してみるといいですね。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
WordPress
スポンサーリンク
でざなり