Twenty Nineteenのトップページ新着一覧をタイル風にカスタマイズする

更新情報

2019/1/10style.cssのコードを変更しました。

更新内容はstyle.cssのコードの見出しあたりに記載しています。

TwentyNineteenの使いずらい要因の一つが、トップページの「新着一覧」がＰＣ・タブレットで見るとめちゃくちゃ見にくい。

トップページなので、せめて抜粋文であってもらいたいですが、なぜか各記事の本文が全部表示されているという仕様です。

今回はそのトップページにある新着一覧を見やすくし、画面上に複数の記事が表示されるようカスタマイズしていきます！

基本的にコピペ・当記事を見ながら編集すれば簡単にできるので、お気軽にお試しください～

子テーマ必須です！

2，3個のファイルをカスタマイズするので、必ず子テーマを使用してください。

TwentyNineteenの子テーマの作り方はこちら

【WordPress】テーマTwenty Nineteen の子テーマを作る方法

子テーマがどのような機能かわからない場合はこちら

デフォルト状態を確認

デフォルトの状態では、このようになっています。

若干分かりにくいですが、記事一覧の１つ目と２つ目の記事の間で、上記の文章の部分が記事の本文の最後の部分になっています。

記事の本文が最初から最後まで表示されているので、記事ページなのかトップページなのかよくわからない状態です。
また、上記画像右側で赤く囲ってますが、ページが長すぎてスクロールバーがちっちゃくなっています。

ちなみにカテゴリやアーカイブ一覧のページではこのように抜粋文が表示されています。

赤く囲っているのが抜粋文です。
本文丸ごと載っているトップページに比べるとまだましですが、正直あまりいらないです。

また画像がでかすぎて、画面上に出てくる情報量が少なくなる傾向にあります。

これらの問題点を今回のカスタマイズで改善していきます。

完成図

当記事のカスタマイズによって、トップページがこのようになります。

画面上に記事がたくさん表示されるようになりました～
ちなみにマウスカーソルをホバーさせると浮き上がってくるような感じになっています。

デフォルト状態からの変更点は以下の通りです。

主にカスタマイズ対象はＰＣ・タブレット端末での閲覧
本文・抜粋文の削除
記事一覧をタイル型風に変更することで、1度に画面上表示される記事数を増やす
記事タイトルの文字サイズを縮小

カスタマイズする！

固定ページを使ってトップページを作るという方法もありますが、今回はテーマ固有のインデックスページを使用していきます。

本文・抜粋文を消す！

まずは無駄にスペースをとっているトップページ上の「本文」と「抜粋文」を表示しないようにします。

準備として、準備としてTwenty Nineteenの親テーマから、【template-parts/content】にある「content.php」と「content-excerpt.php」の2つのファイルをＦＴＰソフトなどを使用して、子テーマにアップロードしてください。
面倒な場合は、【template-parts】のフォルダごと子テーマにアップロードしても構いません。

本文を削除する

まずはトップページに表示されている本文を削除していきます

以下の<div class=”entry-content”></div>の部分をすべて削除します。

	<div class="entry-content">
		<?php
		the_content(
			sprintf(
				wp_kses(
					/* translators: %s: Name of current post. Only visible to screen readers */
					__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
					array(
						'span' => array(
							'class' => array(),
						),
					)
				),
				get_the_title()
			)
		);

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

