プラグインを使わずに記事一覧（カテゴリ別）ページを作成してみた

いわゆるサイトマップとはちょっと違いますが、全てのエントリを一覧で表示できるページを作成しました。

自分でも、自分で書いたエントリを探すのに、ページ上部の「カテゴリ」メニューを選択して、該当記事を選択して、と辿っていましたがカテゴリーごとに 1ページですべてのエントリにアクセスできれば便利かな、と。

プラグインを探せば何かあるとは思いますが、今回はプラグインを使わずに実装しています。


記事一覧（カテゴリ別）

実装手順

1. 固定ページを作成する
2. page.php を編集する
3. （必要に応じて）CSS（style.php） を編集する

という流れになります。

固定ページを作成する

管理画面から固定ページを作成します。ページタイトルを「記事一覧（カテゴリ別）」として、本文には何も書きません。そしてスラッグを sitemap_by_category とします。（スラッグは日本語じゃなければ何でも OK）

固定ページや投稿ページでは Exec-PHP のようなプラグインを導入しないと PHP が実行できない（本文に PHP を書いても動かない）ため、本文は空白のままにして、固定ページを表示するテンプレートファイル（page.php）の方に PHP を記述します。

page.php を編集する

個別ページのテンプレートである、page.php を修正します。たいていの page.php には、ページ本文を出力するタグ（the_content()）があると思いますので、その部分を、

　　// ここにサイトマップのソースを書く

のように、管理画面で設定したスラッグを元に条件分岐させます。

「// ここにサイトマップのソースを書く」の内容

あとは、記事一覧を出力する PHP を記述するだけですが、今回は、

カテゴリ1
　　記事 01
　　記事 02
　　記事 03
カテゴリ2
　　記事 01
　　記事 02
　　記事 03
カテゴリ3
　　記事 01
　　記事 02
　　記事 03

のように表示できるようにしてみました。こうするためには、カテゴリの一覧と、カテゴリ毎の記事一覧のデータが取得できればあとは、それをループで回して、<li>タグなり、<div>タグなりで整形してあげれば良いと思います。

カテゴリ一覧の取得方法

これだけで、$categories にカテゴリ一覧が配列で取得できます。get_categories() の引数でパラメータを配列で指定すれば様々な形（ソート順序など）でカテゴリ一覧を取得する事ができます。

あとは、$categories を foreach($categories as $category) のようにループさせればOK。

例えば、$category->name でカテゴリ名を、$category->count であるカテゴリの記事数を取得できます。

参考URL:関数リファレンス/get categories()

記事一覧の取得方法

global $post;

$myposts = get_posts('category='.$category->term_id."&orderby=post_date&order=DESC");

これでカテゴリ毎の記事一覧が取得できます。こちらもカテゴリ一覧と同様に get posts() の引数の値を変えることによって様々な形で記事一覧が取得できます。今回は、特定カテゴリの記事のみを取得したいので、引数には、「category=’.$category>term_id」が指定してあります。

参考URL:テンプレートタグ/get posts()

ソースコード全体

全体をまとめるとこんな感じ。

 'name',
　　　　'order' => 'ASC'
　　);
　　$categories=get_categories($args);
?>
　　
　　　　
カテゴリ：name ?>（count ?> 記事）

　　　　

　　　　term_id."&orderby=post_date&order=DESC");
　　　　　　foreach($myposts as $post) : setup_postdata($post);
　　　　?>
　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　　　
　　　　　　　　　　　　　　ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?>
　　　　　　　　　　　　
　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　
Posted by  on 
　　　　　　　　　　


　　　　　　　　　　


　　　　　　　　　　

　　　　　　　　　　　　
　　　　　　　　　　　　
　　　　　　　　　　

　　　　　　　　


　　　　　　
　　　　

っで、スタイルシートを必要に応じて修正。こんな感じ。

#sitemap .thumbnail img {
　　float: left;
　　width: 50px;
　　height: 50px;
　　margin-right: 5px;
　　padding: 5px;
}

#sitemap .postmeta {
　　font-size: 12px;
　　margin: 5px 0;
　　padding: 0 0 5px 0;
　　border-bottom: 0px solid #ddd;
}

#sitemap .excerpt {
　　font-size: 14px;
　　margin: 0;
　　margin-left: 65px;
　　padding: 0 0 5px 0;
}

#sitemap .tag {
　　font-size: 12px;
　　background: #f8f8f8;
　　margin: 10px 0 10px 0;
　　padding: 10px;
　　border: 1px solid #e6e6e6;
}

実際の出来上がりのページはこちら　→　記事一覧（カテゴリ別）

参考URL:コピペでOK！プラグインなしでWordPressに自作サイトマップを追加
参考URL:WordPress.org フォーラム

でわでわ。