アイキャッチ画像を出力するテンプレートタグ（＆ object-fit）

分岐でアイキャッチ画像を表示させたい！

アイキャッチ画像を設定しない場合、何か代わりの画像を出力させたい

こちらはアイキャッチ画像が設定されていない場合「no-image.png」を表示させる例です。
画像のurl、alt、width、heightなどを適したものに書き換えます。

例）
<?php if ( has_post_thumbnail() ): //アイキャッチ画像を指定している場合 ?>
<?php the_post_thumbnail( 'thumbnail' ); //カッコ内はアイキャッチ画像のサイズを指定（初期値は150×150px） ?> 

<?php else: // それ以外 ?>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-image.png" alt="no image" width="100" height="100" />
<?php endif; ?>

 

最初の画像をアイキャッチ画像にする設定をしているときは…

functions.phpでページの最初の画像をアイキャッチ画像にする設定をしている場合の分岐例です。
設定についてはこちら

例）
<?php if ( has_post_thumbnail() ): //アイキャッチ画像を指定している場合 ?>
<?php the_post_thumbnail( 'thumbnail' );//カッコ内はアイキャッチ画像のサイズ（初期値は150×150px） ?> 

<?php else: // それ以外 ?>
<img src="<?php echo catch_that_image(); //ページの最初の画像 ?>" alt="<?php the_title(); ?>"/> 

<?php endif; ?>

 

アイキャッチ画像の表示設定

アイキャッチ画像にクラスを付与する場合

例）
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'news-eyecacth' ) ); ?>

 

アイキャッチ画像のサイズについて

<?php the_post_thumbnail( 'thumbnail' ); ?>

カッコ内の「thumbnail」はサイズの設定です。
画像サイズについて何も変更していない場合、デフォルトは下記のサイズになっています。

thumbnail（サムネイル） …150 x 150px
medium（中サイズ） …300 x 300px
large（大サイズ） …1024 x 1024px
full（最大サイズ） …アップした画像のサイズ

下記のように、数値を指定することも。こちらの例は400×300pxで出力されます。

<?php the_post_thumbnail( array(400,300) ); ?>

 

新着一覧などで画像を大きめに配置したら、画質が悪くなっていたことはないですか？
サイズ設定が初期値のままのthumbnailになっていて、サムネイルサイズを枠の大きさに引き伸ばしているからかもしれないですね。

object-fitを使って画像の比率を変えずに画像サイズを指定したい

cssのプロパティ「object-fit」は、画像の比率を変えずに縦横のサイズを指定できます。
例えば150 x 150pxの画像を100 x 150pxの枠に表示したい場合、横が細くなった変な比率になってしまいますよね。
それを「object-fit」なら、はみ出た部分をカットしたり、余白を作って全体を表示させたりを指定できます。

例）
object-fit: cover; /*はみ出た部分をカット*/
object-fit: contain; /*余白を作って全体を表示*/

 

とても便利ですね！
ただIE・Edgeでは「object-fit」が効かないので「ofi.min.js」で対応させます。
ofi.min.jsのダウンロードはこちら

「object-fit」をIE・Edgeにも対応させる

まずは下記をbodyタグ直前に配置

例）
ofi.min.jsを読み込み
<script src="<php echo get_stylesheet_directory_uri(); ?>/js/ofi.min.js"></script>

ofi.min.jsを実行
<script>
  objectFitImages('.object-fit-image');
</script>

 

続いてcssにスタイルを記述

例）
.object-fit-image{
object-fit: cover;
font-family: 'object-fit: cover;';
}

 

htmlにクラスを指定

例）
<img class="object-fit-image" src="images/aaa.jpg" alt="" />

 

アイキャッチ画像の出力にIE・Edge用のスタイルを指定

例）
<?php if ( has_post_thumbnail() ): //アイキャッチ画像を指定している場合 ?>  
<?php the_post_thumbnail('thumbnail', array('class' => 'object-fit-image')); //クラスobject-fit-imageを設定 ?>

<?php else: // それ以外 ?>
<img src="<php echo get_stylesheet_directory_uri(); ?>/images/no-image.png" alt="no image" class="object-fit-image"/>
<?php endif; ?>