WordPressのカスタム投稿タイプとカスタムフィールドを実際に追加してみた！

WordPress

新しいWebサイト構築に向けて、現在WordPressを勉強しています。
昨日は「カスタム投稿タイプ」を使う事で、自分好みのメインコンテンツを記事とは別に作れる話を書きました。

で、実際にレンタルサーバーにアップしているWordPressに「カスタム投稿タイプ」を適用してみましたので、その適用方法と実際の適用後の見栄え等をお伝えしたいと思います。
また「カスタムフィールド」と呼ばれるオリジナルの投稿項目についても設定してみましたので、そちらも併せて記載します。

カスタム投稿タイプの適用

カスタム投稿タイプをWordPressに導入するには自分で「function.php」を書き換える事でも実現できますが、PHPソースの改変があり間違うとWordPressが動かなくなったりと弊害が大きいので、今回はプラグインを使ってカスタム投稿タイプを実現します。
カスタム投稿タイプを実現するプラグインでは「Custom Post Type UI」が一番有名で実績がありますので、こちらを使います。

実際の適用時の図も載せながらカスタム投稿タイプを適用していきます。

プラグイン「Custom Post Type UI」をインストールする。

「Custom Post Type UI」のインストール完了。

「Custom Post Type UI」を有効化しました。

するとWordPressの左側のメニューに「CPT UI」という項目が追加されます。

「CPT UI」の中から「Add/Edit Post Types」を選びます。

すると「カスタム投稿タイプ」の追加画面が出てきます。

右側が設定項目です。

結構な設定項目数があります。この辺は「Settings」等。

まだ設定項目が続きます(^^;　基本はデフォルトのままでも良い様です。

で、実際に「カスタム投稿タイプ」を設定していきましょう！
今回は「取扱商品」を想定して作ってみましょう。それぞれ入力していきます。

右側の「すべての項目」に名前を付けないと、左のメニューで後から出てきた時に「All取扱商品」という名前になってしまうので、それらしい日本語を付けておきます。

「Exclude From Search」をTrueに変更すると、WordPressの検索でヒットする様になるそうです。
ブログ記事だけではなくて取扱商品も検索にヒットして欲しいので「True」に変更します（デフォルトはFalse）。

こうしたカスタム投稿タイプを設定して登録すると・・・

左のメニューに追加されました！！！

ブログ記事を投稿するだけではなくて、「取扱商品」データを投稿できる様になりました(^-^)w
ここまでで「カスタム投稿タイプ」をWordPressに適用した事になります。

商品の投稿テスト

では実際に追加したカスタム投稿タイプを使ってみましょう。

カスタム投稿タイプである「取扱商品」を新規追加してみます！
するとこんな良く見慣れた画面が出てきます。

物は試しで、今回読んで勉強しているWordPressの本を紹介してみましょう！

WordPress　仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

一通り入力して「公開」すると・・・

投稿できました！！！
普段の記事テンプレートが適用されるみたいですね、そのままの設定だと。

投稿した一覧にもきちんと表示されました(^^)w

普段の記事の投稿とは分かれて管理画面上は見えますが、実際のDB上では同じテーブルにデータは保管されるそうです。
カラムの１つが記事は「post」、固定ページは「page」、カスタム投稿タイプは決めた「Post Type Slug」で保存されます。
今回なら「item」という名前でデータが登録されるそうです。

カスタムフィールド

ここまででカスタム投稿タイプは登録して公開まで出来ましたが、このままだと普通の記事と登録出来る内容が変わりません。
せっかく個別のカスタム投稿タイプを登録するんですから独自の登録項目も追加したいというもの。
WordPressではこれを「カスタムフィールド」と呼び、プラグインを使う事で簡単に追加する事が出来ます。
プラグインは「Advanced Custom Field」という物を利用します。

プラグイン「Advanced Custom Field」を追加して有効化します。

するとWordPressのメニューに「カスタムフィールド」という項目が追加されます。

フィールドグループを新規追加してみます。

「位置」→「ルール」を「投稿タイプ　等しい　item」に変更します。
itemとは「カスタム投稿タイプ」で選んだ「Post Type Slug」になります。
これを「post」にすれば通常のブログ記事にもカスタム投稿タイプが適用されます。

そして実際に個別に設定したい項目を1つずつ設定していきます。画面は「商品名」です。

フィールドグループを作り終わりました！「商品名、画像、価格、メーカー」を個別項目として設定しました。

そして先ほどの「取扱商品」の編集にいくと・・・

先程追加したカスタムフィールドが出てきました！
それぞれ入力してみます。
そして更新！

で、実際に投稿されたカスタム投稿タイプを見に行くと・・・

あれ？
本文だけが残っていて、カスタムフィールドはどこにも出てきません(^o^;

どうも専用のカスタムフィールド表示用のテンプレートも作ってあげないと表示出来ない様です(-_-;
「そうは問屋が卸さない！」という所で本日はタイムアップ！

連休明けにまた頑張ります(^-^)/

まとめ

• カスタム投稿タイプを設定するには「function.php」を自分で書き換える方法と、プラグイン「Custom Post Type UI」を使う方法とがある
• プラグインを使うとカスタム投稿タイプは簡単に追加できる！
• プラグイン「Advanced Custom Field」を使うとカスタムフィールドも簡単に追加できる！
• カスタムフィールドはテンプレートも独自の物を準備しないと表示されない(>_<)