WordPressでカスタム投稿タイプを作るのに超便利なPods Frameworkを徹底解説【初級編】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WordPressで記事以外のデータを保存しようとした場合、カスタム投稿タイプを作成することでそれらのデータを保存することが可能となります。
しかし、カスタム投稿タイプの作成にはphpを利用してプログラムコードを書く必要があり、これはphpを理解していない人には、ハードルの高い作業となります。

しかし、今回紹介するPods Framework(以降Podsと呼びます)を利用すると、プログラムを一切することなく、カスタム投稿タイプを作成することができます。
またPodsのテンプレートを使うことでデータの表示もプログラム無しで表示できるようになります。

今回はPodsを利用したカスタム投稿タイプの作成方法から、データの登録方法、そしてそのデータの表示方法まで解説したいと思います。

スポンサードリンク

今回作成するカスタム投稿タイプと表示画面

今回は、レストランというカスタム投稿タイプを作成し、以下のようなページを作成してみます。

ビストロ マキタ – 41y dev

ページには、店名、紹介、住所、電話番号、店内写真を表示します。

カスタム投稿タイプとは?

WordPressでは、設定した情報やユーザーの情報、投稿した記事などはデータベースに保存されますが、初期の状態では「記事」「ユーザー」「設定」以外のデータを保存することができません。
例えば「商品」データや「顧客」データ、「売上」データといった、Webサービスでよく利用することになるデータは保存することができません。

そのようなデータを保存することができるようになるのが、カスタム投稿タイプです。カスタム投稿タイプを利用することで、「記事」「ユーザー」「設定」以外のデータも保存できるようになります。

Podsのインストール

それではまず初めにPodsのインストールを行いましょう。

図3
「プラグイン」メニューをクリック
「新規追加」をクリック

図4
プラグインの検索と書かれたところに「Pods」と入力しエンター

図5
Podsの「今すぐインストール」をクリック

図6
「プラグインを有効化」をクリック

Podsによるカスタム投稿タイプの作り方

Podsのインストールが完了したら、カスタム投稿タイプを作成してみましょう。
今回は、例として「レストラン」データを保存できるカスタム投稿タイプを作成します。

Podsを有効化すると管理画面のサイドバーに「Pods Admin」という項目が追加されますので「Pods Admin」をクリックします。

図8
「Add New」をクリックします。

次に表示された画面で以下の様に設定します。

2016-08-16_08h33_50
Content Type : Custom Post Type (like Posts or Pages)
Singular Label : restaurant
Plural Label : レストラン

設定後、Next Stepをクリックします。

「Edit Pod: restaurant」という画面が開き、これでrestaurantというカスタム投稿タイプが作成されました。
2016-08-16_08h35_59

登録したレストランを一覧表示できるようにする

restaurantカスタム投稿タイプが作成できたら、登録したレストランの一覧表示ができるように設定をしておきます。

2016-08-16_09h23_45
「Advanced Options」タブをクリックします。
レストランの一覧が表示されるように「Enable Archive Page」にチェックを入れます。
今回の場合はhttp://(ドメイン名)/restaurant/で記事の一覧が表示されるようになります。

レストランにアイキャッチ画像を登録できるようにする

次にレストランデータにアイキャッチ画像を登録できるように設定します。

2016-08-16_10h03_09
Supportsの「Featured Image」にチェック

ここにチェックを入れることでアイキャッチ画像を設定できるようになります。

最後に保存します。

2016-08-16_10h03_42
「Save Pod」をクリック

次にrestaurantカスタム投稿タイプに、どういったデータを保存するかを設定していきます。

保存するデータの項目を設定する

restaurantカスタム投稿タイプに保存するデータは以下の項目となります。

  • 店名 title
  • 説明 content
  • 住所 address
  • 電話番号 telephone
  • 店内写真 interior

店名であるtitleと説明のcontentは、カスタム投稿タイプに最初から作成されているので、残りの3つを追加していきます。

最初に住所を追加します。
2016-08-16_09h32_14
「Manage Fields」タブをクリック
右上の「Add Field」をクリック
上から順に以下の通り設定してください。
・Label : 住所
・Name : address
・Field Type: Plain Paragraph Text
右下の「Add Field」をクリック

