• HOME > 
  • WordPress > 
  • WPでカスタム投稿タイプを追加してページを分類する方法

WPでカスタム投稿タイプを追加してページを分類する方法

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2024年12月03日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

WordPressのカスタム投稿機能を使ってぺージを分類する方法について学んだので備忘録としてまとめます。

カスタム投稿タイプとは?

WordPressでは、標準で用意された投稿ページや固定ページ以外にも独自のぺージタイプを作成することができます。

それらは「カスタム投稿タイプ」と呼ばれ、投稿ページや固定ページとは切り離したコンテンツを扱うときに役立ちます。

コンテンツの種類ごとにカスタム投稿で分類すればサイトの構造を明確にでき、サイトの回遊性や管理のしやすさの改善が期待できます。

種    類 内    容
投稿ページ お知らせ、ブログなど日付順に並べたいコンテンツ
固定ページ HOME、会社概要、お問い合わせなど日付が関係しないコンテンツ
カスタム投稿ページ 商品紹介、事例紹介、スタッフ紹介など上記以外で分類したいコンテンツ

例えば商品紹介ページは固定ページとして作成しても良いですが、将来的にページ数が増えるのであれば、カスタム投稿として独立させた方が管理がしやすくなります。

また、カスタム投稿の場合はカテゴリー・タグを使ってさらに細分化できるという点もメリットの一つです。

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

カスタム投稿タイプが持つ機能は以下の通りです。

投稿ページ・固定ページそれぞれが持つ機能どちらもが、カスタム投稿タイプであれば使うことができます。

  • 投稿・固定ページと切り離してページを管理できる。
  • カスタム投稿タイプごとにページテンプレートを作成できる。
  • カスタム投稿タイプごとにアーカイブページが利用できる。
  • カスタム投稿タイプごとにカテゴリーやタグのを作成できる(カスタムタクソノミー機能)。
  • カスタム投稿タイプごとにカスタムフィールドを作成できる。

カスタム投稿タイプのメリット

コンテンツの数が多い場合など、投稿・固定ページと切り離して分類しておいた方が管理がしやすくなります。

また、カスタム投稿ごとに専用のページテンプレートが適用されるので、コンテンツの種類ごとのページデザインの切り替えも簡単です。

カテゴリーやタグを設定すれば更に構造を明確にでき、ユーザーが探し求める情報にたどり着きやすくなります。

別途カスタムフィールドを準備すれば、コンテンツの種類ごとに異なる入力フォームをエディターに追加できるので、効率良くコンテンツを作ることが可能です。

カスタム投稿タイプを追加する手順

functions.phpに「register_post_type」関数を追記すればカスタム投稿タイプを有効にできます。

カスタム投稿を専用のレイアウトで表示させたい場合は、ページレイアウトを記述したphpファイルをテーマフォルダに設置します。

  1. カスタム投稿タイプの追加【functions.php】
  2. 専用テンプレートによるページレイアウトの作成【single-***.php】
  3. カスタム投稿ページの作成

funcitons.phpに追記してカスタム投稿を有効化する

まずはじめに新しいカスタム投稿を追加するために、functions.phpに「register_post_type」関数のコードを追記します。

functions.phpをはじめとしたテーマファイルの編集はサイトに予期せぬ不具合をもたらす恐れがあります。必ず事前にバックアップをとり、自己責任で編集してください。

今回は「取扱商品」という括りのカスタム投稿タイプを追加します。スラッグは「items」としました。

functions.php

add_action('init','add_post_type');
function add_post_type(){
    register_post_type('items',[//items は追加する投稿タイプ名
        'labels'=>[
            'name' => '取扱商品一覧',//管理画面内の表示名(複数形)
            'singular_name' => '取扱商品',//管理画面内の表示名(単数形)
        ],
        'public' => true,//公開状態
        'has_archive' => true, //アーカイブ機能の有効化
        'menu_position' => 5, //管理画面内のメニュー順序
        'menu_icon' => 'dashicons-format-aside',//管理画面で使うアイコン
        'show_in_rest' => true, //WP5系エディタ「Gutenberg」の有効化
    ]);//end register_post_type
}//end function add_post_type

3行目「register_post_type」関数の第一引数でカスタム投稿タイプの名前を定義しています(ここでは「items」)。

名前を設定する際はWordPressの予約語を使わないように注意してください。予約語について詳しくはこちらのページにまとめています。

4行目続いて第二引数に連想配列でカスタム投稿タイプの項目を設定していきます。「labels」ではWP管理画面上の表示名を設定します。「name」は複数形、「singular_name」は単数形で設定します。日本語で設定するとわかりにくいですが、複数形「items」と単数形「item」という違いです。singular_nameの方は編集画面のサイドバーなどに表示されます。nameの方は管理画面のメニューや一覧ページの他、実際のサイト上のナビゲーションメニューやアーカイブページのタイトルとして出力されます。

9行目有効(true)にすると、カスタム投稿のページ一覧(アーカイブページ)を出力できるようになります。

