Elementor Proでカスタム投稿タイプのテンプレートを作成する方法
- 2022年4月23日
- 2021年9月6日
- Elementorの使い方
- Elementor Pro
カスタム投稿タイプをどの様にElementor Proで活用するのだろう？
テーマビルダーでテンプレートを作るのかな？と思っている方は正解ですがおしいです。
そこにカスタムフィールドと動的タグも使うことにより複雑なサイトも簡単にカスタムできてしまいます。
この記事は、前回の記事『WordPress カスタム投稿タイプ【徹底解説】』で紹介をしたカスタム投稿タイプという機能をカスタムフィールドと動的タグを使ってElementor Proでどうやってサイトの幅を広げるのかを具体的に説明します。
ここで前回記事を少しおさらいです。
WordPressにデフォルトである投稿タイプ（投稿・固定ページなど）とは別にCustom Post Type UIというプラグインを活用し、サンプルサイトに新しい投稿タイプの『映画』を追加しました。
この記事の応用とはつまりElementor Proのテーマビルダーで『映画』の投稿タイプ専用のテンプレートを作成し、『映画』内で作成した各ページを、そのテンプレートに沿って表示をさせていく方法をくわしく説明していきます！
つまりこの記事で学べることは以下の通りです。
- テーマビルダーを使ってカスタム投稿タイプのテンプレートを作る方法
- テーマビルダーのSINGLEウィジェットの使い方
- カスタムタクソノミーをページに表示させる方法
- 基本的な動的タグの使い方
- カスタムフィールドを設定する方法
- 動的タグとカスタムフィールドでウィジェット機能を拡張し、テンプレートを使い回す方法
Elementor Proでカスタム投稿タイプのテンプレートを作成する方法を動画でご覧になりたい方はこちらからどうぞ！
カスタム投稿タイプのテンプレート作成前にまずすること
ダッシュボードの左側にある『Elementor』内の『設定』をクリックします。
すると上記のようなElementormの『一般』の設定画面になります。
『投稿タイプ』で自分の持っている投稿タイプ一覧が表示されますので、テンプレートを作成したい投稿タイプのチェックボックスにチェックをします。
※このサンプルでは投稿タイプ『映画』にチェックを入れました。
まず、この作業を必ずしてください！
この該当する投稿タイプにチェックがないと、この投稿タイプのテンプレートを作成することができません！
カスタム投稿タイプのテンプレートはテーマビルダーで作る
ダッシュボードの左側にある『テンプレート』内の『Thema Builder(テーマビルダー)』をクリックし、表示された画面上部にある『Try It Now』をクリックします。
するとこの様なテーマビルダーの画面表示になります。
『Single Post』を選択します。
するとこの様にテンプレートライブラリが表示されます。
もちろんこれらのテンプレートを駆使してページを作成することもできますが、このサンプルでは自分でページレイアウトを作成していきますので、ライブラリ画面の右上の×ボタンをクリックします。
するとこの様に真っさらなElementorの編集画面に行きます。
もしかしたらテーマビルダーを既に実用している人はお気づきかもしれませんが、ここからの作業は既に【Elementor Pro テーマビルダーで投稿ページのレイアウトの作り方】で説明している通り、ページの作り方やウィジェットの操作方法はこれと全く同じです。
この記事で一体何を伝えたいのかと言うと、一般的な投稿タイプのテンプレート、ページレイアウトの作り方に加えて更にプラスαで『カスタムフィールド』を駆使し、特に情報量の多い『映画』のカスタム投稿タイプに特化したページのテンプレートを作り上げていきます。
また、前回記事のWordPress カスタム投稿タイプ【徹底解説】で説明をしたカスタムタクソノミーの表示もElementor Proのテーマビルダーを使えば簡単に表示させることができるんです！
ページレイアウトの作成例①SINGLEウィジェット
まずはSingle PostエディターにあるSINGLEウィジェットを使用していきます。
SINGLEウィジェットとはSingle Postを作成するのに特化したウィジェットのことです。
カラムを2つに分割し、『Post Title』ウィジェット、その下に『Post Content』ウィジェットを挿入しました。
表示がご覧の通り『Hello World』となっており、これはデフォルトのこのエディターの設定の投稿タイプが『投稿』を表示させる様になっているからです。
Post TitleとPost Contentの表示を投稿タイプ『映画』のものにする必要があります。
その方法は以下の通りです。
画面左下のギアマーク、『設定』をクリックし、編集タブの『Preview Settings』をクリックします。
Preview Settingsを以下の手順で設定を行います。
- Preview Dynamic Content asで該当する投稿タイプを選択
- 『すべて』と書いてあるフィールドで編集画面に表示させたページを検索し選択
- APPLY & PREVIEWをクリック
こちらのサンプルではPreview Dynamic Cobtent asで『映画』、表示させるページに『JOKER』を選択しました。
するとこの様に、『映画』の投稿タイプの『JOKER』のページがこのテンプレートを構成していく上での見本となり表示されます。
次にもう一つのカラムに『アイキャッチ画像』ウィジェットと『Post Info』ウィジェットを入れました。
カスタムタクソノミーを Elementorでページに表示させる方法(Post Info)
前回記事WordPress カスタム投稿タイプ【徹底解説】で映画の投稿タイプに新たに追加をしたタクソノミー（カテゴリーやタグと同じ役割を果たすもの）の『ジャンル』『俳優』『監督』（これらの総称をカスタムタクソノミーと呼ぶ）をどの様にコードを書かずElementorでページ上に表示させるのかを以下で説明します。
カスタムタクソノミーを表示させるツールとして『Post Info』ウィジェットを使用しいていきます。
項目を追加
上記は挿入したPost Infoのデフォルトから、AuthorやTimeなどの情報を削除し、『Date』のみを残した時の表示画面です。
※デフォルトのどの情報を表示させ削除するかはここでは重要ではありません。
『＋項目を追加』をクリックします。
タイプ
『タイプ』で『Terms』を選択します。
Taxonomy
『Taxonomy』で自分の表示させたいタクソノミー（カテゴリー、タグと同じ役割を果たすもの）をここから選択します。
※このサンプルでは前回記事無内で作成したカスタムタクソノミーの『ジャンル』を選択します。
するとこの様に編集画面上に、WordPressの編集画面上で設定をしたジャンル（サイコスリラー）がPost Info内に表示されます。
その他にタクソノミーを追加したい場合はTaxonomyで記したやり方と全く同じです。
※上記は新たに『俳優』と『監督』のTaxonomyをPost Info内に追加した時の表示画面です。
前
『前』はPost Infoに表示されたワードが一体何のタクソノミーかを画面上に記したい時などに有効です。
上記は『ジャンル』のタクソノミーの『前』のフィールドに『ジャンル：』と記入しました。
すると、Post Infoに『ジャンル：サイコスリラー』と表示されます。
SINGLEウィジェットのすべての紹介はこの記事では割愛しますが、9つのSINGLEウィジェットについて詳しく解説をした記事がありますので、それぞれの詳しい機能や使い方についてはそちらをご覧くださいね！
- Elementor Pro テーマビルダーSingleの５つの基本ウィジェット
- Elementor Pro Singleウィジェット『Post Info』の使い方
- Elementor Pro Singleウィジェット『Post Navigation』の使い方
- Elementor Pro 『Author Box』ウィジェットの使い方
- Elementor Pro 『Table of Contents』の使い方
ページレイアウトの作成例②動的タグを使用（基礎編）
上記セクションでSINGLEウィジェットを使用してWordPressのページの情報を呼び出し『映画』のページのレイアウトをする方法を紹介しましたが、『動的タグ』という機能を駆使すればSINGLE以外のウィジェットもSINGLEウィジェットと同じ機能を持たせることができます。
『動的タグ』とはElementor Proにのみ搭載された機能で、簡潔に言えば個々の投稿タイプのフィールド、サイト自体の情報、ユーザーの情報などを、Elementor内に呼び出すことの出来る機能です。
動的タグについて詳しく知りたい方は
＞＞Elementor Pro『動的タグ』の使い方
＞＞Elementor Pro『リンクの動的タグ』の使い方
に記事にて詳しく機能から使い方までを説明していますので参考にしてくださいね！
例えば『見出し』ウィジェットを使いどの様に動的タグを使って『JOKER』の見出しを呼び出すかをこのセクションでデモンストレーションします。
『タイトル』のフィールドの右側にあるパンケーキのようなマーク（動的タグ）をクリックします。
すると上記画像のように動的タグの一覧が表示されますのでその中の『Post Title』をクリックします。
するとこの様に、見出しに『JOKER』が現れました。
これが『動的タグ』のとても基礎的でシンプルな使い方です。
しかし、正直言って『見出し』ウィジェットと動的タグの併用をするのなら、最初に紹介をしたSINGLEウィジェットのPost Titleで十分ですね。
次のセクションで、動的タグを使用しないとできないElementor機能拡張の応用編を紹介します！
ページレイアウトの作成例③動的タグ＋カスタムフィールド
例えばこのテンプレートに映画の予告編を記事に埋め込みたいとします。
その場合、SINGLEウィジェットにその機能を果たすものがありません。
そこで『動的タグ』が大活躍します！！
動画の挿入には『動画』ウィジェットです。
つまり、動画ウィジェット＋動的タグ＋カスタムフィールドを併用すれば『映画』の各ページににそれぞれ違った動画を表示させることが可能になります。
カスタムフィールドは『WordPressのカスタムフィールドに入れた情報』を『動的タグがキャッチ』し、『Elementorに情報を送る』という構造で、動的タグへのWordPressからの情報提供元の様なものです。
まず、『動画』ウィジェットを挿入します。
注意！リンクに直接URLを挿入してはいけない
動画ウィジェットと言えばこのウィジェットのリンクに表示させたい動画のURLを挿入して使用することが一般的ですが、それをしてはいけません！
なぜなら、これは全ての『映画』のページに使用するテンプレートを作成しているので、ここで動画のリンクに直接JOKERの予告編の URLを入れようものなら全ての『映画』の投稿タイプで作成したページの予告編が『JOKER』のものになってしまうからです。
もちろん他のリンク機能のあるウィジェット全般に言えることですので、テンプレート上で直接リンクを張らない様にしましょう。
カスタム投稿タイプのカスタムフィールド設定の為に必ずすること
まず、カスタム投稿タイプのカスタムフィールドをWordPressで設定するにあたり必ずしなければならない設定があります。
それをしないとカスタム投稿タイプでカスタムフィールドを使うことができません。
以下の手順に沿って、その設定をまず完了させてください。
- ダッシュボード左側、プラグイン『CPT UI』（Custom Post Type UI）の『投稿タイプの追加と編集』をクリック
- 画面上部、『投稿タイプを編集』をクリック
- 画面を下にスクロール
- 『サポート』の欄の『カスタムフィールド』にチェック
- 画面一番下の『投稿タイプを保存をクリック
これでカスタム投稿タイプでカスタムフィールドを使用する条件は整いました。
カスタムフィールドの設定
以下でどの様にカスタムフィールドを設定するのかを説明していきます。
尚、デフォルトの投稿タイプ（投稿または固定ページ）で既にカスタムフィールドの設定を行っている場合は上記セクションの『カスタム投稿タイプのカスタムフィールド設定の為に必ずすること』での設定さえすればカスタムフィールドが既にカスタム投稿タイプで使える状態になっていますので、以下で説明をしている手順は不要です。
こちらはWordPressの投稿タイプ『映画』の『JOKER』編集画面です。
※正直どの投稿タイプの編集画面から行っても同じです。
画面右上の『•••』（オプション）をクリックし、出てきたタブの一番下の『設定』をクリックします。
※ここでもし、いくらタブを下にスクロールしても『設定』が出てこない！というアクシデントに見舞われても焦らないでください！
その時にまず行って欲しい対処法は、表示画面を縮小することです。
画面がを拡大していたり、または画面の解像度が低い場合、画面サイズがデフォルトの100%だったとしても『設定』部分が画面からはみ出してしまい表示されないことがあります。
まず、画面を縮小しても『設定』が現れない時は別の問題がある。という風に考えてください。
するとこの様な『設定』のタブが開きますので、まずタブの左側の『パネル』をクリックし、『追加』の欄の『カスタムフィールド』をオンにします。
※デフォルトではカスタムフィールドがオフになっています。
すると『有効化してリロード』というボタンが表示されますのでそちらをクリックします。
するとこの様に右側の編集タブ、又はページを下にスクロールした場所に『カスタムフィールド』が表示されます。
カスタムフィールドを追加する
『カスタムフィールドを追加：』の欄の『新規追加』をクリックします。
すると、『選択』と表示されていた『名前』のフィールドは空欄になりますので、そこに半角英数字、記号は_(アンダースコア)のみで好きな名前を記入します。
※このサンプルではカスタムフィールドと動的タグを使用して映画の予告編を動画ウィジェットに挿入するので名前を『trailer』(英語で予告編）としました。
※設定する情報と関連性ある名前にしましょう。
例えばYouTubeなどで動画予告編のURLをコピーします。
名前の右側のフィールドに動画の予告編のURLを記入（ペースト）し、『カスタムフィールドを追加』をクリックします。
『trailer』のカスタムフィールドが追加されました。
動的タグでカスタムフィールドに追加したものをElementorに呼び出す
カスタムフィールドで追加した映画の予告編を、動的タグを使用してテーマビルダーのテンプレートに呼び出す方法を紹介します。
こちらはテーマビルダーの『映画』の投稿タイプのために作成しているSingle Postの編集画面です。
動画ウィジェットのの編集タブの『リンク』の動的タグのボタンをクリックします。
開いたタブの『Post』の中から『Post Custom Feild』を選択します。
すると動的タグ『Post Custom Feild』の設定に『Custom Key』とありますのでそのフィールドに呼び寄せたいカスタムフィールドの名前（このサンプルでは『trailer』）を記入します。
尚、『Key』はデフォルトのカスタムフィールドの名前しかありませんのでこちらは無視してください。
Custom Keyを記入しても、動画につきましてはこのテーマビルダー・Single Postの編集画面上では何も変化は起きませんので、プレビューにて、カスタムフィールドで設定した動画が動的タグによって呼び出されているかどうかを確認します。
こちらはプレビューの画面です。
プレビューではきちんと動画ウィジェットの枠に映画『JOKER』の予告編が表示されました！
ここから別の映画のページを作ってこのテンプレートを投稿タイプ『映画』の全ページで使いまわしてみましょう。
※タイトル・Post Content・カスタムタクソノミー・アイキャッチ画像・カスタムフィールドのすべての項目でSouth Parkの情報が入っています。
こちらはSouth ParkのYouTubeの予告編動画の画面です。
上記の様に投稿タイプ『映画』のページを新規作成し、『South Park』のページを作り、カスタムフィールドをJOKERのページと同じ様に以下のカスタムフィールドを追加しました。
追加したカスタムフィールド＞＞（名前）trailer：（URL）South Parkの予告編動画のURL
こちらはSouth Parkのページを実際のサイトでプレビューした時の表示画面です。
今回作成したテンプレートのレイアウト通りに、タイトル・Post Content・アイキャッチ画像・Post Info・動画（映画の予告編）が表示されました！
この様に、『カスタム投稿タイプ』にカスタムタクソノミーや動的タグ、カスタムフィールドを組み合わせていくことででサイトを管理しやすく、大幅に拡張していくことが可能になります！
テンプレートを使用する利点
テンプレート使用する利点は他にもあります。
上記は先ほど編集した投稿タイプ『映画』に使用しているテンプレートの編集画面です。
アイキャッチ画像やPost Content、Post Infoの配置をこの様に変更し、テンプレートのレイアウトの変更をし『更新』をします。
するとこの様に、簡単にテンプレートに該当する全てのページのレイアウトが変更されます。
もちろん、ドラッグ＆ドロップでのウィジェットレイアウト変更だけでなく、新たなウィジェットで機能を追加したり、削除したりと自由自在にレイアウト変更が可能です！
本当に便利な機能ですね！
まとめ
- カスタムタクソノミーの表示はElementor Proのテーマビルダーを使用すれば簡単にできる。（コード不要）
- Elementorのテーマビルダーを使えば投稿タイプごとのテンプレートが作成でき、サイトのページごとに細かくレイアウトの変更が行える。
- テンプレートに沿って同じ投稿タイプの各ページがレイアウトされていくのでサイトの統一感に繋がる。
- ページのレイアウトを変えたい場合でもテーマビルダーのテンプレートを使えば同じ投稿タイプのすべてのページレイアウトが一斉にそのテンプレートに沿って変更される。
- 投稿数の多いサイトの管理がとてもしやすくなる。
- 動的タグ＋カスタムフィールドの機能を使えば、SINGLEウィジェットだけではカバーできない様な機能を作り出すことができる。
- Elementor Proを使用しているなら知っておくべき知識。
この記事で取り上げたテーマビルダーですが、これ以外にもヘッダーやフッター、アーカイブページのレイアウトなどサイトの各パーツをテーマビルダーで構成し、管理していくことが可能です。
テーマビルダーの詳しい使い方について以下の記事でまとめてありますのでよろしければご覧くださいね！
- Elementor Pro 『テーマビルダー』の基本
- Elementor Pro、サイト間でテーマビルダーのテンプレートを再利用する方法
- Elementor Pro テーマビルダーで投稿ページのレイアウトの作り方
- Elementor Pro テーマビルダーでアーカイブページのレイアウトの作り方
また、TOFUラボのプロWebデザイナーの藤原さんが物件サイトを作成した際に作成したカスタムフィールドを動画で公開してくれています！
ぜひ参考にしてくださいね！
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
