Twenty Fifteenのトップページを抜粋一覧表示にカスタマイズ

2014/12/21[公開] 2017/07/29[最終更新]

 WordPress4.1日本語版のアップデートが来たので、さっそく公式テーマのtwenty fifttenにしてみました。

 やはり最初に気になったのはトップページやアーカイブのページに記事全文がずらずら並んでいるというのは見にくいので、抜粋表示にカスタマイズしました。twenty fourteenからずいぶん変わっていて、twenty fourteenのやり方は通用しませんが、サイト内検索の結果が抜粋表示されるという部分をそのままトップページでも利用しようという、いかに楽してカスタマイズできるかという方針から探っていたらできました。

スポンサー リンク

子テーマにindex.phpとcontent.php、archive.phpをコピー

 テーマを変更したので、子テーマも新たにtwentyfifteen用に作成した前提です。twentyfifteenのテーマフォルダから、index.phpとarchive.php、content.phpを子テーマにコピーします。

content.phpをリネームして編集

 content.phpを、content-○○○.phpにリネームします。

今回は例として、content-top.phpにリネームしました。

 そしてcontent-top.phpを編集します。29行目から53行目を変更します。

	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s', 'twentyfifteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
		?>
	</div><!-- .entry-content -->

	<?php
		// Author bio.
		if ( is_single() && get_the_author_meta( 'description' ) ) :
			get_template_part( 'author-bio' );
		endif;
	?>
	<div class="entry-content">
         <?php the_excerpt(); ?>
	</div><!-- .entry-content -->

 29-53行目を上記の3行に書き換えます。

index.phpとarchive.phpを編集

 index.phpは39行目を変更します。archive.phpファイルは42行目を変更します。どちらもcontent-○○○.phpの「-○○○」部分を付け加えるだけです。

 get_template_part( 'content', get_post_format() );
 get_template_part( 'content-top', get_post_format() );

表示確認

 トップページを開いてみます。 twefif1

 なかなかいい感じになりました。抜粋の最後も、「続きを読む」に最初からなっています。アーカイブやカテゴリーでの表示も同じようになっていればOKです。

最後にひとこと

 content.phpの変更は、サイト内検索用のcontent-serch.phpの中身を参考に変更しています。あとは、index.phpの変更したところの上に書いてある注釈を読んでのカスタマイズでした。

(2017/07/29追記)プラグインで簡単に抜粋表示にすることもできます。

スポンサー リンク

こちらの記事もどうぞ

3 Replies to “Twenty Fifteenのトップページを抜粋一覧表示にカスタマイズ”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です