WordPressオリジナルテーマの作り方⑩(カスタム投稿編)

今回はWordPressオリジナルテーマの「カスタム投稿」の制作手順を解説します。
これまでに以下の作業を行いました。

「WordPressでコンテンツ用管理画面を作りたいけど作り方を知りたい」こんなお悩みを持つ方も多いかもしれません。
そんな時に役立つのがカスタム投稿という仕組みです。

カスタム投稿はWordpressオリジナルテーマ制作で見かける機会が多いので、今回の記事を通じてカスタム投稿について理解を深めてもらえれば幸いです。

目次

カスタム投稿とは?

WordPressには、以下のように予め用意されている投稿や固定ページとは別に、新しい 「投稿タイプ(投稿の種類)」が作成できる仕組みがあるのです。

投稿タイプが作成できる仕組みは「カスタム投稿タイプ」と呼ばれています。
※インストールしているテーマやプラグインによって表示内容は異なりますが、基本的に投稿が一番最初に表示されています。

大半のWebサイトは企業なら「サービス内容」「制作実績」、店舗なら「商品紹介」「お客様の声」など種類が違うコンテンツの組み合わせで構成されていると思います。
また、これらの情報はWordPress管理画面から編集できるようにすることが理想的です。

今回解説するカスタム投稿はこうした要望でも効果的に使えるだけではなく、カスタム投稿を通してコンテンツの種類が定義できます。

具体的には、コンテンツ用管理画面(一覧や編集画面)が用意できるのです。

カスタム投稿の制作方法

カスタム投稿の制作は、基本的にWordPress管理画面『外観』⇒『テーマファイルエディター(テーマによって表現が異なる)』⇒『テーマのための関数(functions.php)』にコードを記述すれば設定完了です。

カスタム投稿は以下の手順で制作していきます。

  1. functions.phpの編集
  2. WordPress管理画面の確認

上記2つの作業が完了した後で、今回は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管理画面は上記のようになります。

PHPコードの詳しい解説

カスタム投稿の処理全般は、「add_custom_post_type(任意の名前)」と呼ばれる関数を使って作成します。

今回は「init」のアクションフックに追加しています。実際のカスタム投稿登録は、WordPressの独自関数「register_post_type」で行います。

register_post_typeの引数①で「投稿タイプ名」引数②で該当するオプションをそれぞれ指定しています。
この時以下の2つがポイントです。

  • 使用する編集エリア
    「supports」オプションで投稿タイプで使うタイトルと、編集エリア(本文など)の表示切り替えを行なっています。
  • 管理画面上の見た目
    「menu_position」「label」「menu_icon」オプションではメニュー表示名や表示位置、アイコンなどの管理画面上の見た目を調整しています。

基本的には上記コードを貼り付けて、必要に応じてそれぞれのオプションを調整すれば問題ありません

カスタムタクソノミーの設定方法

CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 100

ここでは、カスタム投稿タイプとセットで使える「カスタムタクソノミー」について解説しておきます。

カスタムタクソノミーとは、大まかにいうと「カテゴリー」「タグ」などの記事を分類する情報です。
カスタム投稿で「カテゴリー」「タグ」を使うためには、「カスタムタクソノミー設定」が必要です。

ちなみに、タクソノミー(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管理画面の確認

funcstions.phpの編集が完了したら、WordPress管理画面を確認してみましょう。

更新が無事に進むと、先程追記した制作実績直下に「カテゴリー」「タグ」が表示されます
※テーマによっては正常に表示されない場合があります。その場合はバックアップを取った上でページ更新しましょう。

PHPコードの詳しい解説

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

実際のカスタムタクソノミー登録には、WordPress「register_taxonomy」関数が使われています。
register_taxonomy関数の引数①で「タクソノミーの名前」、引数②で「使う投稿タイプ」、引数③で配列「オプション」をそれぞれ指定しています。

カテゴリーやタグを準備するため「register_taxonomy」処理が分かれることになります。
それぞれのコードが無いと動作しない訳ではありませんし、あくまでもカテゴリーやタグの必要性に応じて使い分ければ問題ありません。

ちなみに、タクソノミーの「カテゴリー」「タグ」どちらを使うかはオプションの「hierarchical」で行います。

プラグインを使った設定方法

ここまでコード編集でカスタム投稿を制作する手順を解説しましたが、コード編集以外にも「Custom Post Type UI」というプラグインを使った設定方法もあります。

プラグインの追加は、Wordpress管理画面『プラグイン』⇒『新規追加』⇒右上のキーワード入力欄に「Custom Post Type UI」を入力⇒『今すぐインストール』⇒『有効化』をクリックすると完了です。

まとめ

今回はWordPressオリジナルテーマのカスタム投稿の制作手順を解説しました。

カスタム投稿は「サービス内容」「お客様の声」など業種によって伝えたいことが追加できる機能
「会社情報が変わったから修正したい」「新しいメニューも随時出るので都度更新したい」などの時にも有効です。

WordPress管理画面から最新情報なども簡単に編集できます。
今回の記事を参考にしてぜひ取り入れてみてくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次