WordPressでアイキャッチってよく使うと思います。
ただ、画像サイズを上手にカスタマイズできない人のために画像サイズを自由に設定する方法をまとめました。
アイキャッチを有効にする
まず、アイキャッチを有効にします。
functions.phpに以下のコードを追加します。下のほうに追加しておきましょう。
// アイキャッチ有効
add_theme_support('post-thumbnails');アイキャッチの自動トリミングコード
functions.phpに入力します。
/* サイズを複数設定 */
add_image_size( 'l-size', 300, 200, true );add_image_size( '1：名前 任意の英数字', 2：横幅, 3：縦幅, 4：トリミング位置);①名前 任意の英数字：自分で好きな名前をつけてください。
②横幅：トリミングしたい横幅のサイズです。pxはいりません。
③縦幅：トリミングしたい縦幅のサイズです。pxはいりません。
④トリミング位置：中央の時はtrueと入力します。
アイキャッチを表示する方法
表示したい場所に以下コードを入力します。例えば、トップページ、カテゴリー一覧、タグ一覧など…
例
<?php echo get_the_post_thumbnail($post->ID, 'l-size'); ?>説明
<?php echo get_the_post_thumbnail($post->ID, '1：先ほど入力した名前 任意の英数字'); ?>①先ほど入力した名前 任意の英数字：先ほど同じものを入力してください。この例であれば「l-size」
注意点
トリミングが行われるタイミングは、管理画面から画像をアップロードする瞬間です。
つまり、すでにアップされている過去のアイキャッチに関しては適応されません。その場合は、もう一度違う画像をアップすることで、変更が可能になります。
このサイトでの使用例
functions.phpに記入
/* サイズを複数設定 */
add_image_size( 'l-size', 640, 360, true );index.phpに記入
<p class="blockB-img01"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'l-size', array('class' => 'img-fluid') ); ?></a></p>