カテゴリーとタグのトップページをGutenbergで作り込む方法

SWELLテーマでGutenbergを使っていると、どうしてもカテゴリーとタグのトップページの作り込むのに面倒になってくるんですよね。

通常はカテゴリーやタグページの説明のテキストエリアを使ったり、JINテーマだと専用のテキストエリアが用意されていたり、SEOのプラグインでも同様な機能があったりします。

その説明部分をクラッシックエディターで書けるようにできるカスタマイズがあるので、Gutenbergにできるカスタマイズがないか随分前に調べたのですが、残念ながらありませんでした。

そこで、カテゴリーやタグのトップページをGutenbergで作り込める仕組みを考えて実装してみた所、実装できてしまったのでまとめました。

目次

カテゴリー&タグのトップページをGutenbergで作り込む仕組み

カテゴリーとタグページの説明の部分をGutenbergにカスタマイズするのは、パッと見厳しいと判断しました。0歳児がいるので、調べる時間もままならない状況なので…

サイトのトップページは、設定>表示設定ページで、【ホームページの表示】の設定で固定ページを指定すれば、固定ページで作り込むことができます。

つまり、Gutenbergを使用してトップページを作り込むということを、カテゴリーとタグのトップページにもこの方法が使えないか考えたのです。

実装してみたら案外簡単にいけたので、これ本体に組み込んでくれると便利かも?と思いました。

archive-term.phpをカスタマイズする

子テーマを作成し、SWELLテーマからarchive-term.phpをコピペします。

カテゴリーとタグページのトップページを表示するテンプレートファイルは、archive-term.phpになります。

archive-term.phpの41行目辺りに、下記のソースがあると思います。

			if ( $termhead ) echo $termhead;
		?>

上記のコードの下に下記のコードを挿入します。

<?php
	$tag_slug = $wp_obj->slug;
	$page_info = get_page_by_path( $tag_slug.'-info');
	$page = get_post($page_info);
	echo '<div class="post_content">',
	apply_filters( 'the_content', $page->post_content ),
	'</div>';
?>

固定ページのスラッグとカテゴリー&タグのスラッグを共通化

固定ページを作成した時に、固定ページのスラッグをカテゴリーページのトップページなら【カテゴリースラッグ-info】という感じにします。タグページのトップページなら、【タグのスラッグ-info】にします。

【例】カテゴリーのトップがwordpressの場合→【wordpress-info】

また、カテゴリーのページのスラッグは【カテゴリースラッグ-info】の【-info】を抜いた部分を設定します。

【例】【wordpress-info】→【wordpress】

カテゴリースラッグと固定ページを全くの共通にすることはできないので、固定ページのスラッグには末尾に【-info】を使用しています。

タグのページも上記のようにスラッグを共通化させます。

固定ページを作成する

固定ページは下書きの状態でもOKです。

きっちり吟味してから公開したい場合は、固定ページのスラッグを一旦別のスラッグにして、完成したらスラッグを対応すればOKです。

また、固定ページのタイトルは、固定ページの一覧で分かりやすいように、

  • 【カテゴリー】WordPress
  • 【カテゴリー】テーマ
  • 【タグ】教育
  • 【タグ】育児

最初に【】を付けてカテゴリーかタグかを付けると纏まって表示され、【】の後にカテゴリー名やタグ名を付けると分かりやすいです。

カテゴリー&タグページのトップにする固定ページはnoindexにする

下書きでも反映するなら必要ないですね(^_^;)

一応念の為と思って書いたのですが、下書きのままでも反映されるのかな?と試したら、反映したので…。でも一応書いたので残しておきます。

私はYoast SEOを利用しているのですが、Yoast SEOはページごとにnoindex設定できる機能があります。

固定ページの下にあるYoast SEOの上級設定で、「検索エンジンに、この固定ページの検索結果への表示を許可しますか ?」を【いいえ】にします。

また、リンクが辿られないように「Should search engines follow links on this 固定ページ」の欄も【No】にしています。

SWELLの開発者さんの「SEO SIMPLE PACK」でも同様の機能があります。

SWELL
SWELLの特徴 | WordPressテーマ SWELL
SWELLの特徴 | WordPressテーマ SWELLシンプルで美しいデザイン、かつ豊富な機能性。 ブロックエディターに完全対応し、プログラミング不要なカスタマイズ性能や高速化・広告管理機能などを備え、複数サイトで...

トップページも同じ仕組みで実装可能

トップページも同じ仕組みで実装可能です。

SWELLテーマ内のhome.phpを子テーマにコピペして、下記のソースを貼り付ければOKです。

<?php
	$page_info = get_page_by_path( 'home-info');
	$page = get_post($page_info);
	echo '<div class="post_content">',
		apply_filters( 'the_content', $page->post_content ),
	'</div>';
?>

固定ページのスラッグを【home-info】にすればOKです。

設定>表示設定ページで固定ページを指定しなくても、固定ページの内容を表示することができます。

すみません、時間がないのでざっくり説明しました(^_^;)
本当はもっと細かく解説しながらまとめればよいのですが、技術ブログって時間かかるんですよね…。

よかったらシェアしてね!

この記事を書いた人

WordPress1X歴のテーマ開発者がWordPressの有料テーマを購入したのがキッカケで、WordPressのカスタマイズTipsを纏めています。

目次
閉じる