アイキャッチ画像サイズを変更 add_image_size()

4つを2つに

WordPressの無料テンプレートをカスタマイズしていて、アイキャッチ画像を並べているセクションがありました。
4つの画像が1列に並んでいたのを、2つで1列に改造します。

HTML/CSSソース

.parent{
    width:25%;
}
<div class="parent">
<img>
</div>

CSSは↓こんな感じで良いとして、

.parent{
    width:50%;
}

PHPソース

imgを吐き出しているところは、こんな感じ。

<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('custom-thumb'); ?>
<?php endif; ?>

the_post_thumbnail()は、

現在の投稿について、投稿編集画面で設定されたアイキャッチ画像（以前は投稿サムネイルと呼ばれていました）を表示します。

という、テンプレートタグです。
この中で指定されている「custom-thumb」は任意の文字列で、add image size()で指定することができます。
↓こんな感じで指定します。

add_image_size('custom-thumb', 300, 300, true);

add image size()は、

新しい画像サイズを登録する関数です。これは新しい画像がアップロードされる際に、WordPressがアイキャッチ画像 (以前はサムネイルと呼ばれていたもの) を指定した大きさで生成する時に使われます。

ということなので、もし、新たなサイズを登録したら、アイキャッチ画像を作り直さねばならないのです。
「Wordpress アイキャッチ画像の再生成」辺りのキーワードでお好きなプラグインを導入してアイキャッチ画像作り直してみると、思った通りに動くと思います。

テンプレートという事もあり、アイキャッチ画像のサイズを変えると他の所にも影響しそうなので、アイキャッチ画像サイズではなく元の画像サイズで表示させるように変更しました。

<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('full'); ?>
<?php endif; ?>

ー記事をシェアするー

B!