11行目「menu_icon」で管理画面のメニューに表示させるアイコンを設定しています。

アイコンはWordPress公式サイトの「Dashicons | Developer.WordPress.org」に記載されている中から選ぶことができます。

Dashicons | Developer.WordPress.org

functions.phpを保存すれば、WordPress管理画面内のメニューにカスタム投稿タイプが追加されます。

管理画面内のメニュー

標準の投稿・固定ページと同様に、「新規ページを追加」からページ作成を行うことができます。

新規ページを追加

専用テンプレートにページレイアウトを作成する

新規追加したカスタム投稿のページは、デフォルトではsingle.phpに記述したレイアウトで出力されます。

このsingle.phpは投稿ページのレイアウトと共通なので、専用のレイアウトを使用したい場合は、テーマフォルダ内に新しく「single-***.php」を作成します。

ファイル名の「***」の部分はregister_post_typeの第一引数に設定したものと一致させます(例:「items」なら「single-items.php」)。

single-***.phpを設置

カスタム投稿でアイキャッチ画像の設定を有効にする

カスタム投稿でサムネイル(アイキャッチ)を設定・取得・表示するには、functions.phpの「register_post_type」内の連想配列に「supports」を追記し、「thumbnail」を有効にする必要があります。

下記のように「supports」の値に配列を使って有効にする項目を設定していきます。今回はアイキャッチを有効化したいので「thumbnail」を加えます。

functions.php

//省略
function add_post_type(){
    register_post_type('items',[
        //省略
        'supports' => [
			'title',//ページタイトル
			'editor',//エディター
			'thumbnail',//アイキャッチ
			'excerpt',//抜粋
			'page-attributes'//ページ属性
        ],
        //省略
    ]);//end register_post_type
}//end function add_post_type

supportsを追記すると、その中に書かれていない項目は編集画面に表示されなくなるので注意してください。

例えば「thumbnail」とだけ書くと、下図のようにページタイトルやエディターが消えます。

書かれていない項目は編集画面に表示されなくなる

アイキャッチを有効にするためにsupportsを使う際は、上記のように他の項目も一緒に記述するようにしてください。

各ページでアイキャッチ画像を取得する方法は、投稿ページ・固定ページと同じです。

PHP

<?php if(has_post_thumbnail()): ?>
    $myThumbnail = get_the_post_thumbnail_url();//アイキャッチのパスを取得
    <img src="<?php echo esc_url($myThumbnail); ?>" alt="ページのアイキャッチ画像">
<?php endif; ?>

カスタム投稿のページにカスタム投稿タイプ名を出力する

WP関数を使うとカスタム投稿タイプの表示名(今回の例では「取扱商品一覧」もしくは「取扱商品」)を取得できます。

パンくずリストなどにカスタム投稿タイプ名を表示させたい場合に役に立ちます。

single-***.php

$myPostType = get_post_type();//カスタム投稿タイプを取得(例:items)
$myPostTypeObj = get_post_type_object($myPostType);
$myPostTypeName =  $myPostTypeObj->labels->name;//投稿タイプの表示名複数形を取得
$myPostTypeSingularName =  $myPostTypeObj->labels->singular_name;//投稿タイプの表示名単数形を取得

3行目register_post_typeの第二引数に設定したlabelsの情報を取得しています。nameの方は複数形の表示名を取得できます。今回の例では「取扱商品一覧」。

4行目同じくsingular_name(単数形)の表示名を取得します。今回の例では「取扱商品」。

作成したカスタム投稿ページが「404」エラーになる時

作成したカスタム投稿ページを実際に開こうとすると(ページエディターの「プレビュー」を含む)、「404」エラーになる場合があります。

この問題はWordPressの「パーマリンク設定」を開いて、何も変更せずに保存を押すと解決します。

「パーマリンク設定」を更新

カスタム投稿一覧(アーカイブ)ページを表示する

funcitons.phpの「register_post_type」内で「has_archive」を「true」に設定してあれば、カスタム投稿一覧(アーカイブ)ページが出力されます。

functions.php

//省略
function add_post_type(){
    register_post_type('items',[
        //省略
        'has_archive' => true, //アーカイブ機能の有効化
        //省略
    ]);//end register_post_type
}//end function add_post_type

パーマリンクは、register_post_typeで設定したカスタム投稿タイプの名前(例では「items」)になるので「https://sample.com/items」というようなURLでページが表示されます。

この時もアーカイブページを開こうとしたときに「404」エラーになる場合は、WordPressの「パーマリンク設定」を更新(何も変更せずに保存を押す)すると解決します。

専用のアーカイブページを作成する

カスタム投稿のアーカイブページはデフォルトではarchive.phpに記述したレイアウトとなります。

このarchive.phpは通常の投稿ページのアーカイブページと共通のものなので、専用のレイアウトを使用したい場合は、テーマフォルダ内に新しく「archive-***.php」を作成します。

