不動産情報サイトなど、多大な情報をお客様側で管理・入力しやすいように管理画面をカスタマイズする案件が多いので、その際に役立ったプラグインとカスタマイズ方法を忘れないようにまとめました。
いえ、人に聞かれると説明しづらいのでまとめました。
カスタム投稿タイプとは
そもそもカスタム投稿タイプとはなんぞやという話ですが、通常の投稿記事とは別に、独自に設定できる投稿分類のことですね。(ざっくり)
カスタム投稿タイプを利用すれば、ブログ記事とは別に新たに制作実績リストなんかも作れちゃうわけです。
すこぶる便利ですね。WordPressってすごいですね。
必要なプラグイン
Custom Post Type UI・・・カスタム投稿タイプを設定できるプラグイン
Custom Post Type Permalinks・・・カスタム投稿タイプのパーマリンクを設定できるプラグイン
Advanced Custom Fields・・・カスタムフィールドを自由に設定できるプラグイン
私が利用しているのはこのあたりです。
以前はパニックになりながら、functions.phpに直接書き込んでたんですが、プラグインって便利ですね!
こんなに簡単だなんて、昔の私をどついてやりたい・・・!
カスタム投稿タイプを設定してみよう(ざっくり)
(1)「Custom Post Type UI」を使って、カスタム投稿タイプを作成!
まずは脳内でも紙でもいいので、完成図をイメージしましょう。
例えば、ケーキ屋さんのサイトで、商品のラインナップを載せたい場合。
大分類=ケーキ
小分類=ホールケーキ、ロールケーキ、ショートケーキ
ざっくりこんな感じでしょうか。
この場合、カスタム投稿タイプ(post_type)=ケーキ(cake)、タクソノミー(taxonomy)=ホールケーキ、ロールケーキ、ショートケーキなどのケーキの種類になります。
そこで、「Custom Post Type UI」で、カスタム投稿タイプとタクソノミーを作成し、
ケーキというカスタム投稿タイプに、ホールケーキなどの各タクソノミーを紐づけます。
詳しい設定方法はこちらで書かれています!こんなにわかりやすく説明できないので割愛!
Custom Post Type UIの使い方[WordPress]
管理画面のメニューに「ケーキ」が表示されれば、カスタム投稿タイプの作成はOK!
(2)「Advanced Custom Fields」を使って、管理画面をカスタマイズ!
大枠はできたので、次はカスタム投稿タイプの中身の設定です。
商品のラインナップに載せたい項目を、「ケーキの名前」「値段」「ケーキの写真」「説明文」ということにしましょう。
この項目を自由に設定できるのが「Advanced Custom Fields」なのです。
通常のテキストはもちろん、ラジオボタン、画像、エディタなんかも使えます。
条件判定もできるので、「Aの項目にはいと選択した場合にのみ、Bという項目が出現する」なんてこともできます。
便利です!素晴らしいです!
詳しい設定方法はこちらです。コトリブログさん、本当にリスペクトです!!
Advanced Custom Fieldsの使い方
(3)管理画面で設定した項目を出力してみよう!
管理画面上での設定はこれでバッチリなので、今度はサイト上に表示させましょう。
表示のさせ方は色々あるのですが、カスタム投稿タイプ(post_type)=ケーキ(cake)で設定しているので、
archive-cake.php
single-cake.php
を作成しちゃうのがわかりやすいかと。
archive-cake.php・・・商品の一覧ページ
single-cake.php・・・各商品の詳細ページ
になります。
どちらもループさせて、先ほど設定した項目を引っ張ってくればOKです!完成です!
ループの記述方法や、項目を出力する際の具体的なコードはこちらです。
コトリブログさん見れば完結することがおわかりでしょう!
カスタム投稿タイプとカスタムタクソノミーまとめ
Advanced Custom Fieldsの出力
また、通常の投稿みたいに、カスタム投稿タイプのパーマリンクを設定することもできるので、「Custom Post Type Permalinks」も使えますね。
なんともざっくりなまとめで申し訳。。。
そして、例でケーキ屋を設定をしたのに、実際それを使って作りこんだわけでもないのでキャプチャ画像もなく、大した説明にならなかったことを反省しております(;´Д`)
細かいところとか、カスタマイズをしていて、手こずったところは、またおいおい記事にできればいいなと思ってます。。。
最初はカスタム投稿タイプの意味を理解するのに、頭爆発しそうになりましたが、
一度理解するとカスタム自体は簡単です!プラグインを使うと非プログラマーでもわかりやすいですね。