WordPressではデフォルトで投稿と固定ページが用意されています。カスタム投稿を作ることで通常のページとは異なるデザインやレイアウトのページを作成することができるようになります。
また、カスタムタクソノミー(タグやカテゴリーを新しく作る)やカスタムフィールドを組み合わせることで、各投稿で個別の値(例えば商品説明ページの値段やサイズなど)も設定することが可能です。
このページではこれまで設定が面倒だったカスタム投稿をとっても簡単に設定し、テンプレートを用意してデータを表示する方法を紹介していきます。
WordPress カスタムフィールドの作成と表示方法
WordPress カスタムタクソノミーの作成と表示方法
WordPressのカスタム投稿設定方法
Typesのインストール
まず最初にWordpressにカスタム投稿などを簡単に設定できるTypesというプラグインをインストールします。
このTypesは無料で使えて、これまでのカスタム投稿を作成するプラグインよりもはるかに簡単で使いやすいのでおすすめです。
インストール方法は通常のプラグインと同じ。管理画面メニューのプラグインから新規追加を選択してTypesで検索し、最初に出てくる[Types – Custom Fields and Custom Post Types Management]をインストールします。
インストールして有効化するとTypesプラグインのメニューが追加されます。
Typesでカスタム投稿を設定する
Typesのインストールが完了したら、Wordpressのカスタム投稿を作成してみましょう。TypesのメニューからCustomTypes及びTaxonomyを選択し、設定画面を開きます。
ここではカスタム投稿の設定を行うので左側のボタンを押して次の画面へ。ちなみにTypesではカスタム投稿のほかにカスタムフィールドやカスタムタクソノミーも簡単に設定可能です。
設定画面に入ったらまずはポストタイプ名を入力します。1段目はメニューに表示される名前。ここは日本語でもOK。2段目はテンプレートでつけたカスタム投稿名の英字、3段目はスラッグを入力します。2段目と3段目は同じにしたほうが分かりやすいと思います。
その下の可視性の欄は表示するのでデフォルトのままでOK。タクソノミー欄では、このカスタム投稿で利用する分類を指定できます。必要なものにチェックを入れます。
ラベル欄は投稿画面やメニューに表示されるラベルの名前を設定できます。ラベルの表示を変更したいときはこちらのテキストを変えれば日本語化も可能。
次は投稿画面に表示するセクションを選択します。投稿画面に必要なものを選択しましょう。ここではとりあえずサムネイルを追加しておきました。
この下にある詳細やpost繫がりはデフォルトのままでOKです。また、これらの設定は後から自由に変更できるので、必要なものだけ設定したら保存ボタンを押して完了します。問題がなければ以下のように表示されます。
WordPressのカスタム投稿を表示する方法
カスタム投稿用のテンプレートを作成
まずはカスタム投稿用のテンプレートを用意します。一覧表示用のアーカイブステンプレートと個別記事用のシングルテンプレートの2つを作っていきます。
カスタム投稿名は何でも良いのですが、カスタム投稿を作成したときの名前と合わせる必要があります。ここではnewsとします。
//一覧用
archive-{post_type}.php
archive-news.php
//シングル用
single-{post_type}.php
single-news.php
テンプレートの中身はほかのページと特に違いはありません。もちろんレイアウトやデザインを変更する場合はコード内容が異なります。テーマはTwentyTwelveを使用し、以下のテンプレートを追加しました。
archive-news.php
<?php get_header(); ?>
<section id="primary" class="site-content">
<div id="content" role="main">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h1>
<?php endwhile; endif; ?>
</div><!-- #content -->
</section><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
single-news.php
<?php get_header(); ?>
<section id="primary" class="site-content">
<div id="content" role="main">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<h1><?php the_title();?></h1>
<div class="post">
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</div><!-- #content -->
</section><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
カスタム投稿をテンプレートで表示する方法
表示用テンプレートを作成できたので、次は投稿を追加してテンプレートで表示してみます。
管理画面のメニューにTypesで追加したカスタム投稿が表示されているので、AddNewから投稿を開始します。
投稿方法は通常の投稿と同じです。必要であればカテゴリーの追加やパーマリンクの変更も行っておきます。投稿できたらアーカイブを開いて表示してみます。
最初にテンプレートを作成したのでうまく表示されています。リンクをクリックして記事ページを表示してみます。
個別記事ページもカスタム投稿の記事が表示されました。
まとめ
ここまでで紹介したように簡単にカスタム投稿が設定できました。表示もとくに難しいことはなくテンプレートを用意するだけです。
無料で使えるWordpressプラグインのTypesでは、カスタムフィールドやカスタムタクソノミーも簡単に設定することができます。この記事と合わせてご覧ください。
WordPress カスタムフィールドの作成と表示方法
WordPress カスタムタクソノミーの作成と表示方法
最後まで読んでいただきありがとうございました:)