【WordPress】カスタム投稿タイプの使い方を解説する【テーマ自作】

みやしも WordPress
WordPressでコンテンツ専用の管理画面を作るには、どうすれば良いのでしょうか?
WordPressの『カスタム投稿タイプ』という仕組みを使えば実現できますよ!この記事で詳しく解説してゆきます!

今回は、WordPressのオリジナルテーマ制作で役立つ『カスタム投稿タイプ』の使い方を解説してゆきます。



▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

カスタム投稿タイプとは

カスタム投稿タイプとは

WordPressには、あらかじめ用意されている投稿・固定ページとは別に、新しい 【投稿タイプ(投稿の種類)】を作成する仕組みがあります。



また、この仕組みのことを『カスタム投稿タイプ』と呼びます。

▼カスタム投稿タイプとは
WordPressで用意されている『投稿』『固定ページ』とは別に、新しい”投稿タイプ”を作成できる仕組みのこと。

多くのWEBサイトは、例えば企業サイトなら”制作実績"サービス内容”、店舗サイトなら”商品紹介””お客様の声”といった風に、種類の異なるコンテンツの組み合わせから構成されていると思います。またこれらコンテンツの情報は、管理画面で編集できる様にするのが理想的です。



今回の『カスタム投稿タイプ』はこの様なケースに効果的に利用ができ、カスタム投稿タイプを通して『コンテンツの種類』を定義すれば、それぞれ、コンテンツ専用の管理画面(一覧・編集画面)を用意することが可能となります。

カスタム投稿タイプのイメージ
カスタム投稿タイプの利用イメージ
カスタム投稿タイプはWordPressで  【投稿タイプ(投稿の種類)】を作成するための仕組み。複数のコンテンツを持ったWEBサイトの構築をするために、効果的に利用することができる。

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

今回は次のようなコンテンツを例にして、「カスタム投稿タイプ」の使い方について解説をすすめてゆきます。

例)コンテンツの内容
名前:制作実績
内容:サービスの実績を情報として掲載する
項目:タイトル・サムネイル・メイン画像・サブ画像・テキスト

また、WordPressで上記コンテンツの管理画面を作成する場合、実際には「カスタムフィールド」の設定や、投稿タイプの表示ページの作成などの複合的な作業が必要にもなりますが、今回はカスタム投稿タイプの設定にのみ絞って解説を行います。

カスタム投稿タイプは、上記を実現するための起点とも言えるカスタマイズ作業になります!

カスタム投稿タイプを作る方法は?

カスタム投稿タイプを作成するには、基本的にはそのWordPressテーマの『functions.php』にコードを追加すれば設定ができます。



また、「Custom Post Type UI」などのプラグインを使って設定する方法もありますが、今回はあくまで「functions.php」を編集した解説内容となります。

サンプルコードも紹介してゆきますので、初めはコピペから「カスタム投稿タイプ」を作成することができます。

カスタム投稿タイプを作成する方法

カスタム投稿タイプを追加する方法

それではWordPressで『カスタム投稿タイプ』を作成する方法を解説してゆきます。今回は主に、次のステップで作業を進めてゆきます。



▼作業のステップ

  1. 『functions.php』を編集する
  2. WordPressの管理画面を確認する
  3. PHPコードの詳しい解説

「functions.php」を編集する

まずは『functions.php』の編集を行います。初めはテンプレートとして、以下のコードを使用してゆきましょう。



▼追加するコード

// カスタム投稿タイプの追加
function add_custom_post_type(){
    // 制作実績
    register_post_type(
        'works', // 1.投稿タイプ名 
        array(   // 2.オプション 
            'label' => '制作実績', // 投稿タイプの名前
            'public'        => true, // 利用する場合はtrueにする 
            'has_archive'   => true, // この投稿タイプのアーカイブを有効にする
            'menu_position' => 5, // この投稿タイプが表示されるメニューの位置
            'menu_icon'     => 'dashicons-edit', // メニューで使用するアイコン
            'supports' => array( // サポートする機能
                'title',
                'editor',
            )
        )
    );
}
add_action('init', 'add_custom_post_type');

WordPress管理画面を確認する

「funcstions.php」を編集したらWordPressの管理画面を確認してみましょう。上手くいくと、管理画面は次のようになります。

カスタム投稿タイプの使い方_WordPress管理画面の確認①
カスタム投稿タイプの追加確認①

上記の様に、追加した投稿タイプに対応したメニューが表示されます。また、この時点では既存の「投稿」メニューと同じように、記事の作成や編集といった操作も可能となります。

カスタム投稿タイプの使い方_WordPress管理画面の確認②
カスタム投稿タイプの追加確認②

また、編集画面に表示されているタイトルや本文の部分は、オプション「supports」で設定した"title"と"editor"の設定が適用された結果となっています。

PHPコードの詳しい解説

カスタム投稿タイプの処理全般は、関数「add_custom_post_type(※任意の名前でOK)」を作成して、「init」のアクションフックに追加しています。



また、実際のカスタム投稿タイプの登録はWordPressの「register_post_type」関数で行っています。ここの引数①で「投稿タイプ」の名前を、引数②でそのオプションをそれぞれ指定します。さしあたって編集時のポイントとなるのが、以下の2つです。



  1. 【管理画面上の見た目】
    オプション「label」「menu_position」「menu_icon」でメニューの表示名・表示位置・アイコンといった管理画面上の見た目を調整している
  2. 【使用する編集エリア】
    オプション「supports」で、その投稿タイプで使用するタイトル・本文などの編集エリアの表示切替を行っている



