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を触るのが好きです。よろしくお願いします。

関連記事

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

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

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

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

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