超便利！カスタム投稿タイプが簡単に作れるCustom Post Type UIの使い方と表示方法を解説！

今回はWP「カスタム投稿タイプ」について徹底解明！
複雑なシステムを要するサイトを作成の場合、使いこなせればとーっても便利な機能です。ぜひお試しを！

カスタム投稿タイプを使おう！！

カスタム投稿タイプって？

カスタム投稿タイプとは、通常の「投稿」とは別に、新たにカスタマイズしたオリジナルの投稿タイプのことを言います。

カスタム投稿はこんな時に便利

・クライアント側が更新する場合
・ブログのような機能を２つ以上使う場合
・記事内容をカスタムフィールドを使って呼び出している場合
・複数の親カテゴリーに対して複数の子カテゴリーを同時管理する場合


相手の管理のしやすさを考えた、親切で便利な機能です。

たとえば・・・

クライアント側が更新する場合

たとえばクライアントが更新する際、記事内容を本文スペースの他にカスタムフィールドで呼び出していると、入力する欄が迷子になりやすいです。
そんな時、カスタム投稿タイプなら、投稿タイプの名前も編集できますし、本文スペースを消すこともできます。

ブログのような機能を２つ以上使う場合

たとえばブログ記事の他に、表示の全く違う通販記事を作りたいとします。しかし、同じ投稿タイプから投稿すると、どれがブログ記事の中に通販記事が埋もれてごちゃごちゃになってしまったり、検索の際に一緒くたにされてしまう可能性があります。
そんな時、カスタム投稿タイプなら、投稿から切り離せるので、ブログ記事を更新したい時・通販記事を更新したい時の段階から、投稿を切り離すことができます。


共通して、使用する人が更新しやすいようにカスタマイズすることが可能ということです。

複数カテゴリーが入り組んだ場合に、作りやすい！

ただ、私が多く使うのは使用する人云々のユーザビリティ以上に（笑）、上記の理由が当てはまります。
もうね、複数カテゴリーを利用して管理しているサイトって本当手強い。子カテゴリーを呼び出したいのに親カテゴリーが出てきたり、カテゴリー内にもidで優劣があって呼び出したくないやつまで出てきたりとか、そういうのをいちいち除外したり指定したりほんと…やってらんないですよね！


ブログ機能としてのみで使うなら、または、WPの知識がある人が自分自身で管理するなら、カテゴリーごとにシングルページを編集すれば、特に必要ないことの方が多いかと思うのですが・・・

カスタム投稿タイプの使用例

上記では少しわかりにくいですかね？


例えば、もともと普通の投稿タイプでは商品情報を更新していた。投稿タイプの中では様々なcategory.phpを使い分け、カテゴリによって表示形式を変えたりもしていた。
そこにブログ機能を追加することになり、投稿タイプに新しくカテゴリー・ブログを投稿してしまうと、ブログ用のカテゴリと商品情報のカテゴリがごちゃごちゃに、記事もごちゃごちゃになってしまうため、商品情報用の「投稿」の他に「ブログ」という投稿タイプを新たに作成。
この、新しく作った投稿タイプこそが、カスタム投稿タイプです。


商品情報以外の、ブログ専用カテゴリーも追加できるため、大変便利です。


通常の投稿タイプと使い分けたいときに最適！

カスタム投稿タイプの作り方

一見難しいカスタム投稿タイプ。実際はfunction.phpをいじったりする必要があるのですが、実はCustom Post Type UIというプラグインを使えば簡単に増やせるんです！

Custom Post Type UIの使い方

まずは「Custom Post Type UI」というプラグインを入れましょう。
管理画面のサイドメニューに「CPT UI」という項目が追加されたと思うので、「新規追加（Add/Edit Post Types）」をクリック。
こちらから投稿タイプを増やせます。

CPT UI Add New Post Typeで投稿タイプを作る

CPT UI新規追加で表示される左部分を入力すると、投稿タイプが作れます。

