WordPress

【WordPressワードプレス】Custom Post Type UIでカスタム投稿タイプを追加する方法

 

こんにちは、イケゾーです。

プラグイン「Custom Post Type UI」の使い方を紹介します。

WEBサイトの運営にあたって、新たな「投稿」タイプを追加したいというニーズが出てきます。よくあるのは「ニュース」ですかね、管理の面から「投稿」とは別にしたいという声があります。

今回はその方法を詳しく、カスタム投稿タイプとは何か?から実際に導入する手順を解説します。

 

この記事はこんな人におすすめ!

  • WordPressのカスタム投稿タイプってなに?
  • 投稿の他に独自の投稿タイプを作りたい
  • 「Custom Post Type UI」の使い方を知りたい

 

【WordPressワードプレス】Custom Post Type UIでカスタム投稿タイプを追加する方法

この記事では、実際の画面を掲載して解説していきます。

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

「カスタム投稿タイプ」とは

WordPressでは、デフォルトで「投稿」「固定ページ」の2つの投稿タイプが用意されています。

WordPressでは、「投稿」「固定ページ」と異なる特徴を持った独自の投稿タイプを「カスタム投稿タイプ」として新たに定義できます。カスタム投稿タイプは、管理画面上でも「投稿」とは別に表示されるので管理しやすいメリットがあります。

 

またカスタム投稿タイプは、デフォルトで用意されているカテゴリーやタグのような新たな分類方法も定義できます。これをカスタム分類(カスタムタクソノミー)と呼びます。カスタム分類は特定の投稿タイプに紐付けて利用します。

カスタム投稿タイプは「投稿」とは別に管理できるのが嬉しいね
イケゾー

 

「Custom Post Type UI」でカスタム投稿タイプを追加する方法

では、早速やっていきましょう。

 

この記事を読んでできること

  • カスタム投稿タイプとカスタム分類を登録して、カスタムテンプレートを設定します。

 

 

プラグイン「Custom Post Type UI」を有効化する

管理画面から「Custom Post Type UI」をインストールし、有効化してください。

 

無事に有効化できれば、管理画面の「CPT UI」が表示されます。

プラグインの有効化ができたら「CPT UI」が表示されるよ
イケゾー

 

手順が不安な方はこちらの記事をご確認ください。

初めての「プラグインのインストール」
【WordPress(ワードプレス)】プラグインのインストール方法|初心者向けに丁寧解説

続きを見る

 

 

カスタム投稿タイプを登録する

「CPT UI」の「投稿タイプの追加と編集」をクリックします。

 

カスタム投稿タイプの設定を下記のように入力します。

 

カスタム投稿タイプのアーカイブページ(一覧ページ)を作るか設定します。デフォルトでは、作成しない(False)になっていますが、今回は作成する(True)に変更します。

この設定により、URL(https://..... /news)で「news」投稿一覧ページが表示されます。

 

ここでは、管理画面で表示したい項目を選択し「投稿タイプを追加」をクリックします。

 

カスタム投稿タイプ「ニュース」が管理画面に表示されたらOKです。

カスタム投稿タイプの登録が完了して、投稿できるようになったよ
イケゾー

 

カスタム分類(カスタムタクソノミー)を登録する

今回は、カスタム投稿タイプ「ニュース」のカスタム分類に「area」というタクソノミーを追加します。ニュースの投稿に、東京・名古屋・大阪などの地域の分類をしていくイメージです。

 

「CPT UI」の「タクソノミーの追加と編集」をクリックします。

 

カスタム分類の設定を下記のように入力します。

 

階層について簡単な説明をしておきます。

  • 真 True・・・ カテゴリーのような使い方ができ、親子の階層を設定可能。
  • 偽 False・・・タグのような使い方ができ、親子階層は設定不可。

ユーザ目線で考えると、全てのタクソノミーが表示されるカテゴリーの方が使いやすいので、特別な理由がない限り「真(True)」で良いと思います。

 

「タクソノミーの追加」をクリックすると、このように「ニュース」の下に「地域」というカスタム分類が表示されました。

 

カスタム分類は、カスタム投稿タイプ専用のカテゴリーのことだね
イケゾー

 

カスタム投稿タイプで新規投稿する

作成したカスタム投稿タイプ「news」に、新規投稿をしてみます。使い勝手は通常の「投稿」と全く同じです。

記事をいくつか作成したら、テンプレートを作っていこう
イケゾー

 

カスタム投稿タイプのテンプレートの作成

カスタム投稿タイプのテンプレートを作成します。

 

個別ページ

カスタム投稿タイプ「news」の記事個別ページのテンプレートを作成していきましょう。

 

テンプレート名は、「single-{カスタム投稿タイプのスラッグ名}.php」です。
今回は、「single-news.php」になります。「single.php」をベースに作成すると良いでしょう。

URLは、「https://.....ドメイン名 /{カスタム投稿タイプのスラッグ名}/ {記事のスラッグ}」です。

 

一覧ページ

カスタム投稿タイプ「news」の記事一覧ページのテンプレートを作成していきましょう。

 

テンプレート名は、「archive-{カスタム投稿タイプのスラッグ名}.php」です。
今回は、「archive-news.php」になります。「archive.php」をベースに作成すると良いでしょう。

URLは、「https://.....ドメイン名 / {カスタム投稿タイプのスラッグ名}」です。

 

カスタム分類(タクソノミー)のテンプレートの作成

タクソノミーの一覧ページのテンプレートを作成します。

 

一覧ページ

カスタム分類「area」の記事一覧ページのテンプレートを作成していきましょう。

 

テンプレート名は、「taxonomy-{タクソノミー名}.php」です。
今回は、「taxonomy-area.php」になります。「taxonomy.php」をベースに作成すると良いでしょう。

URLは、「https://.....ドメイン名 /タクソノミー名/ターム名」です。
今回は、「https://.....ドメイン名 /area/nagoya」になります。

 

設定ができたら、確認してみます。タクソノミーの画面で表示をクリックします。

 

適用されたテンプレートが、ちゃんと「taxonomy-area.php」と表示されていますね。

テンプレートを表示する方法
【WordPressワードプレス】初心者必見!閲覧中のテンプレートを表示する方法|Show Current Template

続きを見る

 

これでテンプレート作成まで終了しました
イケゾー

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

まとめ

以上で、カスタム投稿タイプの登録からテンプレートの作成まで完了しました。案件でもニーズの多い機能なので、マスターしておきましょう。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-WordPress