memorandum

備忘録

2018.01.14

WordPressのアイキャッチ画像を表示する

WordPressでアイキャッチ画像を表示するために、まずはアイキャッチ画像を有効にしておく。
これを書いておかないとアイキャッチ画像が使えるようにならないのでfunctions.phpに必ず書いておくこと。

// アイキャッチ画像を有効にする
add_theme_support( 'post-thumbnails' );

投稿画面で設定したアイキャッチ画像を表示する場合、通常は以下のように使用する。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <?php the_post_thumbnail( 'thumbnail' ); ?>
<?php endwhile; endif; ?>

アイキャッチ画像のサイズはthumbnail,medium,large,fullの4種類から設定する。
アイキャッチ画像が設定されていない場合、事前に準備した画像を表示させる場合は、以下のように使用する。

<?php
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'thumbnail' );
$src = $image[0];
$width = $image[1];
$height = $image[2];
$alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
?>

<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <?php if (has_post_thumbnail()): ?>
    <img src="<?php echo $image[0]; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" alt="<?php echo $alt; ?>"/>
  <?php else: ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg">
  <?php endif; ?>
<?php endwhile; endif; ?>
MAIL制作・お見積りのご依頼
ご相談・お問い合わせ