WordPressでアイキャッチ画像を表示するには、アイキャッチ画像を有効化する必要があるので、有効化になっていない場合はまず「functions.php」に以下を記述します。
add_theme_support(‘post-thumbnails’);
有効化されると投稿ページの編集画面にて、アイキャッチ画像の設定が可能になります。
アイキャッチ画像を表示
設定したアイキャッチ画像を表示するには、the_post_thumbnail関数を使用。
以下のコードをループ内に記述します。
<?php the_post_thumbnail(); ?>
また、phpの値としてアイキャッチ画像を取得する場合は、get_the_post_thumbnail関数を使用します。
<?php
$thumbnail = get_the_post_thumbnail( $post_id, ‘thumbnail’ );
echo $thumbnail;
?>
$thumbnail = get_the_post_thumbnail( $post_id, ‘thumbnail’ );
echo $thumbnail;
?>
アイキャッチ画像のサイズを指定
アイキャッチ画像のサイズを指定することもでき、以下の値を指定することができます。
<?php the_post_thumbnail(‘thumbnail’); ?> //サムネイル(デフォルト 150px × 150px)
<?php the_post_thumbnail(”); ?> //中サイズ(デフォルト 300px × 300px)
<?php the_post_thumbnail(”); ?> //大サイズ(デフォルト 640px × 640px)
<?php the_post_thumbnail(”); ?> //フルサイズ(アップロードした画像の元サイズ)
<?php the_post_thumbnail( array(横, 縦) ); ?> //任意のサイズ
<?php the_post_thumbnail(”); ?> //中サイズ(デフォルト 300px × 300px)
<?php the_post_thumbnail(”); ?> //大サイズ(デフォルト 640px × 640px)
<?php the_post_thumbnail(”); ?> //フルサイズ(アップロードした画像の元サイズ)
<?php the_post_thumbnail( array(横, 縦) ); ?> //任意のサイズ
アイキャッチ画像に独自クラスを付与
アイキャッチ画像には自動でクラスが出力されますが、独自のクラス名をつけることもできます。
<?php the_post_thumbnail(‘full’, array(‘class’ => ‘クラス名’)); ?>
条件分岐を使ってアイキャッチ画像を表示する方法
if文の条件分岐を使ってアイキャッチ画像が設定されているかどうかの判別をすることができます。
以下のコードでは、アイキャッチがあれば表示、なければダミー画像を表示するときの条件分岐です。
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src=”<?php echo get_bloginfo(‘template_directory’); ?>/img/dummy.jpg” alt=”ダミー画像”>
<?php endif; ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src=”<?php echo get_bloginfo(‘template_directory’); ?>/img/dummy.jpg” alt=”ダミー画像”>
<?php endif; ?>
Leave a Comment