Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > WordPress > カスタム投稿タイプのアーカイブページを作成する

カスタム投稿タイプのアーカイブページを作成する

以前に、固定ページにカスタム投稿タイプのアーカイブを表示するという記事を書いたのですが、このときは調べても作成したカスタム投稿タイプの一覧を表示するためのURLを持てることがわからなかったのですが、わざわざ固定ページを作成しなくてもちゃんとアーカイブページを持つことができました。

また、前回はよくわからずプラグインを使ったのですが、テストサーバから本番サーバへの移行とか考えると、やはりfunctions.phpに直接書き込んだ方が効率が良かったです。手順をまとめてみました。

1.functions.phpに記述を追加

functions.phpにカスタム投稿タイプ「お知らせ」を追加するために、下記のように記述します。

function add_custom() {
	register_post_type('news', array(
		'label' => 'お知らせ',
		'menu_position' => 5,
		'public' => true,
		'supports' => array(
			'title',
			'editor'),
		'has_archive' => true,
		'rewrite' => array(
			'slug' => 'news',
			'with_front' => false)
	));
}
add_action('init', 'add_custom');

register_post_typeとして、最初に投稿タイプ名(ここではnews)を指定し、その後引数を必要な指定して行きます。すべての引数を正確に理解するのは私には難しかったのと、かえって複雑になってしまいそうなので、アーカイブページを持つための設定だけに絞ります。

label
指定した名称が管理画面に表示されます。さらに引数を指定して表示する箇所によって細かく指定することもできますが、通常はこれで十だと思います。

menu_position
管理画面の左メニューでの表示位置を指定します。
5は「投稿」の下、10は「メディア」の下、20は「固定ページ」の下です。

public
管理画面やサイトにカスタム投稿タイプを表示可能にする設定です。デフォルトではfalseになっているので、trueに設定しておく必要があります。

supports
管理画面に表示する項目を指定します。ここではお知らせなので、titleとeditorのみ指定しましたが、他にも下記のような設定が可能です。

  • title:タイトル
  • editor:本文
  • author:投稿者
  • thumbnail:アイキャッチ画像
  • excerpt:抜粋
  • trackbacks:トラックバック送信
  • custom-fields:カスタムフィールド
  • comments:コメントなどの許可

has_archive
これをtrueにすると、アーカイブページを持つことができるようになります。今回の例ではアーカイブページのURLは以下のようになります。

http://example.com/news/

rewrite
シングルページのパーマリンク設定をrewriteの引数で変更することができます。
デフォルトでは、http://example.com/news/投稿名 となりますが、slugにたとえばtestと指定すれば、シングルページのURLはアーカイブページと異なり、下記のようにすることが可能です。
http://example.com/test/投稿名

今回お知らせのfunctions.phpのソース例では、投稿タイプ名から変更する必要がないので、newsと記述していますが、この場合記述を省略してもかまわないです。

また、私はよくやるのですが、投稿でブログなどを管理していて、投稿のシングルページのURLを/blog/投稿名 としたいため、「設定>パーマリンク設定」を「/blog/%postname%/」などとしていることがよくあります。その場合、下記のように、シングルページのURLにblogが入ってしまうので、よくありません。

http://example.com/blog/news/投稿名

with_frontをfalseにしておくと、パーマリンク設定の影響を受けなくなり、期待通りのURLで表示することができました。

http://example.com/news/投稿名

2.アーカイブとシングルページのテンプレート作成

アーカイブページのテンプレート階層は、以下の順番になっていますので、必要に応じてファイルを作成します。

  1. archive-news.php
  2. archive.php
  3. index.php

ループは通常通りの記述で大丈夫でした。ページ送りも「設定>表示設定」で指定した「1ページに表示する最大投稿数」を参照します。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<div class="article">
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<p class="date"><?php the_time('Y.m.d'); ?></p>
		<?php the_content(); ?>
		<!-- /.article --></div>
	<?php endwhile; ?>
	<div class="navPage">
		<div class="prev"><?php previous_posts_link(); ?></div>
		<div class="next"><?php next_posts_link(); ?></div>
	</div><!--end of .navPage-->