念のため削除後における【content.php】のコードを乗せておきます。
上記の削除後の【content.php】のコードはこのようになっています。

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php
		if ( is_sticky() &amp;&amp; is_home() &amp;&amp; ! is_paged() ) {
			printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
		}
		if ( is_singular() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
		endif;
		?>
	</header><!-- .entry-header -->

	<?php twentynineteen_post_thumbnail(); ?>

	<footer class="entry-footer">
		<?php twentynineteen_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-${ID} -->

抜粋文を削除する！

お次は、カテゴリの記事一覧ページなどで表示されている記事の抜粋文を削除します。

削除する場合は【content-excerpt.php】のファイル内の以下のコードを削除します。

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

（念のため）削除後のcontent-excerpt.phpのコードは以下のようになっています。

<?php
/**
 * Template part for displaying post archives and search results
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php
		if ( is_sticky() &amp;&amp; is_home() &amp;&amp; ! is_paged() ) {
			printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
		}
		the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
		?>
	</header><!-- .entry-header -->

	<?php twentynineteen_post_thumbnail(); ?>

	<footer class="entry-footer">
		<?php twentynineteen_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-${ID} -->

これで準備が整いました！

style.cssを編集する！

更新情報
2019/1/10更新した際の変更点は以下の通りです。

各記事タイトルのfont-sizeを17pxに変更
1行当たりに表示される記事数を「3」から「4」に変更
サムネイルのサイズを統一
各記事のmargin-topを20pxに変更

ここからはコピペで出来ます。
以下のコードをstyle.cssに追記してください。

.hfeed .entry .entry-header h2{
	font-size:17px;
}
.pagination{
	width:100%;
	text-align:center;
	margin-top:30px;
}
.pagination .nav-links{
	margin:0 auto;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
@media screen and (min-width: 481px){
.hfeed .site-main{
	display: -webkit-flex;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	width:80%;
	margin:auto;
	padding:20px 0;
	}
.hfeed article{
	width:42%;/*１つあたりのブロック横幅*/
	padding:20px 10px;
	border:1px solid #ababab;
	border-radius:5px;
	transition-duration:.4s;
	margin-top:20px;
	}
.hfeed article:hover{
	transform:translateY(-2px);
	box-shadow:1px 0px 2px 1px rgba(0,0,0,0.2);
	}
	.hfeed article .entry-title{
	margin-bottom:10px;
	}
.hfeed .entry:first-of-type{
	margin-top:20px;
	}
.hfeed article h2{
	font-size:18px;
	}
.hfeed article h2::before{
	content:none !important;
	}
.hfeed .page-header{
	width:80%;
	margin:auto;
	text-align:center;
	}
.hfeed .entry .entry-header,
.hfeed .entry .post-thumbnail,
.hfeed .entry .entry-footer,
.archive .page-header,
.search .page-header{
	margin:auto;
}
.hfeed .entry .post-thumbnail{
	position: relative;
	display:block;
	overflow:hidden;
	height:170px;
	margin-bottom:10px;
}		
.hfeed .entry .post-thumbnail a img{
 position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100%;
}
.hfeed .entry{
	padding:10px 10px;
}
}
@media screen and (min-width:768px){
.hfeed article{/*１つあたりのブロック横幅*/
	width:32%;
}
}
@media screen and (min-width:1168px){
.hfeed article{/*１つあたりのブロック横幅*/
	width:24%;
}
}

「1つあたりのブロック横幅」とコメントしている個所の数値を変えることで、一行に表示される記事数が変動しますので、変更したい場合は、数値を変更してください。

これで完成です！
無事にカスタマイズが出来ていたら、トップページやカテゴリ記事一覧ページがこのようになっているはずです。

まとめ

今回のカスタマイズでは、主にＰＣとタブレット端末からの閲覧が対象となっているカスタマイズでした。

スマホに関しては、本文・抜粋文を消してしまえばまあまあ見やすいので、全くいじっていません。

~~個人的にまだまだだと思うのが、「アイキャッチ画像」です。~~
~~正直アイキャッチ画像をもうちょっと小さくし、サイズを揃えたいのですが、あまりサイズの調整が慣れていないため、手付かず状態でした。~~
~~今後アイキャッチ画像については、なんとか調整したいと思っています。~~
↑2019年1月10日：何とか調整しました~

今回のカスタマイズの追加として、こちらの記事でさらにカスタマイズもしています。
カスタマイズ個所としては、「一覧のアイキャッチ画像を一番上にする」、「一覧に表示される『タグ』と『コメント』の文字を非表示」にしています。
興味があれば、こちらもご確認ください。

TwentyNineteenのトップインデックスページの新着一覧をさらにカスタマイズする

今回のカスタマイズに関連する「投稿者を消す」カスタマイズもオススメです！

【WordPress】Twenty Nineteen投稿者を消すカスタマイズ【ほぼコピペＯＫ】

Twitter

Facebook