Cat Speak

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

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

固定ページにカスタム投稿タイプのアーカイブを表示する

wordpressのカスタム投稿タイプを利用してみました。
カスタム投稿タイプでは「投稿」と同じ機能を追加できます。


基本的な導入方法については、下記がとてもよくまとまっていたので、参考にしました。


難しそうだと思い込んでいたのですが、導入自体は思った以上に簡単にできました。

しかし、一般的には、カスタム投稿タイプは、カスタムタクソノミーと組み合わせて使うことになっているのか、
「カスタムタクソノミー」のアーカイブを表示する下記のようなURLは用意されてますが、

http://example.com/タクソノミー名/スラッグ名/

「カスタム投稿タイプ」に投稿した全ての記事一覧を表示するためのURLがないようです。

「カスタム投稿タイプ」のアーカイブを表示するためには、現在のところ、「固定ページ」を作成して、個別のテンプレートでカスタム投稿タイプの一覧を呼び出して表示させる方法しかないようです。
アーカイブページを作成する際に、多少つまずいたので注意点等メモしておきます。

追記(2012/2/28):このときはアーカイブページを表示する方法をみつけられずにいたのですが、その後の調べたらできました。こちらの記事の方がおすすめです。
カスタム投稿タイプのアーカイブページを作成する

参考サイト

例として、下記のような「カスタム投稿タイプ」と「固定ページ」を作成してアーカイブを作成します。

カスタム投稿タイプ 投稿タイプ名 shops(ラベル:店舗)
固定ページ タイトル:店舗 スラッグ名:shops

1. Custom Post Type UI プラグインをインストール

※functions.phpを利用する方法もありますが、今回は参考サイトと同様にプラグインを使いました。

2.パーマリンク設定

パーマリンクを設定する場合は、あらかじめ「カスタム投稿タイプ」を作成する前に設定しておきます。

3. カスタム投稿タイプを作成

プラグインを有効にすると、メニューに「Custom Post Type」が現れるので、「Add New」をクリックして、「カスタム投稿タイプ」を作成します。
「Advanced Options」をクリックして、オプションを表示しておきます。

設定は目的にあわせて入力してかまいませんが、重要なのが、「投稿タイプ名」と「カスタムリライトスラッグ」です。
投稿タイプ名:shops、カスタムリライトスラッグ:shopのように、複数形と単数系にしておく必要があります。


3.個別記事テンプレートを作成

テンプレートは投稿と同様に、single.phpを参照しますが、専用のテンプレートにした場合は、single-投稿タイプ名.phpを作成します。
ここでは、single-shops.phpとなります。

4.固定ページ「店舗(shops)」を作成

このページのテンプレートに、カスタム投稿タイプ「shops」のアーカイブを作成します。

記述例 page-shop.php

<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('post_type=shops' . '&paged=' . $paged . '&posts_per_page=10');
?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<article>
<header>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<time datetime="<?php the_time('c'); ?>" pubdate="pubdate"><?php the_time('Y.m.d'); ?></time>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; ?>

<nav class="pagenav">
<span><?php previous_posts_link(); ?></span>
<span><?php next_posts_link(); ?></span>
</nav>
<?php $wp_query = null; $wp_query = $temp; ?>

Codex等にあるように、ループ名に$loop等を使うと、ページ送りができなくなるので、$wp_queryを使う必要があるようです。

5.記事を投稿して、表示を確認します。

「カスタム投稿タイプ」に記事を投稿すると、パーマリンク設定がデフォルトの場合、個別の記事URLは
http://example.com/?shops=スラッグ名
ですが、パーマリンク設定をしている場合、記事URLは
http://example.com/shop/スラッグ名
となります。ここで、URLが「shops」と複数形ではなく、「shop」と単数系になっていることに注意が必要です。

パーマリンク設定をしている場合、「投稿タイプ名」に複数形、「カスタムリライトスラッグ」に単数系を指定しておかないと、個別記事を表示する際Not Foundになってしまいます。