項目は日本語になっている部分が多いので、私は大体こんな感じかな〜というざっくりとした感覚で入力していきました。
投稿タイプ名（Post type slug）はシステムに関わってくるので結構重要です。
とにかく半角英数で書けば大丈夫！スラッグになるので、urlに使われても支障がないものにしましょう。


あとはてきとうにやりました。結構イケます。
右側のLabel でラベル表記（編集画面でのクライアント用の説明と捉えていただければ大丈夫です。わかりやすく日本語で書かれているといいかも）
サポート部分でシステムの可否を設定します。


大体初期設定でいけますが、あるとしたらHas Archiveで、アーカイブをTrueに直すくらいでしょうか。

こんなにざっくりで良いのか！というくらい簡単に、カスタム投稿タイプが完成しました。
管理画面のサイドメニューに、ご自身オリジナルの投稿タイプが追加されたと思います。

そんな感じで大体できちゃいますが、すっごく分かりやすい記事を見つけたので、こちらをご参考に。
カスタム投稿タイプのURLに階層構造を持たせることもできるそうですよ。

カスタム投稿タイプ用の専用カテゴリーが作れる

次は左側ナビのCPT UIから「タクソノミー（Add/Edit Taxonomies）」を編集します！

こちらはカスタムタクソノミーを増やす項目になっています。
「分類」だとか「カスタムタクソノミー」なんていうと、なんのこっちゃと思ってしまいますが、普段の投稿で使用している「カテゴリー」みたいなものだと思って大丈夫です。


「分類名（Taxonomy slug）」は半角英数で、「ラベル」は管理者の分かりやすいものを入力。
最後に「利用する投稿タイプ」で、先ほど作った投稿タイプを選択すれば…


カスタム投稿タイプでも、専用のカテゴリーができてしまうのです！！
これで更に、普段の投稿と区別できますね。

投稿タイプのカテゴリー（タクソノミー）の増やし方

で、先ほど作った専用カテゴリー（タクソノミー）が表示されるようになっています！



これをクリックすると、普段カテゴリーを追加するように、カスタムタクソノミーの中に、タームを増やしていくことが可能です。
なんて便利なんでしょう！

タクソノミー？ターム？カテゴリー？

タームとは、投稿タイプ専用のカテゴリーの中に小分けされたカテゴリーのイメージです。


たとえばブログというカスタム投稿タイプでは、ブログ専用のカテゴリーがあり、日常・買い物・献立というカテゴリーに小分けするとします。
このブログ専用のカテゴリーを「カスタムタクソノミー」と言い、日常・買い物・献立を「ターム」と言います。


例えばスラッグに直すと、カスタム投稿タイプ名「blog」のカスタムタクソノミー名が「blog-cat」だとして、タームがそれぞれ「days」「shopping」「gohan」というような感じになるのかな。


カテゴリーやら、タクソノミーやら、タームやら、なにやらよく分からなくなってしまいましたが、全網羅されている記事を見つけました。大変わかりやすいです。
タクソノミーやらタームやらの知識があれば、次回はより分かりやすくなると思いますので、ぜひご参考に。

使い勝手色々

ブログ専用カテゴリーはたくさん増やせるから、私は親カテゴリーと子カテゴリーのような役目に分けることも。
例えばカスタムタクソノミーを「web」「business」「life」の３軸作るとします。


「web」のタームには＜design＞＜html＞＜css＞＜php＞＜java＞の５つを作り
「business」のタームには＜marketing＞＜branding＞＜system＞＜recruiting＞の４つを作り
「life」のタームには＜days＞＜shopping＞＜gohan＞の３つを作る


というような使い方もできるということです。
このような使い方をすると、スラッグが変わってきますので、最終的にどのような階層になっておくべきか考えて作るのがベストかもしれませんね！

カスタム投稿タイプの記事表示

さてさて。
カスタム投稿タイプ用のカテゴリー＝カスタムタクソノミーと、それに付随するカテゴリー＝タームが完成しましたが、これをいつもの投稿と同じように表示させようとすると、そうはいかない点がいくつかあるんですね。


カスタム投稿タイプの作り方は検索すれば割とたくさん出てくるのですが、実際どうしたらカスタム投稿タイプは表示されるのか！？ということに関しては、なかなか紹介されていません。


