アイキャッチ画像を出力するテンプレートタグ

よく使うアイキャッチ画像の表示設定についてまとめました。

テンプレートタグでアイキャッチ画像を表示する

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

<?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になっているので、配置したいサイズに変更しましょう。

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

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

アイキャッチ画像にcssでスタイルをつけたい時に設定します。

アイキャッチ画像を表示させる分岐の例

アイキャッチ画像を設定していない場合、代わりの画像を出力

こちらはアイキャッチ画像が設定されていない場合「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に下記のコードを記述します。

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
  
if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

 

画像サイズはcssで適宜調整します。
「/images/default.jpg」の部分には、ページに画像が使われていない場合に表示させる画像を指定します。

ループのサムネイル部分をこちらに差し替えます。

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />

 

こちらの記事を参考にさせていただきました。ありがとうございました。

そしてこちらが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; ?>

 

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

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

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

 

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

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

まずは下記を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="" />

 

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

アイキャッチ画像の指定がある場合、アイキャッチ画像の指定がない場合の代替画像にそれぞれ「object-fit」IE・Edge用のクラス「object-fit-image」を付与させた分岐の例です。

例）
<?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; ?>