また、カスタム投稿タイプ作成後にパーマリンク設定を変更した場合もNot Foundになるので、変更した場合はプラグインで再度カスタム投稿タイプを更新する必要がありました。

その他

ある案件で、設定>表示設定で、投稿ページを固定ページに割り振っていた時、どうしてもページ送りがうまく行かなかったのですが、その原因が、カスタム投稿タイプのカスタムリライトスラッグと固定ページのスラッグ名を同じにしていたせいでした。

・・たぶん誰もこんな間違いはしないと思うのですが、私はこんなことにはまってしまいました。

今回はじめてカスタム投稿タイプを使ってみましたが、思ったより簡単で一度使い方に慣れてしまえば、かなり思い通りの管理画面になりますね。
カスタムフィールドと併用して使えば、クライアントへの説明の手間が大分省けそうです。

20 Responses to “固定ページにカスタム投稿タイプのアーカイブを表示する”

  1. iwai より:

    参考にさせていただきました!

    – – – – – – – – – – – – – – – – – – –

    ある案件で、設定>表示設定で、投稿ページを固定ページに割り振っていた時、どうしてもページ送りがうまく行かなかったのですが、その原因が、カスタム投稿タイプのカスタムリライトスラッグと固定ページのスラッグ名を同じにしていたせいでした。

    – – – – – – – – – – – – – – – – – – –

    ↑まさに、これでハマっていました。

    ありがとうございましたm(_ _)m

  2. コモモ komomo より:

    わたしだけかと思っていましたが、お役に立ててよかったです(^^)

  3. もふもふ より:

    まさにまさに、カスタム投稿ページの記事一覧のページを作ろうとして四苦八苦してました。おかげさまでできました~~o(≧∇≦o)(o≧∇≦)o!!!
    すごく助かりました。
    どうもありがとうございました

  4. コモモ komomo より:

    最初の導入は少しだけコツがいりますね。無事にできたみたいで良かったです。わーい^^

  5. […] ・固定ページにカスタム投稿タイプのアーカイブを表示する […]

  6. まいまい より:

    私もすっかりはまりました(^^ゞ
    これで先に進めます。ありがとうございました\(^O^)/

  7. コモモ komomo より:

    >まいまいさん
    お役に立てたのなら良かったです^^

  8. […] 固定ページにカスタム投稿タイプのアーカイブを表示する | Cat Speak カテゴリー: WordPress […]

  9. […] ページで終わっちゃうんです。 これは困るよーという訳で 固定ページにカスタム投稿タイプのアーカイブを表示する|Cat Speak こちらにたどり着きましたが、うまくいかず。 ※カスタ […]

  10. satosato より:

    Komomoさん、

    この記事、大変参考になりました。
    ありがとうございます。

    頂いた手順で試したところ、テーマのメニューの管理画面のところに、カスタム投稿タイプの項目が現れ、カスタム投稿を複数すると、そのすべてが、メニュー上で確認できました。

    なので、ウィジットの管理画面上で、”カスタムメニュー”のウィジットに、カスタム投稿タイプのメニューを
    反映させて、トップページ上のカスタム投稿タイプを一覧表示させたいところにウィジットをドロップしました。

    そして、その後、カスタム投稿タイプで複数投稿したの
    ですが、それがトップページ上に自動で反映されていませんでした。

    メニューの管理画面に戻ったところ、メニューの
    管理画面上ではすべてのカスタム投稿タイプの投稿が反映
    されていました。

    いちいち、メニューの管理画面上で、それぞれの投稿の
    チェックボックスにチェックを入れないとトップページ
    に反映されません。。

    私自身、ワードプレスの初心者なので、
    これが正常なのか、コモモさんの記事どおりに
    設定ができていないのかどうか判別がつきません。

    もしお時間がありましたら、思いつくご範囲で、
    コメントいただけますと大変助かります。

  11. コモモ komomo より:

    satosatoさん
    ちょっと質問の意図とあっているかどうかわからないんですが、「カスタム投稿タイプ」と「カスタムメニュー」はまったく別の機能です。(ちょっと名前は似てますが)
    「カスタム投稿タイプ」で記事を追加しても「カスタムメニュー」には反映されません。「カスタムメニュー」は、固定ページ・投稿のカテゴリ・カスタム投稿タイプなどを混ぜたナビゲーションを作ったり、任意の必要なメニューを作れるのが良いところなので、この動作は正しいです。

    ちなみに、この記事より、下記の記事の方がオススメです。
    http://cat-speak.net/2012/02/29/433/

    なお、記事通りに設定できているかどうかなのですが、この記事では「カスタムメニュー」については触れていないので、なんとも判断できないです。

    トップページにカスタム投稿タイプの記事一覧を表示させるには、query_postsを利用する方法が一番良いですよ。

  12. satosato より:

    Komomoさん

    返事がおくれてしまいまして、申し訳ございません。
    分かりやすいご回答ありがとうございます。

    初心者のために、頭を整理できていない状況でのご質問
    だったので、内容が分かりにくかったと思いますが、
    ご丁寧な対応に感謝いたします。

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

  13. コモモ komomo より:

    satosatoさん
    こちらこそ、すみません。先日の回答でわかっていただけたでしょうか。。
    WordPressのフォーラムだと、任意の方が質問に答えてくれたりもしますよー。

  14. […] 固定ページにカスタム投稿タイプのアーカイブを表示する|Cat Speak […]

  15. New Horizon より:

    カスタム投稿タイプUIの使い方でつまづいてるのですが投稿のスラッグ別のタイトルを呼び出そうと苦戦してます。

    上記の要領ですと投稿された全ての記事が対象となっていると思います。実際に変更して確認したところ全ての記事のタイトルが表示できました。

    投稿した記事の中で特定のslug別に表示することはできますか?

    *post_typeはproductで種類としてテレビ、パソコンなどでslugがtv,pcになってます。
    *プラグインをつかって固定ページを編集してます。

    このページでtvだけのタイトルを表示したい、このページではpcだけのタイトルを表示したいという感じです。

  16. コモモ komomo より:

    >New Horizonさん
    ごめんなさい。ちょっと質問の意図が掴みきれませんでした。。
    「投稿のスラッグ別のタイトル」とありますが、投稿スラッグは固有のものなので「カスタムタクソノミー(分類タイプ)」のスラッグということでしょうか?
    カスタムタクソノミー別のアーカイブは普通に作れます。こちらの記事がよくまとまっています。
    http://webdesignrecipes.com/wordpress-conditional-tags-and-custom-post-type/

    なお、この記事は古いのでよくわからずに固定ページに表示してしまったのですが、固定ページにカスタム投稿タイプは表示しないほうが素直にWordPressを使えます。
    こちらの記事も参考にしてみてください。
    http://cat-speak.net/2012/02/29/433/

  17. […] 成し、適当なページ用のテンプレートphpを用意します。(今ひとつ意味が分からない方はこちらとかが参考になるかもしれません。)WP_Queryを使ってカスタム投稿タイプのアーカイブを表 […]

  18. massa より:

    こちらの記事大変参考になりました。

    投稿順の指定はどの部分に記述するのでしょうか??
    自信で色々とやってみましたがカスタム投稿一覧を
    固定ページに表示することはできましたが、順番の入れ替えがどうすれば良いのかわかりませんでした。
    ご教授の方よろしくお願いいたします。

  19. コモモ komomo より:

    @massaさま
    本文中にも記載していますが、この記事のときはよくわからずに固定ページに表示しましたが、固定ページとしてではなく、カスタム投稿の一覧としてページを作成する方が自然ですので、以下の記事を参考にしていただければと思います。
    http://cat-speak.net/2012/02/29/433/

    また、一覧ページの順序を入れ替えるには、フィルターフックを利用するのが良いです。こちらの記事が参考になると思います。
    http://gatespace.jp/2012/09/10/modify_main_queries/

コメントを残す

人気の記事