今回はWordPressオリジナルテーマの作り方【第10回】カスタム投稿編となります。
前回までに以下の事をやってきました。
今回のWordPressオリジナルテーマの作り方はカスタム投稿編です。
案件によってはない事もありますが、逆に当たり前のようにある事も多いのでぜひ覚えておいた方がいいと思います。
効率よくWordPress制作したい人はこちら
WordPressオリジナルテーマの作り方：カスタム投稿とは？
通常WordPressにある投稿は以下のように1つだけです。
そしてこの【投稿】とは別に投稿機能を追加する事が出来ます。
これがカスタム投稿です。
「別にカテゴリーで分ければいいじゃん」と思うかも知れませんが、例えば・・・
- ブログ
- お客様の声
- ニュース
この3つがあった場合、カテゴリーではなくページごとに分けたいという事もあると思います。
なので上記の場合は「通常の投稿1つとカスタム投稿2つ」といった感じになります（過去に案件で通常の投稿1つとカスタム投稿4つやった事あります）
そしてカスタム投稿2つを追加した状態がこちらです。
こうする事で用途別に投稿を分ける事が出来るので分かりやすいですね（ピンのアイコンが投稿です）
もちろんページごとにデザインを変えることも出来ます。
カスタム投稿の作り方
カスタム投稿を作る方法はいろいろありますが、今回はCustom Post Type UIというプラグインを使います。
まずはプラグインをインストールして有効化しましょう。
右上のキーワード入力欄に「Custom Post Type UI」と入力するとプラグインが表示されます。
今すぐインストールをクリックすると有効化と表示が変わるので、そのまま有効化をクリックすれば完了です。
投稿タイプの追加
次は左のメニューに追加された CPT UI という項目から投稿タイプの追加と編集を選択します。
先ほど「ニュース」と「お客様の声」2つのカスタム投稿を追加した画像を載せましたが、今回はニュースというカスタム投稿を作って解説していきます。
この「投稿タイプスラッグ」「複数形のラベル」「単数形のラベル」の3ヵ所は必須入力となっています。
まず投稿タイプスラッグですが、ここはスラッグ名でURLやファイル名に使われるので英語にしておきましょう。
あとのラベルですが、これは左のメニューに表示されるので分かりやすい名前にしておきましょう（英語でも日本語でもどちらでも）
次に投稿タイプの記事一覧ページを作るかどうかの設定をします。
デフォルトでは記事一覧ページは作らない設定になっていますが、通常カスタム投稿ごとに記事一覧ページがあるかと思うので、下の方にスクロールしていくとあるアーカイブありという項目を「偽」から「真」に変更します。
最後に一番下にある投稿タイプの追加をクリックして保存します。
カスタム投稿のテンプレートを作成
カスタム投稿のテンプレートですが、これはプラグインをインストールしただけでは作られないので、カスタム投稿の記事一覧ページと個別記事ページの2種類を作っていきます。
まずは記事一覧ページから作ります（順番はどちらも構いません）
カスタム投稿の記事一覧ページ
カスタム投稿の記事一覧ページ用のテンプレートは次のようになります。
archive-【カスタム投稿タイプのスラッグ名】.php
今回追加するカスタム投稿のスラッグ名は news なので、
archive-news.php
となります。
先ほど投稿タイプスラッグは英語にしましょうと書きましたが、ここが日本語だとおかしいですよね？
カスタム投稿の個別記事ページ
個別記事ページの場合は single.php をベースにします。
あとは先ほどと同じように以下のファイルを作ります。
single-news.php
以上でカスタム投稿のテンプレートは完成しました。
前回までの分と合わせて、テーマフォルダはこうなっています。
タクソノミーの追加
タクソノミーとは何かというと、通常の投稿にあるカテゴリーやタグに相当するものです。
通常の投稿では編集画面右側に以下のようにカテゴリーやタグの項目があります（Uncategorizedは最初からあるデフォルトのカテゴリーです）
しかし、カスタム投稿の画面にはこれがありません。
これからここにカテゴリー、のような物であるタクソノミーを作っていきます。
まずは CPT UI のタクソノミーの追加と編集を選択します。
すると次のような画面になるので、カスタム投稿と同じようにスラッグには英語で、ラベルには分かりやすい名前を設定します。
また「利用する投稿タイプ」でカスタム投稿の「ニュース」にチェックを入れます。
こうする事でカスタム投稿のニュースにだけ、地域というタクソノミーが表示される事になります。
この利用する投稿タイプは複数選択することも出来ます。
あとはこれをカテゴリーのようにチェックボックスを表示させるために、下の方にスクロールしていくとある階層という項目を「偽」から「真」に変更します。
そしてこれらを追加する前は以下の状態ですが、
追加すると以下のようになります。
地域というタクソノミーが出来ました。
これはカテゴリーの大枠の名前のような物で、この中にカテゴリーを追加していく感じになります。
地域をクリックするとこのような画面になります。
まだ何も追加していないので、右側には「カテゴリーが見つかりませんでした」と書いてあります。
ここで例えば「東京」というカテゴリーを追加します。
スラッグは英数字になります。
そして下にある「新規 地域を追加」をクリックすると右側に追加されます。
あと2つくらい追加してから投稿画面を見てみましょう。
ちゃんと「地域」というタクソノミーの中に東京などのカテゴリーが表示されたのが確認出来ます。
同じようにタクソノミーは増やしていく事が出来ます。
タクソノミーのテンプレートを作成
最後にタクソノミーのテンプレートを作成します。
これは通常投稿のカテゴリー一覧のような物なので、基本的にはcategory.phpをベースにしたものになるかと思います。
これも作り方はカスタム投稿のテンプレートと同じような感じです。
taxonomy-【タクソノミースラッグ名】.php
今回追加したタクソノミーのスラッグ名は area なので、
taxonomy-area.php
となります。
これも archive-news.php などと同じ場所にファイルを置きます。
こうしてカスタム投稿ページやタクソノミーは増やしていくことが出来ます。
ループの書き方
カスタム投稿の記事一覧ページやタクソノミー一覧ページでのループの書き方ですが、基本的な書き方はWordPressオリジナルテーマの作り方⑥（記事一覧ページ編）と同じですが、1つ違うのはカテゴリーの出力方法です。
通常の投稿でのカテゴリーはこちら。
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
カスタム投稿でのカテゴリーはこちら。
<?php
$terms = get_the_terms($post->ID, 'タクソノミースラッグ');
if ( $terms ) {
echo $terms[0]->name;
}
?>ちなみに今回追加したタクソノミーの地域のスラッグは「area」なので、このようになります。
<?php
$terms = get_the_terms($post->ID, 'area');
if ( $terms ) {
echo $terms[0]->name;
}
?>以上になります。
まとめとおまけ
今回の内容ですが、以下のような設定も可能です。
- PCでの表示数設定
- スマホでの表示数設定
- ターム（カテゴリー）を全部表示
- 指定したターム（カテゴリー）だけ表示
- 指定したターム（カテゴリー）だけ除外
- ページネーション番号あり（前後はテキストか画像）
- ページネーション前後のみ（テキストか画像）
また、ターム（カテゴリー）を以下のようにタブメニューで作成することも出来ます（カテゴリーページと同じ）
すべてはカスタム投稿の記事一覧ページなので archive-◯◯.php
すべて以外はターム（カテゴリー）ページなので taxonomy-◯◯.php
となります。
これらの設定方法は以下のコーディング&WordPressメモまとめ集にコピペ出来るように掲載しています。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
（平均スコア）
