【Twenty Twelve】トップページに記事タイトルだけ表示するコード例

Twenty Twelveのテーマを編集して、下の画像のようにトップページで記事タイトルだけを表示するコードのサンプルを作成しました。記事タイトルだけだと寂しいので、画像ではdiv.entry-titleの後にthe_time()で日付も追加しています。

content.phpファイルの中身を全て削除して下のコードを入力すると、トップページに記事タイトルだけを表示して、他は通常の表示をします。

<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 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 -->

コード自体は、もともとのcontent.phpファイルなんですが、3箇所「!is_home()」で囲んでトップページの表示は、タイトルだけを表示するような形にしています。

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;
}
.entry-header {
  margin-bottom: 0px;
  margin-bottom: 0rem;
}
.entry-header .entry-title {
  border-bottom: 1px solid #ccc;
  line-height: 1.846153846;
}