次に電話番号を追加します。
2016-08-16_09h39_30
右上の「Add Field」をクリック
上から順に以下の通り設定してください。
・Label : 電話番号
・Name : telephone
・Field Type: Plain Text
右下の「Add Field」をクリック

最後に店内写真を追加します。
2016-08-16_09h44_23
右上の「Add Field」をクリック
上から順に以下の通り設定してください。
・Label : 店内写真
・Name : interior
・Field Type: File / Image / Video
右下の「Add Field」をクリック

ここまでできたらrestaurantカスタム投稿タイプを保存します。
2016-08-16_09h50_20
「Save Pod」をクリック

以上で、restaurantカスタム投稿タイプの設定は完了です。

カスタム投稿タイプにデータを登録する方法

restaurantカスタム投稿タイプの準備ができたので、データを登録してみましょう。

2016-08-16_10h11_09
「レストラン」メニューをクリック
「Add New」をクリック

以下のようなレストランの登録画面が表示されます。
2016-08-16_10h12_30

レストランの情報を入力します。

2016-08-16_10h25_48
入力が完了したら「公開」をクリック

一度、ページを表示してみましょう。
2016-08-16_10h36_00
パーマリンクをクリック

以下のようなページが表示されましたが、まだ住所や電話番号など全ての項目が表示されていません。
2016-08-16_10h39_28

カスタム投稿タイプの表示方法

それでは残りの項目も表示されるようにページを設定しましょう。

カスタム投稿タイプで作成した項目を表示するために、PodsのTemplatesという機能を利用します。
Templatesを使うとカスタム投稿タイプのデータを簡単に表示することができます。

Templatesの有効化

Templatesは初期状態では無効になっているため、有効化する必要があります。

図9
「Pods Admin」メニューをクリック
「Components」をクリック

図10
Templatesの「Enable」をクリック

Templatesについて

Templatesの中で、カスタム投稿タイプの項目は以下の書式で定義します
{@項目名}
例:{@address}、{@interior._img.thumbnail}
利用できる項目はTemplateのEdit画面で選ぶことができます
2016-08-16_11h00_12

Templatesを利用したページの作成

残りの項目を表示するためにTemplatesを利用してページを作成します。
図11
「Pods Admin」メニューをクリック
「Templates」をクリック

図12
「Add New」をクリック

2016-08-16_11h00_44
それぞれ以下のように入力します。
・Template name : Restaurant Template
・Template :

最後に「公開」をクリックします。

カスタム投稿タイプとtemplatesの関連付け

templatesを作成したら、先ほど作成したrestaurantカスタム投稿タイプとこのtemplatesを関連付けします。

2016-08-16_11h09_47
「Pods Admin」メニューをクリック
「レストラン」をクリック

2016-08-16_11h10_38
「Auto Template Options」タブをクリック
「Enable Automatic Pods Templates for this Pod?」にチェック
「Restrant Template」を選択
「Save Pod」ボタンをクリック

以上で、Templatesの設定が完了しました。

ページの確認

それではページをもう一度表示してみましょう。

ビストロ マキタ – 41y dev

先ほどは表示されていなかった全ての項目が表示されるようになりました。

まとめ

今回はWordPressでカスタム投稿タイプを作成する際に、非常に便利なPodsを利用して、その作成方法からページへの表示方法まで説明しました。

Podsを利用すると、プログラムを一切することなく、カスタム投稿タイプを作成することができるだけでなく、データの表示もプログラム無しで簡単にできるようになることが、わかっていただけたかと思います。

皆さんもカスタム投稿タイプを作成する際は、Podsの利用を検討してみてはいかがでしょうか。

無料e-book:ノンエンジニアでもWebサービスが作れるようになるためのマル秘テクニックガイド

あなたはプログラムやデザインの勉強をしないとWebサービスが作れるようにならないと思っていませんか?

確かに複雑なWebサービスを作るためには、プログラムやデザインのスキルが必要になってきます。
しかし、そういったスキルが無くても作れるWebサービスはいくつでもあるのです。

では、どうすればプログラムやデザインの勉強をしないでWebサービスが作れるようになるのでしょうか?
それには秘訣があるのです。

今回、その秘訣を50ページ以上に渡って解説したe-bookを無料で差し上げます!

この機会にぜひ手に入れてください。

無料e-bookを手に入れる

スポンサードリンク


  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。