【WordPressカスタマイズ】サイトにカスタム投稿タイプを設置する方法

2021年8月9日

皆さんこんにちは！
今日はカスタム投稿タイプの追加方法を解説します。

WordPressは投稿、固定ページのに種類の投稿タイプで記事を追加することができます。
しかし、場合によっては商品情報や店舗情報などをお知らせやブログと分けて管理したいという場合があるかと思います。

そんな時に活躍するのが「カスタム投稿タイプ」です。
デフォルトでは２種類しかない投稿タイプを増やすことができます。
以下の画像では「エンジニアの名言」というカスタム投稿タイプを追加しています。

カスタム投稿タイプを設置するメリット

上記でも少し触れましたが、Wordpressの投稿タイプはデフォルトで２種類用意されています。
「投稿」と「固定ページ」です。
投稿には更新する内容の「お知らせ」「商品情報」などを
固定ページには更新しない内容の「会社概要」「お問い合わせ」などをコンテンツにするものです。

「お知らせ」と「商品情報」の記事をまとめて「投稿」で管理することも可能ですがサイト管理が難しくなってしまいます。
そんな際に登場するのが、「カスタム投稿タイプ」です。
投稿タイプを追加する事によって種類のタイプが異なる投稿を分けて管理する事ができさらに異なるテンプレートを使用しサイトのレイアウトやデザインを分ける事ができます。

カスタム投稿タイプを使用する際の例）
自社のコーポレートサイトにおいて会社のお知らせを「投稿」で作成、管理している。
この度、自社の商品を販売するページを追加しようと思っている。

上記の場合にカスタム投稿タイプで販売する商品のアイテム情報を作成管理する事でスムーズに商品販売ページを作成する事ができます。

カスタム投稿タイプの実装方法

では早速、子テーマのfunctions.phpにコード記述します。

add_action('init',function() {
    register_post_type('quotations', [
        'label' => 'エンジニア名言',
        'public' => true
    ]);
});

上記の記述によってエンジニアの名言という投稿タイプが追加されました。

add_action('init',function() {
});

register_post_type()関数はカスタム投稿タイプを追加する為にWordpressで予め定義されている関数です。
アクションフック「init」を利用し記述しなければなりません。
そこで使用するのが「add_action」です。

アクションフックとは・・・
WordPressには様々なファイルがあり順番に読み込まれます。
その一連の流れの中にコードを読み込ませ機能を追加するものです。

register_post_type('quotations', [
        'label' => 'エンジニア名言',
        'public' => true
    ]);

「quotations」の部分はこの関数に必須の引数で、投稿タイプ名を２０字以内で任意の文字列にします。
今回は「名言」を表す単語の「quotations」を記述しています。

「label」には管理画面で表示される文字列を記述します。
（labelを設定しなかった場合、「投稿」という文字が表示されデフォルトの投稿と見分けがつかなくなってしまいます。）

「public」をtureにすることで管理画面上に表示されます。
この値がfalseの場合管理画面上に表示されません。

その他にも様々な機能を追加することができます。次に機能の追加をしたいと思います。

カスタム投稿タイプの機能の追加

register_post_type('quotations', [
        'label' => 'エンジニア名言',  //管理画面で表示されるラベル
        'public' => true  //管理画面に表示させる
        //ここに機能追加のコードを追記します。
    ]);

register_post_typeには様々なパラメータが用意されています。
主要になってくるものを追記していきます。

add_action('init',function() {
    register_post_type('quotations', [
        'label' => 'エンジニア名言',
        'public' => true,
        'menu_position' => 5, //追記(管理画面での表示位置)
        'menu_icon' => 'dashicons-admin-site-alt2', //追記(管理画面での文字の左に表示されるアイコン指定)
　　　　　'show_in_rest' => true,
        'supports' => ['thumbnail', 'title', 'editor']//追記（投稿ページでの機能を追加）
    ]);
});

追記したコードの説明をします。

'menu_position' => 5,

この記述をすることで管理画面での表示の順番を調整することができます。
ちなみに今回は「５」と設定することでデフォルトの「投稿」の下に配置しています。

今回は「５」を指定していますが、以下の表を参考に設定しましょう。

menu-positionに設定する数字	管理画面での表示位置
5	投稿の下
10	メディアの下
15	固定ページの下
20	コメントの下
25	最初の区切りの下（コメントの下にある区切り）
60	プラグインの下
70	ユーザーの下
75	ツールの下
80	設定の下

参照：WordPressCodex日本語版

'menu_icon' => 'dashicons-admin-site-alt2',

この記述をすることで管理画面でラベルの左隣に表示されるアイコンを設定することができます。
アイコンで使用する画像はPNG画像を使用できますが、Wordpressで用意しているダッシュアイコンがありますのでそちらを使うと良いでしょう。
WordPressDashiconsにアクセス→使用するアイコンを選ぶ→コードをコピー→menu-icon=>’○○○○○○’にペースト

'show_in_rest' => true,

この記述をする事で投稿画面のエディターをビジュアルエディターからブロックエディターに変更する事ができます。
変更前と変更後の画像↓

ブロックエディターは感覚的に記事を投稿する事ができますのでWordpressを始めたばかりの人におすすめです。

'supports' => ['thumbnail', 'title', 'editor']

「supports」を設定する事で投稿画面の機能を追加する事ができます。
「supports」を設定した場合は、「title」「editor」必ずセットしましょう。（記事を投稿できなくなります。。）
「thumbnail」は投稿にアイキャッチ画像を設定する機能を追加する記述です。

その他にも
「author」作成者の機能
「excerpt」抜粋の機能
「trackpacks」トラックバック送信の機能
「custom-fields」カスタムフィールドの機能
「revisions」リビジョンを保存する機能
「page-attributes」メニューの順序の機能
「post-formats」投稿フォーマットの追加

をカンマ区切りで設定する事によって自分の使用用途に合わせてカスタマイズする事ができます。

その他にも様々なカスタマイズができるパラメータが用意されていますので、気になる方はWordpressCodexをご覧ください。
WordPressCodex日本語版