WEB制作、マーケティングに関する情報をお届けします。

サイトの軽量化をする際に画像のサイズの調整は必須になります。
サイトやコンテンツの幅に合わせた画像サイズを設定するには必ずと言っていいほどオリジナルサイズのアイキャッチ画像を準備します。

オリジナルサイズの登録

functins.phpに下記を記載します。

add_theme_support('post-thumbnails');
add_image_size('original_size',500,300,true);

add_theme_supportはアイキャッチを管理画面に設定できるようにするためのものです。
add_image_sizeはオリジナルサイズのアイキャッチを作成するためのものです。

add_image_size('アイキャッチの名前',横幅,高さ,true);

アイキャッチ名は画像URLを取得する際に使用、横幅と高さは指定サイズでトリミングを行います。
オリジナルサイズのアイキャッチは以下のように複数設定できます。

add_image_size('original_size',500,300,true);
add_image_size('original_size_small',200,300,true);
add_image_size('original_size_middle',300,600,true);
add_image_size('original_size_large',400,700,true);

取得・表示する方法

テンプレートに以下を記述することで出力できます。

ループ内で使用する場合

出力したいところに記載

<?php
    $thumb = get_the_post_thumbnail_url(get_the_ID(),'original_size');
    if(!empty($thumb)){
?>
    <img src="<?php echo $thumb ?>" alt="<?php get_the_title(); ?>">
<?php }else{ ?>
    <img src="<?php echo get_template_directory_uri(); ?>/img/default_thumb.jpg" alt="<?php get_the_title(); ?>">
<?php } ?>

解説

$thumb = get_the_post_thumbnail_url(get_the_ID(),’original_size’);
get_the_ID()でループ内で記事IDを取得します。
original_sizeはfunctions.phpに登録したアイキャッチサイズを取得します。
if(!empty($thumb))で記事にアイキャッチが設定されているかどうかを判別します。
アイキャッチが設定されていた場合はif内を処理します。
<?php echo $thumb ?>で画像のURLを出力、<?php get_the_title(); ?>で記事のタイトルをalt属性に出力しています。
サムネイルが設定されていない場合はデフォルトの画像を用意してURLを出力しておけばelse内を処理します。

ループの外で使用する場合

記事IDが必ず必要になります。

<?php
    $post_id = 8;
    $thumb = get_the_post_thumbnail_url($post_id,'original_size');
    if(!empty($thumb)){
?>
    <img src="<?php echo $thumb ?>" alt="<?php get_the_title(); ?>">
<?php }else{ ?>
    <img src="<?php echo get_template_directory_uri(); ?>/img/default_thumb.jpg" alt="<?php get_the_title(); ?>">
<?php } ?>

記事IDを指定してget_the_post_thumbnail_urlに渡してあげるだけです。
頻度はあまり高くないかなと思います。