Twenty Seventeen のアイキャッチ画像をブログに最適化するカスタマイズ

Twenty Seventeen はシンプルで素晴らしいテーマですが、アイキャッチの使い方がいまひとつパッとしません。

SHOP（商店）や会社のホームページを意識した作りだからかもしれませんが、せめてトップページやアーカイブページの記事一覧では、本文の抜粋表示とアイキャッチ画像はデフォルトにして欲しかったですよね。

そこで今回は、トップページとアーカイブページで、記事のタイトル脇に小さなアイキャッチ画像を表示するカスタマイズのご紹介です。

完成形はこんな感じです。

記事本文の抜粋表示については、以前の記事でご紹介しているので、そちらをご覧ください。

関連記事

WordPressの投稿一覧で記事を抜粋表示にする方法

アイキャッチと記事の抜粋表示を組み合わせれば、ブログ風のデザインに一気に変わりますよ。

Twenty Seventeen でアイキャッチ画像表示

WordPress には、標準でアイキャッチ画像の機能があります。しかし、Twenty Seventeen の場合、トップページとアーカイブページでは表示されない仕様です。

そこで、まずはアイキャッチ画像が表示されるようにカスタマイズしていきます。

子テーマのテーマディレクトリに template-partsディレクトリ → content-excerpt.php と空のファイルを作ったら、親テーマのcontent-excerpt.phpを、丸ごと子テーマにコピーしてください。

<?php
/**
 * Template part for displaying posts with excerpts
 *
 * Used in Search Results and for Recent Posts in Front Page panels.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
		<?php if ( 'post' === get_post_type() ) : ?>
			<div class="entry-meta">
				<?php
					echo twentyseventeen_time_link();
					twentyseventeen_edit_link();
				?>
			</div><!-- .entry-meta -->
		<?php elseif ( 'page' === get_post_type() && get_edit_post_link() ) : ?>
			<div class="entry-meta">
				<?php twentyseventeen_edit_link(); ?>
			</div><!-- .entry-meta -->
		<?php endif; ?>

		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
	</header><!-- .entry-header -->

	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->

</article><!-- #post-## -->

子テーマにファイルのコピーができたら、33行目を次の4行と置換します。

ちなみに、2行目の the_post_thumbnail(array( 150, 150)); で画像サイズを150px・150pxに指定しています。サイズを変更したければ、この部分を修正してください。

<div class="thumbnail-origin-class">
<?php the_post_thumbnail(array( 150, 150));?>
<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</div><!-- .thumbnail-origin-class -->

こんな感じです。まるまるコピペするのが間違い無いでしょう。

<?php
/**
 * Template part for displaying posts with excerpts
 *
 * Used in Search Results and for Recent Posts in Front Page panels.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
		<?php if ( 'post' === get_post_type() ) : ?>
			<div class="entry-meta">
				<?php
					echo twentyseventeen_time_link();
					twentyseventeen_edit_link();
				?>
			</div><!-- .entry-meta -->
		<?php elseif ( 'page' === get_post_type() && get_edit_post_link() ) : ?>
			<div class="entry-meta">
				<?php twentyseventeen_edit_link(); ?>
			</div><!-- .entry-meta -->
		<?php endif; ?>
		
		<div class="thumbnail-origin-class">
		<?php the_post_thumbnail(array( 150, 150));?>
		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
		</div><!-- .thumbnail-origin-class -->
	</header><!-- .entry-header -->
	
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->

</article><!-- #post-## -->

これで、アイキャッチが表示されるようになりました。

次に、タイトルの左隣りに表示されるように、スタイルシートで調整していきます。

子テーマのstyle.cssに次のコードを追記します。

/**********************************************/
/* アイキャッチ画像 */
/**********************************************/
.thumbnail-origin-class {
	display: table;
}

img.attachment-thumbnail.size-thumbnail.wp-post-image {
 	display: table-cell;
 	vertical-align: middle;
	width: auto;
	height: auto;
}

.home .entry-title,
.archive .entry-title {
	display: table-cell;
  	vertical-align: top;
	width: 75%;
	padding-left: 0.5em;
}

サイトを表示して確認してください。以下のようにアイキャッチとタイトルが並んでいれば完成です。

これでブログサイトらしいデザインとなりました。

以上で、「Twenty Seventeen のアイキャッチ画像をブログに最適化するカスタマイズ」を終わります。

関連記事

WordPressの投稿一覧で記事を抜粋表示にする方法

Twenty Seventeenのタイトル位置を変更するカスタマイズ

Twenty Seventeen：ナビゲーションメニューとスクロールボタンのカスタマイズ