そこで、カスタム投稿タイプを作ったはいいけど…と躓く前に、ぜひチェックしてください。

「記事内容ページ」の表示方法

記事の内容のページは、いつも通り「single.php」を使用できます。
個別ページでも、表示させるテンプレートは変わらないですもんね。


ファイル名：single-カスタム投稿タイプ名.php


これで設定すればバッチリです。
先ほどの通りカスタム投稿タイプでブログを更新するとなると、投稿タイプ名は「blog」なので、「single-blog.php」となります。


表示のためのループも、普段通りで大丈夫でした。

カスタム投稿タイプに該当する記事の「一覧ページ」表示方法

カテゴリーとかは抜きで（これは後ほど。）、ただカスタム投稿タイプ「blog」に該当するブログのみを一覧表示させたい場合は、Archiveで表示させます。


ファイル名：archive-カスタム投稿タイプ名.php


これで「ドメイン/カスタム投稿タイプ名」にアクセスすると、一覧表示されているはずです！
例えば先ほどの通りカスタム投稿タイプでブログを更新するとなると、投稿タイプ名は「blog」なので、作るファイルは「archive-blog.php」となり、アクセス先は「http://ドメイン.com/blog」となるはず（例）。

カスタム投稿タイプのカテゴリー（タクソノミー）毎の記事「一覧ページ」表示方法

一覧については、固定ページやindexを使ってループを書くこともできますが（方法はこの次の次で紹介）、基本的に通常の投稿タイプなら使う「category.php」は使いません。
というか、使おうと思って作っても反応しなかった。カスタム投稿タイプではカテゴリーと同じ役割を果たすタクソノミーと、通常のカテゴリーってなんか違うみたい。実はテンプレート「taxonomy.php」があるんです。
そこで、作るファイルはこうです。


ファイル名：taxonomy-カスタムタクソノミー名.php


カスタムタクソノミー名は、先ほどまでの例でいくと「blog-cat」などになりますね。

カスタム投稿タイプのターム毎の記事「一覧ページ」表示方法

カスタム投稿タイプ用のカテゴリーに付随する各カテゴリー…、つまりターム（例に出していたブログでいう日常・買い物・献立の部分）に該当する「記事一覧」はどうしたら表示できるのでしょうか。
こちらも「category.php」ではなく、こちらも「taxonomy.php」を使用します。


ファイル名：taxonomy-カスタムタクソノミー名-ターム名.php


これで、普段のループ記載すればこちらも表示されます。


例えば。先ほどの例で解説しますね。
カスタム投稿タイプ「ブログ」のブログ専用カテゴリーである
カスタムタクソノミー名のスラッグ・半角英数で記入したのは「blog_cat」。
そのターム名である日常・買い物・献立のどれかが入ります。
日常というタームを表示させたい場合、日常のスラッグ・半角英数で記入したのは「nichijou」。
つまり「taxonomy-blog_cat-nichijou.php」これで、日常に該当する一覧表示が可能！


どれもスラッグ名をうまくカスマイズすれば良いのです。




ちょっとややこしくなってきましたが、ファイル名と普段のループさえ記載できていれば大丈夫です。
普通の投稿でいうカテゴリーの役割をしているのにタクソノミーとかタームとか、ややこしいですね。

カスタム投稿タイプの記事一覧をindex.phpなどに表示する場合

カスタム投稿タイプの一覧を、トップページやサイドバーに表示したい時のループはこちらを引用しました！
引用先：WordPressのカスタム投稿タイプで作成したページの一覧を表示させる

<ul>
<?php
    $wp_query = new WP_Query();
    $param = array(
        'posts_per_page' => '-1', //表示件数。-1なら全件表示
        'post_type' => 'hogehoge', //カスタム投稿タイプの名称を入れる
        'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
        'orderby' => 'ID', //ID順に並び替え
        'order' => 'DESC'
    );
    $wp_query->query($param);
    if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

やったー！これで、トップページにも表示されます。


