WordPress 一番簡単なカスタム投稿の作成と表示方法

Pocket

WordPressではデフォルトで投稿と固定ページが用意されています。カスタム投稿を作ることで通常のページとは異なるデザインやレイアウトのページを作成することができるようになります。

また、カスタムタクソノミー(タグやカテゴリーを新しく作る)やカスタムフィールドを組み合わせることで、各投稿で個別の値(例えば商品説明ページの値段やサイズなど)も設定することが可能です。

このページではこれまで設定が面倒だったカスタム投稿をとっても簡単に設定し、テンプレートを用意してデータを表示する方法を紹介していきます。
WordPress カスタムフィールドの作成と表示方法
WordPress カスタムタクソノミーの作成と表示方法

WordPressのカスタム投稿設定方法

Typesのインストール

まず最初にWordpressにカスタム投稿などを簡単に設定できるTypesというプラグインをインストールします。

このTypesは無料で使えて、これまでのカスタム投稿を作成するプラグインよりもはるかに簡単で使いやすいのでおすすめです。

インストール方法は通常のプラグインと同じ。管理画面メニューのプラグインから新規追加を選択してTypesで検索し、最初に出てくる[Types – Custom Fields and Custom Post Types Management]をインストールします。
Wordpress Typesのインストール方法
インストールして有効化するとTypesプラグインのメニューが追加されます。
Wordpress Typesのインストール方2

Typesでカスタム投稿を設定する

Typesのインストールが完了したら、Wordpressのカスタム投稿を作成してみましょう。TypesのメニューからCustomTypes及びTaxonomyを選択し、設定画面を開きます。

ここではカスタム投稿の設定を行うので左側のボタンを押して次の画面へ。ちなみにTypesではカスタム投稿のほかにカスタムフィールドやカスタムタクソノミーも簡単に設定可能です。
Wordpressにカスタム投稿を作成する方法1
設定画面に入ったらまずはポストタイプ名を入力します。1段目はメニューに表示される名前。ここは日本語でもOK。2段目はテンプレートでつけたカスタム投稿名の英字、3段目はスラッグを入力します。2段目と3段目は同じにしたほうが分かりやすいと思います。

その下の可視性の欄は表示するのでデフォルトのままでOK。タクソノミー欄では、このカスタム投稿で利用する分類を指定できます。必要なものにチェックを入れます。
Wordpressにカスタム投稿を作成する方法2
ラベル欄は投稿画面やメニューに表示されるラベルの名前を設定できます。ラベルの表示を変更したいときはこちらのテキストを変えれば日本語化も可能。
Wordpressにカスタム投稿を作成する方法3
次は投稿画面に表示するセクションを選択します。投稿画面に必要なものを選択しましょう。ここではとりあえずサムネイルを追加しておきました。
Wordpressにカスタム投稿を作成する方法4
この下にある詳細やpost繫がりはデフォルトのままでOKです。また、これらの設定は後から自由に変更できるので、必要なものだけ設定したら保存ボタンを押して完了します。問題がなければ以下のように表示されます。
Wordpressにカスタム投稿を作成する方法5

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にカスタム投稿を表示する方法1
投稿方法は通常の投稿と同じです。必要であればカテゴリーの追加やパーマリンクの変更も行っておきます。投稿できたらアーカイブを開いて表示してみます。
Wordpressにカスタム投稿を表示する方法2
最初にテンプレートを作成したのでうまく表示されています。リンクをクリックして記事ページを表示してみます。
Wordpressにカスタム投稿を表示する方法3
個別記事ページもカスタム投稿の記事が表示されました。

まとめ

ここまでで紹介したように簡単にカスタム投稿が設定できました。表示もとくに難しいことはなくテンプレートを用意するだけです。

無料で使えるWordpressプラグインのTypesでは、カスタムフィールドやカスタムタクソノミーも簡単に設定することができます。この記事と合わせてご覧ください。

WordPress カスタムフィールドの作成と表示方法
WordPress カスタムタクソノミーの作成と表示方法

最後まで読んでいただきありがとうございました:)