WordPressでアイキャッチ画像をサイズ別で出力を振り分ける条件分岐のやり方をメモがてらご紹介します。トップページなんかでアイキャッチのサイズによって表示の仕方を変えたりしたいなんて時に便利です。応用次第で色々とカスタマイズしやすくなりそうですね。
[ads_center]
get_post_thumbnail_idとwp_get_attachment_image_srcを使う
get_post_thumbnail_idでアタッチメント情報のidを取得して、wp_get_attachment_image_srcにそのidとfull（元のサイズ）を指定します。これでアイキャッチ画像の情報を取得することができます。
今回の欲しい情報としては「url」、「横幅」、「高さ」の3つです。これさえ取得できれば、あとは条件分岐を使って好きなように出力を振り分けることが可能です。
$thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメント情報のidを取得
$image = wp_get_attachment_image_src($thumbnail_id, 'full'); // アイキャッチ画像の情報を取得
$src = $image[0]; // url
$width = $image[1]; // 横幅
$height = $image[2]; // 高さ
if($width > 500) {
echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" class="sample1" />';
} else {
echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" class="sample2" />';
}
例えば、上記の場合は横幅が500pxより大きいサイズのアイキャッチ画像が指定されていた場合はsample1というクラス名を、それ以外はsample2というクラス名を付与する、といった振り分けになります。
ここでは分かりやすく単純な振り分けにしてみましが、こんな感じでサイズ別で色んな出力を振り分けることができるので、アイキャッチを効果的に使いたい場合は覚えておきたいところです。
以下が参考になりました。
