MENU
2018.02.24

WordPressプラグインCustom Post Type UIの使い方とテーマのカスタマイズ方法

今回はWP使い始めてある程度覚えたらぶつかる「カスタム投稿タイプ」と「カスタムタクソノミー」についての説明と、便利なプラグイン「Custom Post Type UI(CPT UI)」、テーマのカスタマイズ方法まで一通り説明していきたいと思います。

タイトルがなぜこんなに長いかというと、カスタム投稿タイプ関連とCustom Post Type UIの使い方、テーマのカスタマイズは作業的に連続しており、できれば1記事でやることが一通り見れればと思ったためです。

タイトルに負けず劣らず、本文も長くなるかと思いますがお付き合いください。

 

カスタム投稿タイプとカスタムタクソノミーとは

投稿や固定ページなど、WPにデフォルトで付いている記事やページ更新の機能以外に新しく独自の投稿を追加できる機能です。

例えば「ニュース」というカスタム投稿タイプを追加した場合、サイドバーにニュースが追加され、投稿とは別のものとして記事を追加することができます。

上記例の場合は「ニュースカテゴリー」がカスタムタクソノミーとなります。

ざっくり言うと「カスタム投稿タイプは独自投稿フォーマット」「カスタムタクソノミーは独自投稿フォーマットのカテゴリー」となります。
※他にも色々使い道はあるのですが、一番メジャーな使い方はこちらだと思います。

 

カスタム投稿タイプを使う理由

この記事を見ている方の場合、目的があってカスタム投稿タイプを使うつもりだとは思いますが、一応理由について触れておきますと、WPを使ったウェブサイトを作る際に必要となるからです。

ブログやお知らせなどの基本的な更新機能だけの場合はWPのデフォルトの機能で問題ありませんが、例えばそこにコラムや製品紹介、FAQなどを追加したい場合に投稿とは別フォーマットが必要となるためです。

 

カスタム投稿タイプの追加方法(Custom Post Type UI)

カスタム投稿タイプの追加方法ですが、基本的にはテーマファイル内のfunction.phpに記述を追加することになります。

しかしそこはWP。追加に便利なプラグインが存在します。
それがCustom Post Type UIです。

おなじみですが、[プラグイン]→[新規追加]から「Custom Post Type UI」を検索してください。

インストールが終わったら有効化してください。

 

Custom Post Type UIを使ってカスタム投稿タイプとカスタムタクソノミーの作成

Custom Post Type UIの機能を使って追加していきます。

流れとしては「カスタム投稿タイプの追加」→「カスタムタクソノミーの追加」→「カスタム投稿タイプの編集」という流れでやります。

 

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

まずカスタム投稿タイプの基本設定を行います。
「投稿タイプの追加と編集」から追加画面に移動します。
今回は「ニュース」というカスタム投稿タイプを作成しますので以下のようにします。

・投稿タイプスラッグ:news
・複数形のラベル:ニュース
・単数形のラベル:ニュース

上記のように設定します。ここで気をつけるのはスラッグの部分で、こちらはあまり長い名前にするとカスタムタクソノミーが長くなりがちなので、1単語くらいがよいでしょう。

基本的にあまり設定をする項目はないのですが「アーカイブあり」の設定は「True」に設定しておいてください。
Trueにすることで、記事投稿画面で通常のカテゴリーのようにタクソノミーを選択することができるようになります。

 

カスタムタクソノミーの追加

次にカスタムタクソノミーを追加します。「タクソノミーの追加と編集」に移動します。

カスタムタクソノミーはニュースのカテゴリーとして運用しますので「ニュースカテゴリー」という名称で作成します。

タクソノミースラッグ:news_category
複数形のラベル:ニュースカテゴリー
単数形のラベル:ニュースカテゴリー
利用する投稿タイプ:「ニュース」(作成したカスタム投稿タイプ)にチェック

次に設定ですが、こちらは「階層」部分を「True」にしておいてください。
こちらもカテゴリーのように扱うために必要な設定となります。

 

カスタム投稿タイプを編集

カスタムタクソノミーを登録後、カスタム投稿タイプの編集に戻り、作成したタクソノミー「ニュースカテゴリー」にチェックを入れます。

上記設定が全て終わると、サイドバーのカスタム投稿タイプが利用可能な状態になります。

 

カスタム投稿タイプ用のテーマカスタマイズ

カスタム投稿タイプを作って運用する場合は、デザインやレイアウトのカスタマイズを行うと思います。テーマファイルにカスタム投稿用のファイルを用意することで独自のデザインやレイアウトを実装することができます。

ここでは該当するファイル名とともにご説明します。
今回追加したカスタム投稿タイプの「ニュース」で作成します。ニュースのスラッグ「news」ですので、newsの部分はご自身の作成したスラッグに書き換えて作成してください。

該当テーマファイル名

single-news.php

カスタム投稿タイプ用 記事詳細ページとなります。
※URL /news/newstest(パーマリンク)

 

archive-news.php

カスタム投稿タイプのルートディレクトリのページになります。
アーカイブや一覧という使い方が多いと思います。
※URL /news/

 

taxonomy-news_category.php

カテゴリーのアーカイブページです。
カテゴリーの一覧などに使います。
※URL /news_category/event/(カスタムタクソノミースラッグなど)

 

ループ内でカスタム投稿タイプやカスタムタクソノミーを指定する方法

カスタム投稿タイプを指定する場合

post_typeを使用します。
ニュース(news)を指定する場合。

$args = array(
‘post_type’ => ‘news’
);

複数の投稿タイプを指定する場合は配列を使用します。

$args = array(
‘post_type’ => array(‘news’,faq’)
);

 

 

タクソノミーを指定する場合

tax_queryを使用します。
ニュースカテゴリー(news_category)のイベント(event)を指定する場合。

$args = array(
‘tax_query’ => array(
array(
‘taxonomy’ => ‘news_category’,
‘field’ => ‘slug’,
‘terms’ => ‘event’
)
)
);

 

カスタム投稿タイプとカスタムタクソノミーを使ったコンテンツについて

ここまででカスタム投稿タイプを使った記事の登録、テーマのカスタマイズはほぼできるようになったと思います。

ウェブサイトを作るために非常に有用な機能のため、WPを使ったウェブサイトのためにはカスタム投稿タイプを是非使えるようになりましょう。

また、カスタム投稿タイプをさらに使いやすいものにするためのプラグインなどもあります。僕がよく使うカスタムフィールドのプラグインなどは、また近いうちにご紹介したいと思います。
(カスタム投稿タイプでも自由に使えるカスタムフィールドを実装できたりします)

スポンサーリンク
pagetop