WordPressのカテゴリーページをカスタマイズ

WordPressのカテゴリーページを一覧だけではなく、それぞれ独自の要素を挿入するなど、カスタマイズしたいなと。そのほうが訪問ユーザーにもやさしいんじゃないかと思いまして。

まずはパシのWP SEOブログさんの「WordPressの固定ページを目次ページとして使う方法」を考えました。実際にこの方法で作ったサイトもあるのですが、パンくずのカテゴリーページと目次ページを一致させたかったので、他の方法はないかなと。

そんなわけで色々と探していて、一番良さげだったのが以下の記事にある方法でした。

WordPressカテゴリーページをもっとカスタマイズしたい | 高橋文樹.com

がっつり作りこみたいわけでもなく、要素を挿入する程度のカスタマイズをしたかったので、こちらの記事の「ケース1: コンテンツ作成用の隠しカスタム投稿タイプを作る」を参考にさせていただきました。

1. まずはカスタム投稿タイプを作成

上記記事で紹介されていたプラグイン「Custom Post Type UI」を使い、カスタム投稿タイプを作成しました。

【Custom Post Typ UIの設定画面】
Custom Post Type UI設定

入力欄が2列並んでいますが、左側です。右側はカスタムタクソノミーなので、今回は使いません。

ページを非公開(publicをfalse)にする必要があるので、ページ下部の「Advanced Options」をクリックして展開します。

Custom Post Type UI設定

一般公開をFalseに指定し、「Create Custom Post Type」をクリック。これでまずは第一段階のカスタム投稿タイプの設定が完了しました。

2. カテゴリーページに挿入するコンテンツを作成

次にカテゴリーページに挿入するコンテンツを作成します。私の場合は管理画面に「カテゴリートップ」というメニューが表示されています。

こちらで新規作成。ここでコンテンツとカテゴリーのスラッグと同じスラッグを設定します。ちなみに、私の場合は最初スラッグの入力欄が表示されていなかったので、表示オプションでチェックを入れる必要がありました。

3. category.phpをカスタマイズ

category.phpのカスタマイズだけは、上記記事に修正を加えました。記事どおりに記述すると、子カテゴリーの存在するカテゴリーページの表示がおかしくなったので。

以下のようにしました。

<?php
	$cat_info = get_category($cat);
	$query = new WP_Query('post_type=category-top&name='.$cat_info->slug);
	if($query->have_posts()): while($query->have_posts()): $query->the_post();
?>
<div id="category-section">
<h1><?php the_title(); ?></h1>/* カテゴリートップのタイトル */
<div id="category-section-in">
<?php the_content(); ?>/* カテゴリートップの投稿 */
</div><!-- #category-section-in -->
</div><!-- #category-section -->
<?php endwhile; endif; wp_reset_query(); ?>

とりあえず「レスポンシブ・ウェブデザイン」カテゴリーだけ対応。他も順次対応&作り込みをしないと……。

公開:2013/05/08 | 更新:2013/12/16