Twenty Twelveのトップページにアイキャッチと記事タイトルだけ表示するテンプレートのコード

前の記事で作成したタイトルだけ表示コードにしたあとに、ついでにアイキャッチ画像とタイトルをトップページで表示するコードを作成しました（Twenty Twelveで作成）。

content.phpファイルの中身を全て下のコードで書き換えると、上のイメージのようにアイキャッチ画像とタイトルを表示するようになります。

コードの内容は、前回の記事の内容とほぼ同じです。
違う部分は、アイキャッチ画像を表示条件「!is_home()」をやめてアイキャッチ画像の表示部分だけthe_post_thumbnail(‘middel’)として、サイズ設定した画像を使用しています。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<div class="featured-post">
<?php _e( 'Featured post', 'twentytwelve' ); ?>
</div>
<?php endif; ?>
<header class="entry-header">

<?php if( !is_home() ) : ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<?php the_post_thumbnail('middle'); ?>
<?php endif; ?>

<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<h1 class="entry-title">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
</h1>
<?php endif; // is_single() ?>
</header><!-- .entry-header -->

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<?php if( !is_home() ): ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<?php endif; ?>

<?php if( !is_home() ) : ?>
<footer class="entry-meta">
<?php twentytwelve_entry_meta(); ?>
<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
<?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
<div class="author-info">
<div class="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentytwelve_author_bio_avatar_size', 68 ) ); ?>
</div><!-- .author-avatar -->
<div class="author-description">
<h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
<p><?php the_author_meta( 'description' ); ?></p>
<div class="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentytwelve' ), get_the_author() ); ?>
</a>
</div><!-- .author-link	-->
</div><!-- .author-description -->
</div><!-- .author-info -->
<?php endif; ?>
</footer><!-- .entry-meta -->
<?php endif; ?>
</article><!-- #post -->

functions.phpファイルにadd_image_size()を追加して画像サイズの設定をしています。

add_image_size( 'middle', 200, 200, true);</pre>

style.cssファイルに追加するCSSサンプルが下にコードになります。

.site-content article {
  border-bottom: none;
  margin-bottom: 14px;
  margin-bottom: 1rem;
  padding-bottom: 0;
  padding-bottom: 0rem;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.home .entry-header img.wp-post-image {
  margin-bottom: 10px;
}
.home article {
  border: solid 2px #ccc;
  float: left;
  width: 180px;
  height: 240px;
  margin-right: 10px;
  margin-bottom: 24px;
  margin-bottom: 1.7142857142rem;
  padding-bottom: 10px;
  overflow: hidden;
}
.home .entry-title {
  padding: 0 5px 0;
  line-height: 1.428571429;
  font-size: 18px;
}