基本的には上記コードをテンプレとして、必要に応じてオプションで調整を行ってゆけばOKです。細かなオプションの情報には、公式マニュアルが参考にもなります。



▼公式マニュアル

関数リファレンス/register post type

管理画面の状態を見ながら、カスタマイズを進めてゆこう!
以上でカスタム投稿タイプの作成方法の解説は終わりです。カスタム投稿タイプと合わせて使える「カスタムタクソノミー」について、引き続き解説してゆきます。

カスタムタクソノミーを設定する方法

カスタムタクソノミーを設定する

カスタムタクソノミーとは、簡単にいうと「カテゴリー」や「タグ」などの記事を分類するための情報のことです。タクソノミー(taxonomy)という言葉は『分類』を意味する英単語でもあります。

また、カスタム投稿タイプで「カテゴリー」や「タグ」を利用するには、『カスタムタクソノミー』の設定が必要になります。

そこで今回は、「カスタムタクソノミー」を設定する方法について、引き続き解説してゆきます。

「functions.php」を編集する

カスタムタクソノミーを追加するには、先ほどと同様に「functions.php」を編集します。引き続き、次のコードを追加してゆきましょう。



▼追加するコード

// カスタムタクソノミーの追加
function add_custom_taxonomy(){
    // 制作実績(カテゴリー)
    register_taxonomy(
        'works-category', // 1.タクソノミーの名前
        'works',          // 2.利用する投稿タイプ
        array(            // 3.オプション
            'label' => 'カテゴリー', // タクソノミーの表示名
            'hierarchical' => true, // 階層を持たせるかどうか
            'public' => true, // 利用する場合はtrueにする
        )
    );
    // 制作実績(タグ)
    register_taxonomy(
        'works-tag', // 1.タクソノミーの名前
        'works',     // 2.利用する投稿タイプ
        array(       // 3.オプション
            'label' => 'タグ', // タクソノミーの表示名
            'hierarchical' => false, // 階層を持たせるかどうか
            'public' => true, // 利用する場合はtrueにする
        )
    );
}
add_action('init', 'add_custom_taxonomy');

WordPress管理画面を確認する

カスタムタクソノミーのコードを追加したら、再びWordPressの管理画面を確認してみましょう。上手くゆくと、管理画面は次のようになります。

カスタム投稿タイプの使い方_カスタムタクソノミーの確認
カスタムタクソノミーの確認

PHPコードの詳しい解説

カスタム投稿タイプと同様に、カスタムタクソノミー用の関数を作成して「init」のアクションフックに追加しています。



また、実際のカスタムタクソノミーの登録にはWordPressの「register_taxonomy」関数で行い、ここの引数①で「タクソノミーの名前」を、引数②では「利用する投稿タイプ」を、さらには引数③には配列で「オプション」をそれそれ指定します。

タクソノミーの振る舞いとして「カテゴリー」「タグ」のどちらを利用するかは、オプションの「hierarchical」で行っています。

このためにも、カテゴリー・タグそれぞれを用意するための「register_taxonomy」の処理は分かれることとなります。両方のコードが無いと動作しない物ではありませんので、ここはあくまでカテゴリー・タグの必要性に合わせて使い分けてゆけばOK です。



▼公式マニュアル

関数リファレンス/register taxonomy

カスタム投稿タイプと同様に、コンテンツの内容に合わせてカスタマイズしてゆこう!

WordPressテーマ制作のおススメ情報

WordPressのオリジナルテーマ制作で役立つ、おススメ情報を紹介いたします。

おススメ動画:『WordPress開発マスター講座』

WordPress開発マスター講座
Udemy - WordPress開発マスター講座

Udemyでも人気の「WordPress開発マスター講座」は、WordPressの仕組みからサイト制作への活かし方まで、初心者でも分かりやすく学ぶことができる動画教材です。



WordPress開発マスター講座

WordPressのイメージの持ちづらい。。なんて方は、まずは動画から学習するのがおススメです!

おススメ書籍:『WordPressデザインレシピ集』

WordPressデザインレシピ集
WordPressデザインレシピ集

本記事でも解説してきた、WordPressのテーマ実装に関する情報がまとめられた書籍です。目的別にレシピが整理されているので、『あの実装はどうやるんだっけ?』なんて時にこそ確実に役立つ一冊です。


WordPressデザインレシピ集

テーマの実装を進めている、情報をまとめて抑えておきたい方におススメです!

この記事のまとめ

今回は、WordPressのオリジナルテーマ制作で役立つ『カスタム投稿タイプ』の使い方について、図解のもとに、詳しく解説を行いました。



▼今回のポイント

  • カスタム投稿タイプは新しい 【投稿タイプ(投稿の種類)】を作成する仕組み
  • カスタム投稿タイプの作成は 「functions.php」でコードを追加して行う
  • カテゴリーやタグを追加するには 「カスタムタクソノミー」も設定する必要がある



カスタム投稿タイプを使いこなせば、WordPressの管理画面が機能的になり、結果として運用性の高いWEBサイト構築が可能になります。



オリジナルテーマを自作する際には、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WordPressの情報を多く掲載しています。あわせてご活用ください。



WordPressの記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事