マチダの生活

102026 20

WordPress記事まとめページの作り方

 先日記事にした今後の予定に従って、早速まとめページを設置した。

今後の予定記事が100個になったらしようと思っていたいくつかのコト

出来上がったまとめページまとめページ一覧 | マチダの生活

 今ある各カテゴリ「コラム」「音楽」などの下位に、より細かく分けたサブカテゴリを設定し、そのサブカテゴリページをまとめページとして利用したという形だ。当サイトはWordPressを全面的に利用して造られており、だからこそこういった仕組みを簡単に作ることができるのである。誰だか知らないけどWordPressを管理してくれている方々ほんとうにありがとうございます今後ともよろしくお願いいたします。

 それでは今回行った作業の詳細をご紹介していこう。

詳細はAIにお任せして、人間は概要を知っていることが重要

 …だと思いませんか?要は役割分担ですな。

 わたしが全体のアウトラインを把握していて、その流れに沿う形でわたしのChat GPT「ロボ太」に実務をお願いするというのがここ最近のパターンとなっている。現状の「2人で協力して進めています」と感じられるバランス感が今はなんとも心地良いのだ。

 この先は良くも悪くも大方の予想通り、人間の役割がどんどん減っていくであろうから、今のうちにこの共同作業をもっと楽しんでおきたいな。

サブカテゴリの設定

 この先の作業について、その前提となるサブカテゴリを各記事に設定していこう。まずはそれを作るところからだね。

WordPress カテゴリ作成画面
親「コラム」の下に子「英語」を作成

 このように、WordPressなら簡単にカテゴリの階層構造を作ることが出来るのだ。この下にはさらに…

WordPress カテゴリ作成画面
絶賛連載中のロンズデールさん聞き取り

 これで『コラム → 英語 → TEDクリス・ロンズデールさん聞き取り』というカテゴリ構造ができた。いずれ別動画の聞き取りをする時は、英語カテゴリの下に新しいサブカテゴリを作成し、『コラム → 英語 → TED別動画の聞き取り』とすればいいわけだ。

WordPress カテゴリ作成画面
コラムのサブカテゴリ作成完了

 他カテゴリもコラムと同様に必要なサブカテゴリを作成していくぞ。この時、出来上がったカテゴリ名をポイントするとウインドウ左下に表示されるリンクの中に、カテゴリIDのナンバーが表示されるのでメモしておくといいだろう。あとあと使うからね。

WordPress カテゴリID表示部分
この数字です

各記事のカテゴリを変更する

 続いては作成したサブカテゴリを各記事に適用していく作業だ。TEDクリス・ロンズデールさん聞き取り記事を例に取ってみよう。

WordPress 記事のカテゴリ設定画面
変更前

 現在は思いっきり「コラム」になっている。英語勉強のなにをもってコラムなのかわたし自身にもよくわからないが、だって今までのカテゴリではこのぐらいしか適したものがなかったんだもの。でも今は違う!

WordPress 記事のカテゴリ設定画面
変更後

 そのものズバリ『TED クリス・ロンズデールさん聞き取り』を選択することができるじゃないか…!なんてスッキリ。もちろんカテゴリが二つになることもあるぞ。