注※こちら、固定ページでこのまま表示すると、表示はできますがページ送りができなくなります。。。
その対処法は、この次でご紹介します！

表示方法まとめ

以上で、カスタム投稿タイプの記事表示が完了しました。


・記事内容は「single-カスタム投稿タイプ名.php」
・記事一覧は「archive-カスタム投稿タイプ名.php」
・タクソノミー一覧は「taxonomy-カスタムタクソノミー名.php」
・ターム一覧は「taxonomy-カスタムタクソノミー名-ターム名.php」
・それページでのループはこちらを引用。


上記でスムーズに表示ができると思います★


どのURLで表示されるのかわからなかったり、階層が理想的でない場合はこちらの階層構造についても参考になるかも。


あとは、一番最後にご紹介するパーマリンク設定のプラグインを入れれば、「http://ドメイン.com/カスタム投稿タイプ名/タクソノミー名/ターム名」のように表示されます！

カスタム投稿タイプの記事一覧を固定ページに表示する際のページ送りがうまくいかない場合の対策

カスタム投稿だと、ページ送り・ページャー（ページネーション）がうまくいかないことがあります。


今回はその対策をご紹介します。



A．カスタム投稿タイプの記事一覧を固定ページに表示する際、ページャーが上手くリンクされない時の対処法


B．カスタム投稿タイプの同ターム内でのページ送り方法


以上です。
これでカスタム投稿タイプのページ送りはばっちり解決するはず。

A．カスタム投稿タイプの記事一覧を固定ページに表示する際、ページャーが上手くリンクされない時の対処法

先ほどご紹介したループでは、固定ページ（page.php）ではきちんと表示できませんでした・・・。


どんな現象が起きたかというと、ページャーが「　１　２　３　…　」と表示されているのに、実際に２ページ目、３ページ目へ行っても、１ページ目の内容が表示されてしまい、上手くページ送りができない。という現象です。
次のページへいこうとすると、リダイレクトされてしまうといった感じですね。


なぜ、ページャーが上手くリンクされないのか・・・
こちらの現象は検証したところによると、固定ページでのみ起こるものだと思います。
こんなことだと困るので、どうにか対処できないものかと調べてみました。


なんと！とっても簡単でした。（調べるのには、時間がかかったのに・・・）


先ほどご紹介したループに、「固定ページだよ」というような指示を入れるだけで、表示されるのです！

 <?php
    $wp_query = new WP_Query();
    $param = array(
        'posts_per_page' => '10', //表示件数。-1なら全件表示
        'post_type' => 'vidablog', //カスタム投稿タイプの名称を入れる
        'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
        'orderby' => 'post_date', //日付順に並び替え
        'order' => 'DESC',
	'paged' => $paged

    );
    $wp_query->query($param);
    if($wp_query->have_posts()): while($wp_query->have_posts()) : $wp_query->the_post();
?>

この９行目「'paged' => $paged」を付け足せば、固定ページでもばっちり表示されます。

さて、これでページャーの問題は解決。
しかし、まだ問題が…。


singleページで、記事内容を表示した時のフッター部分につけた、通常の「次へ」「前へ」などのページ送りがうまくいかないのです！

B．カスタム投稿タイプの同ターム内でのページ送り方法

なぜ通常のページ送りがうまくいかないかと言いますとおそらく、カスタム投稿タイプでは、カスタムタクソノミー、タームを利用しているからですね。
普段使っている「次へ」「前へ」のタグは、同カテゴリー内での移動を可能としていますが、カスタム投稿タイプで利用しているタームのパラメータは持ち合わせておらず、同ターム内での移動ができないのです。


そこで、カスタム投稿タイプのsingleページで、「次へ」「前へ」などのページ送りをしたい時には・・・
Ambrosite Next/Previous Post Link Plasというプラグインを使用します！
※こちらのプラグイン、暫く更新されていないようで、そちらが少し不安ですね…。




こちらをインストール後、singleページのページ送りをしたい箇所へ、以下を入力してください。


前の記事

?php previous_post_link_plus( array('in_same_tax' => true) ); ?>

次の記事

