アイキャッチ画像をCSSで制御する
WordPress
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;
付けて、まんまるにするのもいいですね~