晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

WordPress)記事一覧にアイキャッチ画像を表示させる。

WordPressテーマ「Semplicemente」では、アイキャッチ画像を設定しても記事一覧にアイキャッチ画像が表示されない。

テーマ「Semplicemente」で、アイキャッチ画像を記事一覧に表示するように設定した。

「wp-content\themes\テーマフォルダ」の下の「content.php

\xampp\htdocs\wordpress\wp-content\themes\semplicemente\content.php

の以下の部分に、「the_post_thumbnail('thumbnail');」を追加する。

<div class="entry-content">
	<?php the_post_thumbnail('thumbnail'); /* !追加したアイキャッチ画像表示タグ */ ?>
	<?php the_excerpt(); ?>
	<?php
		wp_link_pages( array(
			'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'semplicemente' ),
			'after'  => '</div>',
		) );
	?>
</div><!-- .entry-content -->

以下のように、記事一覧にアイキャッチ画像が表示された。

しかし、記事要約文が画像の下になってしまう。

要約文をアイキャッチ画像の右に回り込ませるように設定するためには、「追加CSS

  • 外観 > カスタマイズ > 追加CSS

に、以下のCSSを設定する。

テーマ「Semplicemente」で、アイキャッチ画像を正方形で表示するための設定も追加。

/* 記事一覧の要約文をアイキャッチ画像の右に回り込ませる */
.entry-content > img {
	width:120px;
	height:120px;
	object-fit:cover;
	float: left;
	margin-right: 14px;
}