連載第125回
2015年11月2日
いまさら年月別アーカイブのページを作る

 これまで、当ブログと派生ブログ(心の中ではメイン)のflfl.meでは、トップページに掲載される5記事だけがカテゴリーを越えて日付順になっていて、その他はカテゴリー毎のアーカイブ、タグによるアーカイブでずらっと一覧表示するようにしていたのですが、最近「単純に投稿した日付順でズラッと一覧したい」と思うようになりました。たぶんこれは日記のように記録を時間で追ってみたいという欲求なんだと思うのだけれど、ごく一般的なWordPressテーマにはサイドメニューにウィジットとして表示されているものであるし、まあ今更な感じもあります。

 でも、いまさらであっても、やっぱりアーカイブのページ欲しい。そこで簡単に年月毎に一覧出来るようなものを作ってみようと思ったのですが、はて、アーカイブページってどう作るのかさっぱり思いつきません。で、「WordPressの記憶をひねり出す、レッスンブック再び。」で紹介した教本を久々に引っ張り出してツラツラと眺めてみたのですが、ウィジットの使用例はあっても残念ながら単体のページとして作成する説明は無い模様。ネットもググってみたけれど、なんか心に来る記事に巡り合えず、「アーカイブページってどうやって作ればいいの?archive.phpを作成するんだろうというのは予想付くけど、そこにはどうやってリンク張るの?etc.」としばらく考え込んで横になっていたら速やかに寝落ちしました。

いまさら気付いて驚く

 翌日。いろんなサイトのアーカイブページを眺めていて、ふとそのURLを見てみたら、●●●.com/2015/09/ という感じになっているのに気付き、早速自分のブログで「http://www.flipflipflip.com/2015/05」と打ち込んでみたら、なんと2015年5月に投稿した4つの記事が並んで表示されたではないか。そんな仕組みになっていたのか!全く知らなかった。
 そこで期待しつつ「http://www.flipflipflip.com/2015/」と打ち込んでみたのだけれど、今年分の全投稿記事が並ぶのではなく、相変わらず直近の4記事だけ表示。そんなに甘くはなかったが、でも何となく自分の希望している簡素な一覧ページを作るにはどうすれば良いか見えてきました。4記事しか表示されないのは、まだ「archive.php」を作成していない事と、「Custom Query String 2.9プラグイン」でページ毎の記事表示件数を設定していないことが原因と思われます。

 とは言え、たぶん記事アーカイブなんて読者にはどうでもよくて、ブログ管理人が「あの頃何を考え何をやってたのか…」と気まぐれに思いついた際に利用する程度のもの。現状、それは映画百本(鑑賞リスト)で行っていて、全記事アーカイブもその構成を真似ることにしたのだけれど、さて、その映画鑑賞リストをどうやって作成して、リンクに紐付けたのか全く忘れている。例えば鑑賞リストには「www.flipflipflip.com/movie100」でリンクしているのですが、movie100なんてファイルは作成しておらず、リストの更新は「page-movie.php」というファイルにCoda 2での手作業で行っており、しかもこの「VPS&WordPress引っ越しメモ」に作成手順を全くメモっていない事が判明。というわけで今回、ちゃんとメモしておくことにしました。

固定ページpage-archive.phpとarchive.phpを紐付ける

 年月別アーカイブの構成はこんなイメージ。固定ページというのは「まとめ」みたいな一覧表で、そこに記述された個別のグループ(2015年の11月とか)のリンクをクリックするとarchive.phpで表示するという具合。今回はこの仕組みの具体的な設定手順をメモ。ちょっと古い WordPress3.1.4 の画面での説明ですが、たぶん他のバージョンでも同じかと。

固定ページの新規追加

 固定ページを新規追加。タイトルは「年月別アーカイブ」とします。

page-archive.phpの作成

 今回、自分の考えている固定ページはindex.phpを利用した汎用的なものではなくて、固有のデザイン構成にしたいので、themesフォルダ内にCoda 2.5で「page-archive.php」というファイルを作成します。「page-×××.php」というように、頭にpage-を付けると、それが固定ページであることを意味します。映画鑑賞リストでは「page-movie.php」というように任意の単語を付加しています。

 ページの中身は管理人が任意で作成すれば良く(基本的にはindex.phpの改造)、必要な各アーカイブへのリンクを貼るのですが、重要なのは冒頭5行の「Template Name」。この「page-archive.php」をTemplate Nameで名付けておいて、後の「ページ属性」で指定し、紐付けます。ここでは「年月別アーカイブ」とします。

page-archive.phpから一部抜粋