<?php else: ?>
	<div class="article">
		<p>現在お知らせはありません。</p>
	<!-- /.article --></div>
<?php endif; ?>

シングルページのテンプレート階層は下記のようになります。

  1. single-news.php
  2. single.php

シングルページも通常のループの記述で問題ありません。

<?php while (have_posts()) : the_post(); ?>
<div class="article">
<h2><?php the_title(); ?></h2>
<p class="date"><?php the_time('Y.m.d'); ?></p>
<?php the_content(); ?>
<!-- /.article --></div>
<?php endwhile; ?>

3.パーマリンク設定を更新

テーマファイルをすべて用意したら、パーマリンク設定を更新します。

functions.phpの記述を修正したら、毎回必ずパーマリンク設定を更新しなければならないので、注意が必要です。


固定ページにカスタム投稿タイプのアーカイブを表示するでは、固定ページを作らねばならなかったし、カスタムリライトスラッグやら?な部分もあり、テンプレートの記述も内容を把握できずに書いていた部分もあったのですが、これなら理解しやすいと思いました。

参考:関数リファレンス/register post type

10 Responses to “カスタム投稿タイプのアーカイブページを作成する”

  1. tahni より:

    カスタム投稿タイプと固定ページの間ですごくハマっていたので、すごく助かりました!

  2. コモモ komomo より:

    お役に立てたようでよかったです。カスタム投稿タイプはまだちょっと難しいですね^^;

  3. yuzy より:

    カスタム投稿タイプのアーカイブページを表示させることはこちらの方法でできているのですが、たとえばこのページをカスタムメニューに反映させたい場合はどうしたらいいかご存知ではありませんか?

    クライアントさんにカスタムメニューを使って随時カスタマイズしていただく必要があるので、できればカスタムメニューに、カスタム投稿タイプのアーカイブページへのリンクが作れたらいいなぁと思っているのですが…
    (個別の投稿へのリンクは簡単に作れています)

  4. コモモ komomo より:

    >yuzyさん
    コメントありがとうございます。カスタムメニューについてはたぶん現状できないんだと思うんですよね。。本当に困ったもんですね。(私もできたらいいのに・・って思った経験があります。。)
    今のところ、カスタムメニューの「カスタムリンク」にURLを入れちゃってるんですが、出てくるようになるといいですよね。なにか方法があるか、私もちょっと真面目に調べてみますね。

  5. yuzy より:

    >komomoさん
    早速のご返答ありがとうございます!

    やはり現状ではできなさそう…ということですね。
    カスタムリンクは簡単に実現できるけど、本番環境移行時に書き換え忘れそうですw(今はテスト環境で作ってるので…)

    カスタム投稿タイプを作る&表示するのは結構簡単にできるけど、それ以外にいろいろカスタマイズしようとすると結構ひっかかりますね。
    私ももっと勉強しないとなーと思います!

    ありがとうございました。

  6. lewisik より:

    わかりやすい記事をご紹介いただき、ありがとうございました!

    アーカイブのサンプルコードの11行目、

    にて、
    )とじ忘れを見つけましたのでご報告致します!

  7. コモモ コモモ より:

    ありがといございます!修正しました(^^;

  8. […] Cat Speak | カスタム投稿タイプのアーカイブページを作成する […]

  9. yutakaman より:

    この記事とても参考になりました!!!

    ありがとうございます。

    ちなみに、カスタム投稿タイプのアーカイブページは、この記事のように作った方がいいんですか?

    以前書いていた固定ページをアーカイブにする方法とどっちが良いのでしょうか。

    何が正なのか、わからなく困惑しております。

    SEO的(サイトマップ)には、どちらがいいのでしょうか。
    おわかりでしたら、教えて欲しいです。

  10. コモモ コモモ より:

    特に理由がない限り、アーカイブページはこの方法で作った方がよいです。固定ページはあくまで固定ページなので、ページ送りができません。
    SEOはここでは関係ないので、どっちでもよいのではないでしょうか。

コメントを残す

人気の記事