カテゴリーとアーカイブのIndex化

アーカイブIndex化サンプルアーカイブ(カテゴリーや月別アーカイブ等)を開くと、該当エントリが全件リスト表示されるカスタマイズです。
サンプル:Tips | blog*citron(TipsカテゴリIndex)
当ブログでこの方法をとっており、何度かメールでお問い合わせをいただいたので記事にしてみました。

導入手順
  1. 目次用テンプレートを作る
  2. アーカイブにテンプレートを設定
  3. 1ページに全件表示する(省略可)
  4. 再構築で完了

目次用テンプレートを作る

記事の日付・タイトルだけを表示するテンプレートを作ります。
デザインを揃えたければ今使っているテンプレートを一部編集するのがおすすめです。
紹介するのはあくまで一例です。お使いのテンプレートによってHTML部の記述は異なると思いますので、お使いのものに合わせて修正して下さい。

テンプレートを別名で保存

まず今使っているテンプレートを複製します。
編集画面から「別名で保存」すればOKです。名前は後から分かりやすいようにテンプレ名_listとか、index用と分かる名前をつけると良いかと思います。

HTML部を編集

次にHTML部を編集します。
例としてうちのテンプレート「mademoiselle」で説明します。
編集前のmademoiselleのエントリー部分のHTMLはこちら。

<!-- BEGIN entry -->
<div class="entry">
<!-- BEGIN sequel -->
<div class="entry_navi">{prev_entry} :: <a href="{site_top}">main</a> :: {next_entry}</div>
<!-- END sequel -->
<h2 class="entry_title"><a href="{entry_permalink}">{entry_title}</a></h2>
<div class="entry_author">author : {user_name} | {category_name} | {entry_date}</div>
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<div class="entry_state">{comment_num} : {trackback_num} : <a href="{site_top}admin.cgi?__mode=edit&amp;eid={entry_id}">Edit</a></div>
</div>
<!--_end_entry_-->
{trackback_auto_discovery}
<!-- END entry -->

上記をリスト用に編集したものがこちら。

<div class="entry">
<div class="entry_body">
<ul>
<!-- BEGIN entry -->
<li>{entry_date}: <a href="{entry_permalink}">{entry_title}</a></li>
<!-- END entry -->
</ul>
</div>
</div><!--_end_entry_-->

<!-- BEGIN entry -->から<!-- END entry -->の間が1つの記事として繰り返されます。
ここに日付と記事タイトルのタグだけを入れることでリスト化できるわけです。
分かりやすく書くとこんな構成に変更しています↓

<ul>
<!--ここから記事件数分繰り返し-->
<li>日付: <a href="記事URL">記事タイトル</a></li>
<!--繰り返しここまで-->
</ul>

entry_bodyのdivタグで囲んでいるのはデザインのためです。
大体のテンプレートにおいてdiv.entry_bodyには本文表示部へのCSSが設定されていますので、リストはこの内側に置く方が見栄えが良いでしょう。
繰り返しますが、お使いのテンプレートによって異なりますのでまるっとコピペされないようにご注意下さい。

プレビュー表示で確認

プレビュー表示出来たテンプレートのプレビュー表示はこんなイメージです。
お好みでアイコンをつけたり、アーカイブ名を入れたり、ぱんくずナビを入れるとより美味しくいただkそれらしいページになります。
次にアーカイブにテンプレートを適用する設定をします。

アーカイブにテンプレートを設定する

テンプレートを設定設定メニュー>テンプレート>設定(上のタブ)を開きます。
利用テンプレート設定の「アーカイブ」の項目に、さっき作った目次用テンプレートを指定します。

この時、「CSS反映」の項目で「標準のCSSテンプレートを適用する」を選んでおくと、HTMLだけは目次用テンプレートを適用し、CSSは標準のテンプレートが適用されようになります。テンプレートを2つ使っていても、修正するCSSは標準の方1つですむので便利です。

これでトップページや個別記事は標準テンプレートで表示、カテゴリやアーカイブを選んだ時は目次用テンプレートで表示されるようになりました。
Index化自体はこれで終わりですが、このままだと表示件数はトップページと同じになります。
リストを1ページに全件表示したい場合は次の設定を行ってください。

1ページに全件表示する

環境設定スクリーンショット環境設定>表示件数設定の「ページ表示」の項目で「アーカイブではページ表示しない」を選択します。
これでカテゴリーやアーカイブを選んだ時に、該当記事を1ページに全件表示させることができるようになりました。

再構築

反映されない場合は再構築してみて下さい。
「再構築>インデックスのみ再構築」でも大丈夫だと思います。

Related Archive