【Twenty Seventeenのちょこっとカスタマイズ】フロントページの記事のカテゴリーを絞る


昨日に引き続き、Wordpressのカスタマイズについてです。

Twenty Seventeenではフロントページのカスタマイズがかなり簡単になっています。4ページ分の固定ページのコンテンツを載せられて、そのうち一つは記事一覧も出せます。

でもブログっぽくないページを目指すには全記事一覧が出ちゃうとちょっとなあというケースがあると思います。そういうときは子テーマを作ってさくっとカスタマイズしてしまいましょう。

※ここでは、フロントページを固定ページに、投稿ページをnewsというニュース記事ページに設定している前提でお話してみます。

そもそも何処で動いているのか

まずはテーマオプションで指定できる、フロントページの最大4つのセクションを出力する箇所をピックアップしてみます。

/wp-content/themes/twentyseventeen/front-page.php

		// Get each of our panels and show the post data.
		if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.

			/**
			 * Filter number of front page sections in Twenty Seventeen.
			 *
			 * @since Twenty Seventeen 1.0
			 *
			 * @param $num_sections integer
			 */
			$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
			global $twentyseventeencounter;

			// Create a setting and control for each of the sections available in the theme.
			for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
				$twentyseventeencounter = $i;
				twentyseventeen_front_page_section( null, $i );
			}

辺りですね。(40行で設定してありますが、フロントページに載せるセクションの上限を4つにしているのはなぜなんでしょうねー。変更出来るようにすればいいのにな。あんまりトップにアレコレ載せるなということでしょうか???)

ざっくり解説するとセクションの数でforをまわして、twentyseventeen_front_page_sectionsという

/wp-content/themes/twentyseventeen/inc/template-tags.php

の134行あたりにある関数であれこれして、結局は

/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php

で出力しています(ざっくりすぎ)。

実際に弄るのはcontent-front-page-panels.php

なので、子テーマに

/template-parts/page/content-front-page-panels.php

をコピーしてきて、弄りましょう。

例えば、カテゴリーをニュース(カテゴリーのスラッグ名がnews)だけに絞りたいなら、

				$recent_posts = new WP_Query( array(
					'posts_per_page'      => 3,
					'post_status'         => 'publish',
					'ignore_sticky_posts' => true,
					'no_found_rows'       => true,
					'category_name'       => 'news',
				) );

という感じでクエリを書き換えると、トップに出てくる記事一覧がニュースのものだけに絞り込めます。

記事数を変えたければ、posts_per_pageの数を変えればOKです。かんたーん。

カテゴリーのパラメータはこんな感じになっていて、クエリを変えればもっと色々できます。

  • cat (整数) – カテゴリー ID を使用します。
  • category_name (文字列) – カテゴリーのスラッグ(カテゴリ名ではありません)を使用します。
  • category__and (配列) – カテゴリー ID を使用します。
  • category__in (配列) – カテゴリー ID を使用します。
  • category__not_in (配列) – カテゴリー ID を使用します。

関数リファレンス/WP Query – WordPress Codex 日本語版

プラス解説

さて、記事数ぐらいなら特に問題は無いのですが、上の例で無事ニュースカテゴリーだけの記事をトップに表示できたとしても、newsページをクリックすると他のカテゴリも含む全記事が出たままになるので、index.phpも弄る必要があります。

この辺りのことは、公式のテンプレート階層のページに書いてあります。

サイトフロントページ、または固定ページの上にあるブログ投稿インデックスページの表示に使用されるテンプレートファイル。注意: サイトフロントページ上にある場合、フロントページテンプレートは、ブログ投稿インデックス (ホーム) テンプレートに優先します。

ここでいうブログ投稿インデックスページというのがnewsページです。で、Twenty Seventeenのテーマにはhome.phpがないので、index.phpが該当する訳です。

長くなってきたのでindex.phpの弄り方はまた別の記事に書いてみたいと思います。


この記事を書いた人