ファイル名の「***」の部分はregister_post_typeの第一引数に設定したものと一致させます(例:「items」なら「archive-items.php」)。

archive-***.phpを設置

archive-***.phpを用意したら、元のファイルの中身を参考に、カスタム投稿の一覧を取得し1点づつ表示する処理などを記述していきます。

カスタム投稿と通常のアーカイブページで分岐させる

header.phpなどのテーマファイル中でカスタム投稿のアーカイブと通常のアーカイブで異なる処理を作りたい場合は、「is_post_type_archive('カスタム投稿のスラッグ')」を使います。

「is_post_type_archive('カスタム投稿のスラッグ')」というようにカスタム投稿を指定します。

「is_archive」を使うとアーカイブページかどうかを分岐できますが、アーカイブページとカスタム投稿アーカイブページの区別はされないので注意が必要です。

PHP

if(is_post_type_archive('items')){
    //カスタム投稿アーカイブページの時の処理
}else if(is_archive()){
    //通常のアーカイブページの時の処理
}

専用のカスタムフィールドを使用する

WordPressのカスタムフィールドとは、投稿・固定ページへ独自の入力項目を追加できる機能のことです。

各ページで共通して入力する項目はカスタムフィールドとして用意しておけば、入力作業の効率が上がり、入力忘れの心配も少なくなります。

カスタムフィールドの例

カスタム投稿タイプにカスタムフィールドを設定する方法についてはこちらのページにまとめています。

ページに親子関係を持たせる【階層化】

カスタム投稿も固定ページと同様にページ同士に親子関係を設定し、ページを階層化することができます。

functions.phpにて「hierarchical」を「true」にし、「supports」に「page-attributes」を追記します。

supports有効にすると、そこに記載されていない機能は非表示になります。そのため記述の際は、「page-attributes」だけでなく「title」「editor」「thumbnail」なども一緒に記載する必要があります。

funcitons.php

//省略
function add_post_type(){
    register_post_type('items',[
        'hierarchical' => true,//階層化を有効にする
        //省略
        'supports' => [
			'title',
			'editor',
			'thumbnail',
			'excerpt',
			'page-attributes'//ページ属性
        ],
        //省略
    ]);//end register_post_type
}

エディターで親ページを設定する

固定ページ一覧と同じように、子ページの先頭には横線が付きます。

カスタム投稿一覧での階層表示

この例では「item_b」というページを「item_a」というページの子ページに設定したので、「item_b」ページのURLは「https://***.com/item_a/item_b」になりました。

子ページのURLの例

カスタム投稿ページをカテゴリーやタグで分類する

標準の投稿ページと同様に、カスタム投稿ページもカテゴリーやタグによる分類が可能です。

WordPressのカスタムタクソノミーという機能を使うことで、カスタム投稿専用のカテゴリー・タグを作成できます。

カテゴリーやタグ

カスタムタクソノミーを追加してカスタム投稿タイプにカテゴリーを設定する方法についてはこちらのページにまとめています。

WP管理画面のカスタム投稿一覧の表示カラム(列)を増やす

管理画面のカスタム投稿一覧は初期状態では「タイトル」と「日付」の2つのカラムしか表示されません。

こちらもfuncitons.phpへ追記を行えば、「カテゴリー」や「タグ」といったカラムを表示させることが可能です。

カスタム投稿一覧の表示カラムの例

また、標準の投稿一覧と同じようにカテゴリーによる絞込機能も有効化できます。

WP管理画面のカスタム投稿一覧の表示カラム(列)を増やす方法についてはこちらのページにまとめています。

まとめ

以上が、WordPressのカスタム投稿機能を使ってぺージを分類する方法です。

カスタムタクソノミーと組み合わせればより細かいカテゴライズが可能になります。

広告
広告

関連する記事

サムネイル

WPでカスタム投稿に対してカスタムフィールドを設置する【プラ……

2024年12月06日
WPのカスタム投稿の編集画面にプラグインを使わずにカスタムフィールドを設置する方法について学んだので備忘録として残しておきます。 カスタムフィールドとは? Wo […]
サムネイル

WPのカテゴリー内の項目(ターム)の表示順を変更【プラグイン……

2024年12月03日
WordPressにおいてカテゴリーの項目(ターム)を一覧表示させたときの表示順をプラグインを使わずに変更する方法を学んだので備忘録として残しておきます。 ター […]
サムネイル

WPのカスタム投稿一覧表への列(カラム)の追加と並び替え【プ……

2024年12月03日
最終更新日:2024年12月05日
WPのカスタム投稿タイプを作ってサイトを構築していく中で、管理画面上での一覧ページに任意の列(カラム)を追加したり、表示順を並び替える方法を学んだので備忘録とし […]
サムネイル

WPのカスタム投稿タイプでカテゴリーやタグを設定できるように……

2024年12月03日
WordPressのカスタムタクソノミーを使ってカスタム投稿タイプにカテゴリーを設定する方法について学んだので備忘録としてまとめます。 カスタムタクソノミーとは […]
サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]