よもやまチョモランマ

アイキャッチ画像をCSSで制御する

「アイキャッチ」だか「サムネイル」だか「サムネール」だか知らねえが。
function.phpに「small_thumb」「medium_thumb」「large_thumb」のサイズを記述して呼びだすのは、もううんざりです。
だって、あとからサイズを変えたくなったら、リサイズしてくれるプラグインを、わざわざ入れなきゃならないんだぜ。

というわけで、ちょっと調べました。

【参考】[WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする

なんということでしょう!
function.phpに

//アイキャッチ画像をシンプルにする
add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
    $html = preg_replace('/class=".*\w+"\s/', '', $html);    // class を削除する
    $html = preg_replace('/(width|height)="\d*"\s/', '', $html);    // width height を削除する
    return $html;
}

と記述しただけで

<?php the_post_thumbnail(); ?>

で呼びだした画像のコードに余計なものが一切なくなったではありませんか!
もうCSSつけ放題!
笑いが止まりませんwww

ちなみに、呼びだされる画像は「すっぴん」なので、大きさも縦横比もバラバラ。
WPっぽく正方形にトリミングしたい場合は、こちら
【参考】1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

あ~
思い通りになるって、うれしいわ~

border-radius: 100px;

付けて、まんまるにするのもいいですね~