Wordpress カスタム投稿タイプの記事詳細・一覧ページを表示する方法
カスタム投稿タイプを設定する方法にはプラグインを使う方法とfunctions.phpに直接書く方法とがあります。
どちらの方法を使う場合も、一覧を表示する機能をONにしないと一覧ページは表示されません。
基本テンプレート名＋「-スラッグ名」を付けた別名phpを作ると通常テンプレートとは別に管理できます。
カスタム投稿タイプの記事詳細ページ一覧ページを表示する
今回はカスタム投稿タイプの記事詳細ページ、そしてカスタム投稿の記事一覧ページを作成する方法をご紹介します。
Wordpressテーマを自作したり、HTMLテンプレートからテーマ化する場合は、こういったファイルも準備していく必要があります。
テーマの自作やカスタマイズはスキルアップにつながる
自作する事はWordpressの仕組みを覚える事に直結するので、しっかり理解して欲しいと思います。
作るファイルの名前、表示するURLなどを確認しながらご覧頂ければと思います。
カスタム投稿タイプとは
通常の投稿とは別のタイプの記事を書く際に使われるのが「カスタム投稿タイプ」ですね。
例えば管理画面にもともとある「投稿」とは別に、頻繁に更新するイベント情報やプレスリリースなどを投稿する場合です。
投稿欄自体を分ける事で管理しやすく、個別にテンプレートデザイン変更等ができるので大変便利です。
カスタム投稿タイプを設定する方法は2種類
今回はそのカスタム投稿タイプを簡単に導入する方法をご紹介します。
一般的にはプラグインを導入するか、functions.phpに直接書く方法になります。
まずはプラグインを使った方法からご紹介しましょう。
プラグインを使った実装方法
カスタム投稿タイプを設定できるプラグインにも色々ありますが、今回は一つ有名なものを紹介します。
それが「Custom Post Type UI」です。
プラグイン「Custom Post Type UI」をインストール
プラグインのページ上部にある「新規追加」を押し、プラグインの検索ボックスに「Custom Post Type UI」と入力しましょう。
表示されたプラグインをインストール・有効化します。
有効化すると管理画面のメニュー欄に「CPT UI」というメニューが新しくできます。
投稿タイプの作成
基本設定のところにある3つの項目（必須）を決定します。
投稿タイプスラッグは半角英数字で入れましょう。これが出力するphpファイル内で、投稿タイプの指定として使われます。
今回は「mailmagazine」と入れてみました。
下にある複数形のラベルと単数形のラベルについては、今回は上下同じもの（メールマガジンにしました）を入れておきましょう。日本語でOKです。
管理画面にここで決定した文字がメニューとして表示されます。
投稿タイプを入力した状態
一覧表示の設定
カスタム投稿タイプを設定したら当然そのカスタム記事の一覧ページが欲しいですよね。
しかし一覧ページはプラグイン上で設定をしていないと表示がされません。
かなり下の方にスクロールすると「設定」の欄がありますので、そこまで進みましょう。
アーカイブありをTrueにする
その中にある「アーカイブあり」の欄が「False」になっているので、ここを「True」に変更します。
ここを「True」にしないと、カスタム投稿の一覧ページ用ファイルを準備していても表示がされないのです。ここが重要なポイントだと思います。
最後に「投稿タイプの追加」をクリックします。
カスタム投稿記事を入れる
先ほどの複数形・単数系ラベルのところで決定した名前（メールマガジン）が、管理画面メニュー欄に表示されていると思います。
ここから先は通常の「投稿」と同じように、新規追加・記事作成という形で進める事ができます。
表示の際のテストに使いますので、何か記事を入れておきましょう。
function.phpへ直接書いた実装法
上の例ではプラグインを使ってカスタム投稿タイプを設定しましたが、functions.phpへ直接コードを書いても実現できます。
functions.phpへ直接カスタム投稿タイプを設定
下記はその記述例です。
functions.php記述例
<?php add_action('init','create_post_type'); // カスタム投稿タイプの追加 function create_post_type() { register_post_type('mailmagagine', // 投稿タイプ名 array( 'labels' => array( 'name' => __('メールマガジン'), // 表示する投稿タイプ名 'singular_name' => __('メールマガジン') ), 'public' => true, 'has_archive' => true, // 一覧ページの表示ON/OFF 'menu_position' =>5, ) ); } ?>
上記の「'」は半角カンマですので、コピペ時は注意して下さいね。
テーマを自作している場合は、上記コードを書いたfunctions.phpを上書きアップロードします。
プラグイン導入時と同じように、管理画面に「メールマガジン」の欄が表示されます。
プラグインとfunctions.phpを両方設置した場合は、プラグインの方が優先されます。
functions.phpの注意
「Custom Post Type UI」プラグインでも設定の「アーカイブあり」の欄でTrue・Falseの設定をしましたが、functions.phpでも同様です。
functions.php上でも一覧ページを表示させるかさせないかの設定「has_archive」が必要になります（コード内赤文字参照）。
'has_archive' => true,
当然の事ながら、ここをFalseにしていると一覧ページは表示されません。
has_archiveをTrueで付ける事
さらにこのhas_archive欄自体が無いと「False」と同様の扱いになります。
つまりhas_archiveの記述がないと、achive-mailmagazine.phpファイルを準備していても一覧は表示されません。
ですので上記の様にきちんと記述して「True」にしておきましょう。
カスタム投稿記事詳細ページを作る
ではプラグインやfunctions.phpで作ったカスタム投稿記事の詳細ページを表示させるファイルを作ります。
もし通常の投稿ページとカスタム投稿記事とが同じレイアウトデザインで良ければ、single.phpがあれば表示されます。
記事詳細ページのsingle.php
single.phpは詳細ページ表示専用のファイルであり、通常投稿・カスタム投稿いずれも表示ができます。
しかしレイアウトデザインを分けたいなら、出力ファイルは個別の方がいいですよね。
-スラッグ名でスラッグの投稿記事を出せる
ここではsingleの後ろに「-mailmagazine」とした、single-mailmagazine.phpを複製して作ります。
singleの後ろに「-スラッグ名」を付ける事で、そのスラッグ名に沿ったカスタム投稿記事専用のページになってくれるのです。
カスタム投稿記事表示コード
既にsingle.phpの複製としてコードが入っていると思いますが、一応コードを紹介しておきます。
中身は今の環境に合わせて自由に書き換えてもらって構いません。
single-mailmagazine.phpコード例
<?php get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <section> //この表示タグ部分は自由 <?php the_content(); ?> </section> <?php endwhile; endif; ?> <?php get_footer(); ?>
特にスラッグ名mailmagazineの単語を入れるところはありません。
-mailmagazine.phpのファイル名部分で判断してくれます。
設定→パーマリンクで一度保存をする
ここまで来たら、一度Wordpress管理画面の「設定」から「パーマリンク」のページを開きます。
特に何も変更せずにそのまま下の「保存」を押しましょう。
そうしないと今回準備したsingle-mailmagazine.phpが認識されず、404エラーになる場合があります。
「パーマリンクを保存しなおす事」を覚えておきましょう。
カスタム投稿記事詳細URL例（投稿名の場合）
domain.com/mailmagazine/投稿名 となります。
カスタム投稿タイプの記事詳細の場合、スラッグ名のディレクトリが付いて、さらに投稿名が後ろにつくアドレスになります。
実際に表示されているかどうか、URLを確認してみて下さいね。
カスタム投稿記事一覧表示用のファイルを作る
次にこのカスタム投稿の記事が一覧で表示されるページを準備します。
記事一覧を出す場合、archive.php等がよく使われます。
今回はarchive.phpの後ろに「-mailmagazine」と追記したphpファイルを別名保存します。
先ほどのsingle-mailmagazine.phpと同様、archive.phpテンプレートとは分けましょう。
single.phpとachive.phpの性質の違い
もしここでarchive-mailmagazine.phpを作らないままだと、カスタム投稿記事の一覧ではなく通常の「投稿」の一覧が表示されてしまいます。
single.phpは通常とカスタム記事の詳細をどちらも表示できていましたが、archive.phpはカスタム投稿記事一覧の表示用には使えません。
カスタム投稿記事の一覧を表示させるには、archive-mailmagazine.phpなど専用スラッグ名のテンプレートが必要になります。
カスタム投稿記事一覧コード
下記がarchive-mailmagazine.php内に書くコードの例です。
中身は自由に書き換えてもらって構いません。
他にもWEB上でいろいろな書き方が紹介されていますので、参考にしてみて下さい。
archive-mailmagazine.phpコード例
<?php get_header(); ?> <h2>メールマガジン</h2> //タイトル見出しhtmlタグ <ul> <?php $args = array( 'numberposts' => 20, //表示する記事の数の指定 'post_type' => 'mailmagazine' //投稿タイプの指定 ); $posts = get_posts( $args ); if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> <?php else : ?> //記事が無い場合 <li>記事はまだありません。</li> <?php endif; wp_reset_postdata(); //クエリのリセット ?> </ul> <?php get_footer(); ?>
カスタム投稿記事一覧URL例
domain.com/mailmagazine/ となります。
カスタム投稿タイプの記事一覧の場合、スラッグ名のディレクトリが付くだけです。
カテゴリなし全投稿の記事一覧ページについて
通常、投稿の記事一覧はほとんどがカテゴリ分けされている事が多いですよね。
カテゴリに関係なく全て一覧にした記事一覧リストページは、最初から用意されている事はあまりありません。
ここではカテゴリに関係なく投稿一覧を表示させる方法もご紹介しておきます。
一覧表示用テンプレートphpの作成
名前は何でも構いませんので、archive.phpを複製した記事一覧用phpファイルを準備します。
例えば「news.php」などにしましょう。
記事一覧専用テンプレートの宣言
news.phpテンプレートの最上部に下記の様に記述するのがポイントです。
<?php /* Template Name: news */ ?>
news.php内コード
記事一覧表示用固定ページを作る
管理画面の「固定ページ」で記事を一覧表示する専用ページ（「新着情報」など）を作ります。
URLは：domain.com/news などにしましょう。固定ページ内には何も入れる必要はありません。
ページ属性のテンプレートの選択ボックスから「news」を選択します。
先ほど「Template Name: news」と宣言した事で、このテンプレートの欄に表示がされるようになる訳です。
この設定により、固定ページ「新着情報」ではnews.phpテンプレートが適用されます。
こうする事で全ての投稿記事一覧リストが表示されます。
domain.com/news 投稿記事一覧（カテゴリ分けなし）
まとめ
以上、Wordpressでカスタム投稿タイプを設定し、投稿記事を表示する方法をご紹介しました。
カスタム投稿タイプにはさらにカテゴリ訳をするタクソノミーなどの機能がありますが、ここではそこは紹介していません。
あくまで基本的な仕組みの理解がメインとなります。
テーマを自作したりhtmlテンプレートからカスタマイズをする際は必ずぶち当たりますので、しっかり理解をしておきたいですね。
