少し凝ったWEBサイトを構築するためにはCustom Post Type UIやAdvanced Custom Fieldsを使ったWEBサイト開発が必要になります。

例えば不動産サイトで物件を表示、検索をする、人材サイトで人材募集情報を表示する、観光サイトで観光地一覧を表示するなどの機能をWEBサイトに持たせるためには、WordPress標準のPostだけでは明らかに役不足です。観光サイトなら観光地名・写真・説明・ランキング・Google Mapなどの情報が必要となります。

これまでこのような機能を持ったサイトを開発する場合、Custom Post Type UIやAdvanced Custom Fieldsの設定以外にも、詳細ページのコーディングやアーカイブページのコーディングが必要でした。しかしElementor Proを使うと、一切のコーディングなしにカスタムフィールドサイトが構築できるのです。 これだけあればかなり多機能なサイトも構築が可能です。

プラグインのインストール

今回の開発に必要なプラグインは以下の3つです

Custom Post Type UI

Advanced Custom Fields

Elementor Pro

プラグインのインストールはいつも通りの方法で行なってください。ElementorはPro版が必要です。Elementor Proはインストール可能なサイト数によって$49-$199かかりますが、開発者であれば$199の無制限版を勧めます。

Custom Post Type UIの設定

今回は市内のランドマークを詳細するサイトを作るというストーリーで進めます。

Custom Post Type UI>Addから「landmark」という名前でカスタムポストを作成します。Custom Post Type UIはかなり設定項目が多いプラグインですが、とりあえずPost Type Slug=landmark、Plural Label=landmarks, Singular Label=landmarkと設定をして保存します。

 

Advanced Custom FieldsをVersion5にアップデートする

ElementorでAdvanced Custom Fieldsを使えるようにするためには、Advanced Custom FieldsをVersion 5(ベータ版)にアップデートをする必要があります。

Dashboard > Appearance > Editor > Theme Functionに移動し、下記のコードをfunction.phpに書き込みます。

/**
* Enable ACF 5 early access
* Requires at least version ACF 4.4.12 to work
*/

define('ACF_EARLY_ACCESS', '5');

Advanced Custom Fieldsの設定

Custom Fields>Add NewでLandmarkという名前のCustom Fieldsを作成します。

LocationはPost Type is equal to landmark(先ほど作成したもの)を選択します。

+Add Fieldボタンをクリックしてカスタムフィールドを設定します。下はAddress(住所)をカスタムフィールドとして追加したものです。

同じようにランキングフィールドを追加します。下の例ではランキングはSelectフィールドにして、★から★★★★★まで選べるようにしてあります。

 

テストデータの登録

ダッシュボードのサイドバーにlandmarkというカスタムポストができているはずです。Add Newを選択して新しいランドマーク情報を登録します。

同じように複数のランドマーク情報を登録しておきます。

 

詳細ページの作成

ここまではほぼ誰でもできると思います。しかしCustom Post Type UIで作成したAdvanced Custom Fieldsを実際にWEBサイト上に表示させるためには、single.phpやarchive.phpを作成してソースコードレベルで編集をしなければなりませんでしたが、Elementor Proを利用することで簡単にCustom Fieldsページを作成することができるようになります。

Elementor>My Templates>Add Newより以下のようにテンプレートを作成します。template typeはSingle, Post Typeはlandmark、名前は適当で構いません。

CREATE TEMPLATEをクリックすると空のテンプレートが作成されるので、左サイドバーからSINGLEページの要素を選んで配置します。

Elementorの要素を適当に選んで作成したSingleポストのページが以下の通りです。ここではあまり凝ったことはしていませんが、詳細ページのデザイン・レイアウトもElementorなら自由自在に行うことができます。


このレイアウトの中で住所とランキングはAdvanced Custom Fieldの値を利用しています。Elementorからテキストフィールドをフィールドを選択してDynamicを選択すると、プルダウンメニューの下の方にACF Fieldという木が表示されているはずです。

ACF Fieldから表示させたいフィールドを選択すると住所やランキングなどを表示させることができるようになります。

最後にテンプレートを保存し、表示条件から INCLUDE landmark Allを設定してあげるとLandmarkを表示する際にElementorで作成したテンプレートが表示されるようになります。


こちらが実際にブラウザで表示した例です。

landmark一覧を表示させる

Elementorでlandmark一覧を表示させるのは、通常のPostを表示させるのと同じ方法です。Queryからlandmarksを選択すると、Post一覧と同じように美しいlanmark一覧を表示させることができます。

 

機能を追求するのであれば、検索機能やソート機能も必要になるでしょう。不動産物件などの場合はカテゴリで絞り込んだり、価格で絞り込む機能も必要であるに違いありませんが、今回はシンプルに一覧を表示させるところまで解説しました。

 

まとめ

今日紹介したプラグイン3本を使うだけで、ほぼどのようなWEBサイトも構築することが可能になります。しかもコーディングやCSSの知識がなくても高機能なサイトが作れます。

Elementorはページビルダーとしても優れていますが、WEB開発環境としても優れていると言えるでしょう。