[php]<?php next_post_link_plus( array( 'in_same_tax' => true) ); ?>

すると、同ターム内での前の記事・次の記事のタイトルリンクが表示されます！

ページ送りまとめ

A．カスタム投稿タイプの記事一覧を固定ページに表示する際、ページャーが上手くリンクされない時の対処法
→ループに固定ページであること「'paged' => $paged」を付け足す。


B．カスタム投稿タイプの同ターム内でのページ送り方法
→Ambrosite Next/Previous Post Link Plasプラグインを使用。

カスタム投稿タイプのパーマリンク設定

さて、最後はパーマリンク設定です。
URLの値をカスタム投稿ごとに変えたい場合や、うまくURLが表示されない場合などに挑戦してみてください！


Custom Post Type Permalinksというプラグインをインストール！
すると、管理画面の「設定＞パーマリンク設定」の下部に、「カスタム投稿タイプのパーマリンク設定」が表示されます！
すばらしいプラグイン、大変ありがたいです。

Custom Post Type Permalinksの使い方

参考までに、こちらがカスタム投稿タイプのパーマリンク設定画面です。
こちらに、各投稿タイプのパーマリンクを設定していきます。





日本語なので、特に分かりづらい点はないかと思います。
複数のカスタム投稿タイプを設定している場合でも、各パーマリンクの設定が可能です。


日付だけにしたい場合や、投稿ごとにパーマリンクを変えたい場合などなど。カスタマイズ自由ですね。
詳細な設定方法は次でご紹介します。


そして…
一番下の「カスタム分類のアーカイブのパーマリンクを変更する」にチェックを入れると、
カスタムタクソノミー（カスタム投稿タイプのカテゴリーのようなもの）の
アーカイブページのURLが、
「http://ドメイン.com/カスタム投稿タイプ名/タクソノミー名/ターム名」
となります。素敵ですね！

パーマリンク設定の仕方

さてさて、変更したいカスタム投稿タイプのパーマリンク部分を入力していきますが…
入力欄に入れる、WordPressのタグをざっとご紹介します。


%year%　投稿年を4桁で取得。
%monthnum%　投稿月を取得。
%day%　投稿日を取得。
%hour% 　投稿時間が何時かを取得。
%minute%　投稿時間が何分かを取得。
%second%　投稿時間が何秒かを取得。
%post_id%　投稿固有IDを取得。
%postname%　投稿の投稿名を取得。
%category%　投稿のカテゴリー名を取得。
%author% 　投稿作成者を取得。


以上です。必要なものを、前後にスラッシュを入れて入力していきましょう。


例えばブログだったら、各記事のURLは日付がわかるように・かつタイトルもわかるようにしたいということで
「〜〜/%year%/%monthnum%/%day%/%postname%/」　と設定。
すると、上記にもあるように、「〜〜/年/月/日/投稿名/」となって表示されるんですね。


パーマリンクを設定するとしたら、「投稿名（%postname%）」は入れておくと良いと思います。
なぜなら投稿名のパーマリンクは、自分で投稿画面で入力できるからです。
日本語をアルファベット表記にして、関連ワードを端的に入れたらばっちりかと思います。


参考までにこちらを…WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしよう
このようにパーマリンクってSEO上でもとっても大切なんですね。
というわけで、必ず設定しましょう。

パーマリンクまとめ

・カスタム投稿タイプのパーマリンク設定には
Custom Post Type Permalinks　をインストール！
・パーマリンク設定はとっても大切


以上になります。

カスタム投稿タイプ内での検索

www.misallychan.com

最後に

参考サイトを活用しまくった結果の、拙い知識の継接ぎではありますが、カスタム投稿タイプは複雑なサイト構造では大いに役立つと思っています。
作るまでは簡単ですが、カスタマイズを理解するのは決して簡単ではありません。
私も使ってはいますが、まだまだ理解しきれていません。
ですが、思い描いた機能を反映させるにはとても良い手段になると思いますので、ぜひ、みなさん使ってみてください！

にほんブログ村

misallychan.hateblo.jp
misallychan.hateblo.jp