<?php
/*
Template Name: 年月別アーカイブ
*/
?>

<?php get_header(); ?>

<article>
<section id="container">

<section id="post">

<section id="title">
	<a href="<?php echo home_url(); ?>"><img id="ICON" src="/radio/wp-content/themes/FLFL2015/movie100.png"></a>
	<h5><a href="<?php echo home_url(); ?>/archive">年月別アーカイブ</a></h5>
	<h2><a href="<?php echo home_url(); ?>/archive">年月別アーカイブ一覧表</a></h2>
	<h6>随時更新中
		<a href="http://twitter.com/share?url&amp;text=
<?php bloginfo('name'); ?><?php wp_title('>'); ?>" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://twitter.com']);">☆</a>
	</h6>
</section>

<div id="foot_spacer"></div>
<div id="foot_spacer"></div>

<!-- コンテンツ -->

<div id="index">

<dl>
<dt><a href="<?php echo home_url(); ?>/2015/">20<font color="#ff1e8a">15</font>年</a></dt>

<dd><a href="<?php echo home_url(); ?>/2015/12/">1<font color="#ff1e8a">2</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/11/">1<font color="#ff1e8a">1</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/10/">1<font color="#ff1e8a">0</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/09/">0<font color="#ff1e8a">9</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/08/">0<font color="#ff1e8a">8</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/07/">0<font color="#ff1e8a">7</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/06/">0<font color="#ff1e8a">6</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/05/">0<font color="#ff1e8a">5</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/04/">0<font color="#ff1e8a">4</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/03/">0<font color="#ff1e8a">3</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/02/">0<font color="#ff1e8a">2</font>月</em></a><b></b></dd>
<dd><a href="<?php echo home_url(); ?>/2015/01/">0<font color="#ff1e8a">1</font>月</em></a><b></b></dd>
</dl>

1〜5行目:Template Name: 年月別アーカイブ このように「名前」を付けておくのが重要。

固定ページ「年月別アーカイブ」の設定

 新規追加した固定ページ「年月別アーカイブ」の編集を押して、編集画面に移ります。Coda 2.5で作成した一覧表となる「page-archive.php」には、どうやってリンクを貼ればよいのか?下図の緑枠で囲ったパーマリンクの編集ボタンを押して、任意のURLパスを決めればOK。今回は「archive」にして、親は「なし」、テンプレートは「年月別アーカイブ」を指定(これが上で設定したTemplate Name: 年月別アーカイブ、です)。これでwww.flipflipflip.com/archive/にアクセスすると、「page-archive.php」が表示されるように紐付けされます。ちなみに「デフォルトテンプレート」を指定するとindex.phpが使用されるので、リンク先など中身の記述は下図の編集画面内で行います。

archive.phpの作成

 page-archive.phpの一覧表にリンクされた「flipflipflip.com/2015/」や「flipflipflip.com/2014/01/」等をクリックした際、そのアーカイブ一覧を表示させるのは、特に問題なければindex.phpで構わないと思うのですが、当ブログでは上述のように4記事しか表示されなかったり、「年月」のタイトルが表示されなかったりするので、新規に「archive.php」を追加作成することにします。基本的にはindex.phpの改造で、タイトル周りの調整と「Custom Query String 2.9プラグイン」で表示件数を指定しておきます。

 まず「archive.php」はindex.phpを複製するのですが、h1タグで表示するタイトルは年月を取得したいので、ヘッダ部分を直接記述します(以前のsearch.phpのように)。今回新しく使用するテンプレートタグ(h1タイトル周りで使用)は下記のようになります。

年月を取得するテンプレートタグ

<h1>
 <a href="<?php echo home_url(); ?>/archive/">
 <?php echo get_query_var('year'); ?>年<?php echo get_query_var('monthnum'); ?>月</a>
</h1>

3行目:get_query_var(‘year’) と get_query_var(‘monthnum’) で年月を取得。

 また「Custom Query String」でarchive.phpでの表示件数を下記のように余裕をもって設定・追加しておきます。

フッターにリンクを追記

 これで、ざっくりとアーカイブ周りが構築出来たので、リンクをフッターにも貼って置きます。固定ページ編集で設定した「/archive/」で大丈夫。ひとまず、おおまかな動作は問題無いようだったので、ファイルをアップロードして、レイアウト等はチマチマ修正してゆくことにします。

年月別アーカイブ一覧表へのリンク

<a href="<?php echo home_url(); ?>/archive/">年月別アーカイブ</a>

 現時点ではダラーーッと縦長のアーカイブ一覧になっているので、またそのうち時間が出来たらコンパクトにまとめようと思います。