WordPress 記事のカテゴリ設定画面
イクラは時期のものであり、また丼ものでもある(哲学

 こうしておけばイクラの記事は『時期のもの』のまとめページにも、『丼もの』のまとめページにも登場することになるわけだ。同様にすべての記事についてこの作業をする…といってもおよそ100個あるわけだから、それなりに時間がかかってしまった。

WordPress 記事一覧画面
なんとか終了~!

ぶっ壊れたカテゴリ名の表示を直す

 例えば今まで「コラム(スラッグ:column)」だった記事が「マチダのコラム(スラッグ:other_column)」に変わったことで、表示が壊れてしまう箇所がいくつか出てきた。

<img src="<!--画像フォルダまでのパス-->/common/icons/other_column_wh.svg" alt="マチダのコラムアイコン">

 other_column_wh.svgとあるうちの【other_column】は、その記事のカテゴリスラッグを自動的に引いてくるようになってるんだな。そしてこの場所では使う予定の無いother_column_wh.svgという画像を用意していないので、表示が壊れてしまうというわけ。ここでは今まで通り、マチダのコラムからみた親カテゴリである「コラム(スラッグ:column)」を書き出して、存在する画像ファイル名「column_wh.svg」としたい。

//今までのスクリプト
<?php
$categories = get_the_category(); //この記事のカテゴリデータを取得
if ( ! empty( $categories ) ) : //カテゴリデータがあれば処理を開始
	$cat = $categories[0]; // 1つ目のカテゴリを取り出す
	//以下$catからスラッグを取り出したりリンクを取り出したり
?>

↓

//一番親のカテゴリを取得するように修正
<?php
$categories = get_the_category(); //この記事のカテゴリデータを取得
if ( ! empty( $categories ) ) : //カテゴリデータがあれば処理を開始
	$root_cat = $categories[0];// 1つ目のカテゴリを取り出す
	while ( $root_cat->parent != 0 ) { //親カテゴリが存在する限り何度も処理を繰り返す
		$root_cat = get_category( $root_cat->parent );//現在より一つ親のカテゴリを取得
	}
	//以下$root_catからスラッグを取り出したりリンクを取り出したり
?>

 WordPressでは、自分が一番の親カテゴリである場合、parentに0が入る仕組みになっている。なので$root_cat->parentが0を返すまでget_category( $root_cat->parent )をし続ければ、おのずと一番親までたどり着くことができるというわけだ。

 該当箇所のいくつかを新しいスクリプトに書き換えて、ここまではOK。

まとめページ一覧を作る

 各記事へのサブカテゴリの設定が済んだ時点で、まとめページそのものは出来上がっているということだね。だってそのサブカテゴリのカテゴリページがつまり、そうなんだから。あとはそこへ行くためのポータルページが必要になるわけで、それが冒頭でもリンクを掲載した「まとめページ一覧」なのだ。

 このページはWordPressの中でも特に、テンプレートsingle.phpから作成される普通の記事とは別のデザイン・仕様にしたい場合に使う、「固定ページ」という機能を使って作成した。

WordPress 固定ページ作成画面
あらたに固定ページを追加作成して
WordPress 固定ページ設定画面
スラッグや使用テンプレートを設定する

 スラッグはそのままURLとなる。上の画像の設定なら、まとめページ一覧ページのURLはhttps://machida-life.com/matome/になるわけだ。

 肝心のデザインについては、あらかじめページレイアウトを作っておいたファイルを現在使用中のテーマフォルダ内にアップし、固定ページの設定からそのファイルをテンプレートに適用して実装するのだが、その際テンプレートにしたいファイルの最上部に以下のような記述が必要となる。

<?php
/*
Template Name: matome
*/
?>

 「このファイルは固定ページ用の『matome』という名前のテンプレートファイルです」という宣言。こうしておかないと固定ページのテンプレートファイルとして認識されず、設定のプルダウンメニューに表示されないので注意しよう。

カテゴリIDを使ってリンクを作成する。

 テンプレートファイル「matome」のページデザインはご覧いただいた通りで、特に各まとめページへのリンク部分はカテゴリIDのナンバーを使って書き出している。

 以下は英語の勉強まとめページ部分のコードだ。

<li class="english">
	<section>
		<h3>英語の勉強まとめ</h3>
		<div class="matome_img bg_cover" style="background-image: url('<?php echo esc_url(wp_upload_dir()['baseurl'] . '/2026/09/eng_eye.jpg'); ?>');"></div>
		<div class="inner">
			<p>「字幕なしで洋画を楽しみたい!」という積年の夢を叶えるため、一念発起して英語の勉強を始めました。主にリスニングをしながら、その時に出てきたわからない表現などを腹落ちするまで調べます。シリーズ毎にまとめてみたので皆さんも一緒にいかがですか?</p>
			<ul class="child">
				<li class="small"><a href="<?php echo esc_url(get_category_link(305) . '#main_contents'); ?>">
					<?php echo esc_html(get_cat_name(305)); ?>
				</a></li>
				<li class="small"><a href="<?php echo esc_url(get_category_link(304) . '#main_contents'); ?>">
					<?php echo esc_html(get_cat_name(304)); ?>
				</a></li>
			</ul>
		</div>
	</section>
</li>

 get_category_link()や、get_cat_name()の中の数字がそれ。サブカテゴリを作成した時に「メモしておいた方がいいだろう」とお伝えしたものをここで使うわけだね。こういった箇所を全て同じようにしておけば、例えば将来「ちょっとカテゴリ名を変えたいな」と思ったとき、WordPress管理画面にて大元のデータを書き換えれば全て一括で修正できるようになるので便利だぞ。

 簡単ではあるが以上!

 あとはまとめページにそれとわかるようにタイトルが出るようにしたり、

まとめページのタイトル表示部分
これね

 まとめページへの告知バナーを設置したりして、

まとめページへのリンクバナー
これね

 一連の作業は終了だ。オツカレサマデシタ。

 これ自分で一からシステムを組むとしたら、AIと組んでやるにしてもそれなりに大変なんじゃないかと思うんだよな。でもWordPressならこんなにお手軽!冒頭に書いた通り「こんな流れでやるんだな」「こんなことが出来るんだな」という概要さえ知っていれば、誰でもこうしたアイデアを実現することが出来てしまうぞ。

 さて次はどんな便利機能を盛り込んでみようかな。ロボ太と一緒なら、今のところは自由自在だ。

ライン
Articles

Web関連の記事TOP5

Tag cloud

タグクラウド

トップに戻る

まとめページもやってます。