はじめに
WordPressのテーマ作成にあたってダミーの投稿表示しようとしたところ、アイキャッチ画像が思っていたように表示されなかった。
原因はthe_post_thumbnail()
第一引数にメディア設定のサイズをmediumやlargeなどの文字列で渡すことによって、設定の値をimgの属性に設定してくれる。
the_post_thumbnail('medium')とすることで、メディア設定の中サイズが適用され、<img src="~/~/hoge.jpg" width="300" height="300" />というhtmlを出力してくれる。
出力されるhtmlにclassをつければいいんじゃね？
出力されるimgタグにclassを付与するにはthe_post_thumbnail()の第二引数に連想配列を渡すことで実現可能になる。the_post_thumbnail('medium', array('class' => 'hoge')
はい、これでhogeクラスがついたimgタグが出力されます。<img src="~/~/hoge.jpg" width="300" height="300" class="hoge" />
ブラウザで確認すると見事にサイズが変わっていませんでした
CSSの優先度
ここから紹介するのは、どこで定義されたCSSが最終的に読み込まれるかです。詳細度ではないので注意です！
何もCSSを適用していない場合はブラウザのCSSが適用されます。
ユーザーエージェントstylesheetと呼ばれるやつですね。
次に読み込まれるのは、HTMLで読み込んでいるCSSです。
linkタグで読み込んでいるアレです。
最後に読み込まれるのはHTMLのstyleタグまたは属性の値が読み込まれます。
整理するとこんな感じです。ユーザーエージェントstylesheet < linkタグで読み込んだCSS < styleタグor属性の値
ここまでくるとclassをつけてもCSSが属性の値を優先的に読み込んでいた理由がわかります。
アイキャッチ画像の取得方法を変えよう！
src属性さえ取得できたら画像表示できるやんという発想の転換からthe_post_thumbnailを利用をやめました。get_post_thumbnail_id()をループの中で使用し、アイキャッチ画像のidを取得し、wp_get_attachment_image_src()の第一引数にさっき取得したidを渡して、配列の0番目の値をimgのsrc属性に渡せばオッケー。
// ループ始まり$id=get_post_thumbnail_id();// 画像のidを取得$img_info=wp_get_attachment_image_src($id,'none');// 画像の情報を取得 詳しくはCodex見てね！<imgsrc="<?php echo $img_info[0] ?>"class="hoge"/>// ループおわりwp_get_attachment_image_srcの第二引数に注目して下さい。
本来であればここにmediumやlargeを渡すんですが、サイズを指定したくない場合はnoneを渡せばいいみたいです。
noneはthe_post_thumnailでは使えませんでした。
ドキュメントにnone渡せるって書いてないじゃん。。。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_src
これでwidthとheight属性が付与されなくなったので、晴れてclassに割り当てられたCSSが装飾されるようになりました！
おわりに
一つのテンプレートタグに囚われ過ぎないように気をつけます