WordPressでカスタム投稿タイプを作るなら『Custom Post Type UI』を使ってみよう

  • このエントリーをはてなブックマークに追加

eye0222
WordPressで規模の大きいサイトを作るには投稿画面が複数必要になる場合もあり、内容によっては固定ページなどで管理が難しいため投稿画面を新しく作成したときがあります。
そんな時新しく追加する投稿画面のことを『カスタム投稿タイプ』といいます。

基本的にfunction.phpにコードを追記していけば作成もできるのですが、正直初心者だしfunction触りたくない…という人もいるかと思います。

そんな時活躍してくれるプラグインがCustom Post Type UIです。

functionをいじらなくても管理画面で設定ができるので、カスタム投稿タイプを作ったことがない方におすすめのプラグインです。

Custom Post Type UIをインストールしよう

0222_img01 とりあえず『Custom Post Type UI』をインストールしましょう。

0222_img02 忘れずに『有効化』をします。

0222_img03 するとサイドナビに『CPT UI』の項目が追加されるので、とりあえずこちらの『投稿タイプの追加と編集』をクリックしてください。


Custom Post Type UIでカスタム投稿タイプの設定をしていこう

0222_img04 とりあえず基本は上記の空欄を埋めていけば大丈夫です。

0222_img05 こんな感じです。基本的にはこれで『投稿タイプを追加』をクリックしてもらえれば無事作成がされます。

0222_img06 0222_img06_02 できました。


オプション

基本的にはそのままで大丈夫ですが、一部オプション設定の変更をした方がいい箇所があります。

特にアーカイブの設定です。
WPを触っているとわかると思うのですが、基本的に記事の一覧ページなどはarchive.phpを使用します。

現状のままだとarchive.phpが使えない状態になっています。

0222_img07 そのため画面下のオプション部分を見ると『アーカイブあり』という項目があるため、デフォルトの『False』を『True』に変更をしましょう。
スラッグはデフォルトのままでよければ空白で問題ありません。

その他のオプションもあるのですが、細かくなってしまうのと基本的なものを作るのであればアーカイブの設定をしておけば問題ないかと思います。


Custom Post Type UIでカスタムタクソノミーの設定をしていこう

次にカスタムタクソノミーを作ってみます。

カスタムタクソノミーとは…?と思われるかもしれませんがざっくりいうと投稿に付くカテゴリーのようなものです。
なのでカテゴリーが必要ないようなものでしたら特に作らなくても問題はないです。

0222_img08 今回はとりあえずつくるので、サイドナビから『タクソノミーの追加と編集』を選択します。

0222_img09 次に、投稿タイプと同じように各項目を埋めていきましょう。
『利用する投稿タイプ』を選択して紐づけることができるので、今回は先ほど作った『テスト投稿』を選択しましょう。

0222_img10 『テスト投稿』の欄に先ほどの『テストタクソノミー』が追加されています。

0222_img11 あとはカテゴリーだとかと同じ要領で内容を入れていけば、投稿画面で選択ができるようになります。
ちなみにタクソノミーで作ったカテゴリーのようなものは『ターム』と呼ばれています。


パーマリンクの設定

ここまで来たら、一旦パーマリンクの設定をします。
といっても何かを入力する必要はなくデフォルトのままで大丈夫なのですが、たまにWPがカスタム投稿を認識してくれないので変更を保存ボタンを押す必要があります。
0222_img13 サイドナビから『パーマリンク設定』を選択。

0222_img14 難しいことは一旦おいておいて『変更を保存』ボタンをクリックします。これで表示がうまくいかないときに見られるようになると思います。


テンプレートを用意しよう

後はこれらを表示させるテンプレートを用意します。
投稿の一覧を表示させるにはarchive.php
タクソノミーの記事一覧を表示させるにはtaxonomy.phpを使うのが基本です。

ですがカスタムで投稿を作ったからには通常の投稿とはまた別の見せ方をしたい、という場合が多いです。

0222_img12
その時にはarchive.phpを複製、リネームをしてarchive-{カスタム投稿タイプのスラッグ名}.phpのように名前を付けると、独立したテンプレートを作ることができます(例えば今回はarchive-testslug.phpとなります)。

タクソノミーも同じ要領でいけます。
taxonomy-{タクソノミーのスラッグ名}.phpとしてください(例えば今回はtaxonomy-testtax.phpとなります)。
ちなみにタクソノミーで作成したタームに対して作成したい場合はtaxonomy-{タクソノミーのスラッグ名}-{タームのスラッグ名}.phpとすると表示ができます。

その他はWPの公式にもいろいろ書いているので、こちらを参考にしてください。
WPテンプレート階層

あとはこれらのテンプレートをアップしてもらえれば新規のカスタム投稿タイプを作成して、ある程度表示されるような状態まで持っていくことができます。

テンプレートも細かい部分を表示させるためのコードを入れる必要はあるのですが、長くなってしまうので一旦はここまでで…。


執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。