fbpx

Elementor Pro機能拡張!【カスタム投稿タイプのテンプレートを作成する方法】-カスタムフィールドも説明-

カスタム投稿タイプをどの様にElementor Proで活用するのだろう?
テーマビルダーでテンプレートを作るのかな?と思っている方は正解ですがおしいです。
そこにカスタムフィールドと動的タグも使うことにより複雑なサイトも簡単にカスタムできてしまいます。

この記事は、前回の記事『WordPress カスタム投稿タイプ【徹底解説】』で紹介をしたカスタム投稿タイプという機能をカスタムフィールドと動的タグを使ってElementor Proでどうやってサイトの幅を広げるのかを具体的に説明します。

ここで前回記事を少しおさらいです。

WordPressにデフォルトである投稿タイプ(投稿・固定ページなど)とは別にCustom Post Type UIというプラグインを活用し、サンプルサイトに新しい投稿タイプの『映画』を追加しました。

カスタム投稿タイプ『映画』で作成した『JOKER』のページ

この記事の応用とはつまりElementor Proのテーマビルダーで『映画』の投稿タイプ専用のテンプレートを作成し、『映画』内で作成した各ページを、そのテンプレートに沿って表示をさせていく方法をくわしく説明していきます!

つまりこの記事で学べることは以下の通りです。

カスタム投稿タイプのテンプレート作成前にまずすること

カスタム投タイプのテーマビルダーテンプレート作成前に行う作業

ダッシュボードの左側にある『Elementor』内の『設定』をクリックします。
すると上記のようなElementormの『一般』の設定画面になります。

Elementor・設定/一般:投稿タイプで該当するものをチェック

『投稿タイプ』で自分の持っている投稿タイプ一覧が表示されますので、テンプレートを作成したい投稿タイプのチェックボックスにチェックをします。
※このサンプルでは投稿タイプ『映画』にチェックを入れました。

まず、この作業を必ずしてください!
この該当する投稿タイプにチェックがないと、この投稿タイプのテンプレートを作成することができません!

カスタム投稿タイプのテンプレートはテーマビルダーで作る

テーマビルダーを起動

ダッシュボードの左側にある『テンプレート』内の『Thema Builder(テーマビルダー)』をクリックし、表示された画面上部にある『Try It Now』をクリックします。

Single Postを選択

するとこの様なテーマビルダーの画面表示になります。
『Single Post』を選択します。

テンプレートライブラリを閉じる

するとこの様にテンプレートライブラリが表示されます。
もちろんこれらのテンプレートを駆使してページを作成することもできますが、このサンプルでは自分でページレイアウトを作成していきますので、ライブラリ画面の右上の×ボタンをクリックします。

Elementor(Single Post)の編集画面

するとこの様に真っさらなElementorの編集画面に行きます。

もしかしたらテーマビルダーを既に実用している人はお気づきかもしれませんが、ここからの作業は既に【Elementor Pro テーマビルダーで投稿ページのレイアウトの作り方】で説明している通り、ページの作り方やウィジェットの操作方法はこれと全く同じです。

この記事で一体何を伝えたいのかと言うと、一般的な投稿タイプのテンプレート、ページレイアウトの作り方に加えて更にプラスαで『カスタムフィールド』を駆使し、特に情報量の多い『映画』のカスタム投稿タイプに特化したページのテンプレートを作り上げていきます。

また、前回記事のWordPress カスタム投稿タイプ【徹底解説】で説明をしたカスタムタクソノミーの表示もElementor Proのテーマビルダーを使えば簡単に表示させることができるんです!

ページレイアウトの作成例①SINGLEウィジェット

まずはSingle PostエディターにあるSINGLEウィジェットを使用していきます。
SINGLEウィジェットとはSingle Postを作成するのに特化したウィジェットのことです。

Post TitleウィジェットとPost Contentウィジェットの挿入

カラムを2つに分割し、『Post Title』ウィジェット、その下に『Post Content』ウィジェットを挿入しました。
表示がご覧の通り『Hello World』となっており、これはデフォルトのこのエディターの設定の投稿タイプが『投稿』を表示させる様になっているからです。

Post TitleとPost Contentの表示を投稿タイプ『映画』のものにする必要があります。
その方法は以下の通りです。

設定・Preview Settingsの選択

画面左下のギアマーク、『設定』をクリックし、編集タブの『Preview Settings』をクリックします。

Preview Settingsの操作・JOKERを選択

Preview Settingsを以下の手順で設定を行います。

  1. Preview Dynamic Content asで該当する投稿タイプを選択
  2. 『すべて』と書いてあるフィールドで編集画面に表示させたページを検索し選択
  3. APPLY & PREVIEWをクリック

こちらのサンプルではPreview Dynamic Cobtent asで『映画』、表示させるページに『JOKER』を選択しました。

Preview SettingsでJOKERを選択した後の編集画面

するとこの様に、『映画』の投稿タイプの『JOKER』のページがこのテンプレートを構成していく上での見本となり表示されます。

アイキャッチ画像ウィジェットとPost Titleウィジェットの挿入

次にもう一つのカラムに『アイキャッチ画像』ウィジェットと『Post Info』ウィジェットを入れました。

カスタムタクソノミーを Elementorでページに表示させる方法(Post Info)

前回記事WordPress カスタム投稿タイプ【徹底解説】で映画の投稿タイプに新たに追加をしたタクソノミー(カテゴリーやタグと同じ役割を果たすもの)の『ジャンル』『俳優』『監督』(これらの総称をカスタムタクソノミーと呼ぶ)をどの様にコードを書かずElementorでページ上に表示させるのかを以下で説明します。

カスタムタクソノミーを表示させるツールとして『Post Info』ウィジェットを使用しいていきます。

項目を追加

Post Infoの項目を追加

上記は挿入したPost Infoのデフォルトから、AuthorやTimeなどの情報を削除し、『Date』のみを残した時の表示画面です。
※デフォルトのどの情報を表示させ削除するかはここでは重要ではありません。

『+項目を追加』をクリックします。

タイプ

新しい項目のタイプで『Terms』を選択

『タイプ』で『Terms』を選択します。

Taxonomy

Taxonomyを選択

『Taxonomy』で自分の表示させたいタクソノミー(カテゴリー、タグと同じ役割を果たすもの)をここから選択します。
※このサンプルでは前回記事無内で作成したカスタムタクソノミーの『ジャンル』を選択します。

Taxonomyで『ジャンル』を選択した後の表示画面

するとこの様に編集画面上に、WordPressの編集画面上で設定をしたジャンル(サイコスリラー)がPost Info内に表示されます。

新しい項目+Termsを追加しその他のTaxonomyを追加した後の表示画面

その他にタクソノミーを追加したい場合はTaxonomyで記したやり方と全く同じです。
※上記は新たに『俳優』と『監督』のTaxonomyをPost Info内に追加した時の表示画面です。

『前』の説明

『前』はPost Infoに表示されたワードが一体何のタクソノミーかを画面上に記したい時などに有効です。

上記は『ジャンル』のタクソノミーの『前』のフィールドに『ジャンル:』と記入しました。
すると、Post Infoに『ジャンル:サイコスリラー』と表示されます。


SINGLEウィジェットのすべての紹介はこの記事では割愛しますが、9つのSINGLEウィジェットについて詳しく解説をした記事がありますので、それぞれの詳しい機能や使い方についてはそちらをご覧くださいね!

ページレイアウトの作成例②動的タグを使用(基礎編)

上記セクションでSINGLEウィジェットを使用してWordPressのページの情報を呼び出し『映画』のページのレイアウトをする方法を紹介しましたが、『動的タグ』という機能を駆使すればSINGLE以外のウィジェットもSINGLEウィジェットと同じ機能を持たせることができます。

『動的タグ』とはElementor Proにのみ搭載された機能で、簡潔に言えば個々の投稿タイプのフィールド、サイト自体の情報、ユーザーの情報などを、Elementor内に呼び出すことの出来る機能です。

動的タグについて詳しく知りたい方は
>>Elementor Pro『動的タグ』の使い方
>>Elementor Pro『リンクの動的タグ』の使い方
に記事にて詳しく機能から使い方までを説明していますので参考にしてくださいね!

見出しウィジェットを挿入

例えば『見出し』ウィジェットを使いどの様に動的タグを使って『JOKER』の見出しを呼び出すかをこのセクションでデモンストレーションします。

動的タグ・Post Titleを選択


『タイトル』のフィールドの右側にあるパンケーキのようなマーク(動的タグ)をクリックします。
すると上記画像のように動的タグの一覧が表示されますのでその中の『Post Title』をクリックします。

動的タグ・Post Title選択後の見出しウィジェットの表示

するとこの様に、見出しに『JOKER』が現れました。
これが『動的タグ』のとても基礎的でシンプルな使い方です。

しかし、正直言って『見出し』ウィジェットと動的タグの併用をするのなら、最初に紹介をしたSINGLEウィジェットのPost Titleで十分ですね。

次のセクションで、動的タグを使用しないとできないElementor機能拡張の応用編を紹介します!

ページレイアウトの作成例③動的タグ+カスタムフィールド

例えばこのテンプレートに映画の予告編を記事に埋め込みたいとします。
その場合、SINGLEウィジェットにその機能を果たすものがありません

そこで『動的タグ』が大活躍します!!

動画の挿入には『動画』ウィジェットです。
つまり、動画ウィジェット+動的タグ+カスタムフィールドを併用すれば『映画』の各ページににそれぞれ違った動画を表示させることが可能になります。

カスタムフィールドは『WordPressのカスタムフィールドに入れた情報』を『動的タグがキャッチ』し、『Elementorに情報を送る』という構造で、動的タグへのWordPressからの情報提供元の様なものです。

図式化した動的タグ
動画ウィジェットの挿入

まず、『動画』ウィジェットを挿入します。

注意!リンクに直接URLを挿入してはいけない

テンプレート状のウィジェットのリンクに直接URLを貼るのはNG

動画ウィジェットと言えばこのウィジェットのリンクに表示させたい動画のURLを挿入して使用することが一般的ですが、それをしてはいけません

なぜなら、これは全ての『映画』のページに使用するテンプレートを作成しているので、ここで動画のリンクに直接JOKERの予告編の URLを入れようものなら全ての『映画』の投稿タイプで作成したページの予告編が『JOKER』のものになってしまうからです。

もちろん他のリンク機能のあるウィジェット全般に言えることですので、テンプレート上で直接リンクを張らない様にしましょう。

カスタム投稿タイプのカスタムフィールド設定の為に必ずすること

カスタム投稿タイプのカスタムフィールドを設定する前に必ず行わなければならないCPT UIの設定
サポート・カスタムフィールドにチェック
投稿タイプ保存をクリック

まず、カスタム投稿タイプのカスタムフィールドをWordPressで設定するにあたり必ずしなければならない設定があります。
それをしないとカスタム投稿タイプでカスタムフィールドを使うことができません。

以下の手順に沿って、その設定をまず完了させてください。

  1. ダッシュボード左側、プラグイン『CPT UI』(Custom Post Type UI)の『投稿タイプの追加と編集』をクリック
  2. 画面上部、『投稿タイプを編集』をクリック
  3. 画面を下にスクロール
  4. 『サポート』の欄の『カスタムフィールド』にチェック
  5. 画面一番下の『投稿タイプを保存をクリック

これでカスタム投稿タイプでカスタムフィールドを使用する条件は整いました。

カスタムフィールドの設定

以下でどの様にカスタムフィールドを設定するのかを説明していきます。

尚、デフォルトの投稿タイプ(投稿または固定ページ)で既にカスタムフィールドの設定を行っている場合は上記セクションの『カスタム投稿タイプのカスタムフィールド設定の為に必ずすること』での設定さえすればカスタムフィールドが既にカスタム投稿タイプで使える状態になっていますので、以下で説明をしている手順は不要です。

WordPressの投稿編集画面・オプション内の設定をクリック

こちらはWordPressの投稿タイプ『映画』の『JOKER』編集画面です。
※正直どの投稿タイプの編集画面から行っても同じです。

画面右上の『•』(オプション)をクリックし、出てきたタブの一番下の『設定』をクリックします。

※ここでもし、いくらタブを下にスクロールしても『設定』が出てこない!というアクシデントに見舞われても焦らないでください!

その時にまず行って欲しい対処法は、表示画面を縮小することです。
画面がを拡大していたり、または画面の解像度が低い場合、画面サイズがデフォルトの100%だったとしても『設定』部分が画面からはみ出してしまい表示されないことがあります。
まず、画面を縮小しても『設定』が現れない時は別の問題がある。という風に考えてください。

パネル内のカスタムフィールドをオン

するとこの様な『設定』のタブが開きますので、まずタブの左側の『パネル』をクリックし、『追加』の欄の『カスタムフィールド』をオンにします。
※デフォルトではカスタムフィールドがオフになっています。

有効化してリロードをクリック

すると『有効化してリロード』というボタンが表示されますのでそちらをクリックします。

カスタムフィールド表示・画面右タブ
※これは投稿タイプ『投稿』の編集画面です。
カスタムフィールドの表示・画面下部
※これは投稿タイプ『映画』の編集画面です。

するとこの様に右側の編集タブ、又はページを下にスクロールした場所に『カスタムフィールド』が表示されます。

カスタムフィールドを追加する

カスタムフィールド・新規追加

『カスタムフィールドを追加:』の欄の『新規追加』をクリックします。

名前の記入

すると、『選択』と表示されていた『名前』のフィールドは空欄になりますので、そこに半角英数字、記号は_(アンダースコア)のみで好きな名前を記入します。
※このサンプルではカスタムフィールドと動的タグを使用して映画の予告編を動画ウィジェットに挿入するので名前を『trailer』(英語で予告編)としました。
※設定する情報と関連性ある名前にしましょう。

映画予告編のURL採取

例えばYouTubeなどで動画予告編のURLをコピーします。

名前の右側のフィールドに予告編URLを記入・カスタムフィールドを追加をクリック

名前の右側のフィールドに動画の予告編のURLを記入(ペースト)し、『カスタムフィールドを追加』をクリックします。

追加完了したカスタムフィールド

『trailer』のカスタムフィールドが追加されました。

動的タグでカスタムフィールドに追加したものをElementorに呼び出す

カスタムフィールドで追加した映画の予告編を、動的タグを使用してテーマビルダーのテンプレートに呼び出す方法を紹介します。

動画ウィジェット・動的タグ/Post Custom Feild

こちらはテーマビルダーの『映画』の投稿タイプのために作成しているSingle Postの編集画面です。

動画ウィジェットのの編集タブの『リンク』の動的タグのボタンをクリックします。

開いたタブの『Post』の中から『Post Custom Feild』を選択します。

Custom Key:カスタムフィールドで設定した名前を記入

すると動的タグ『Post Custom Feild』の設定に『Custom Key』とありますのでそのフィールドに呼び寄せたいカスタムフィールドの名前(このサンプルでは『trailer』)を記入します。

尚、『Key』はデフォルトのカスタムフィールドの名前しかありませんのでこちらは無視してください。

Custom Keyを記入しても、動画につきましてはこのテーマビルダー・Single Postの編集画面上では何も変化は起きませんので、プレビューにて、カスタムフィールドで設定した動画が動的タグによって呼び出されているかどうかを確認します。

サイトプレビュー画面

こちらはプレビューの画面です。
プレビューではきちんと動画ウィジェットの枠に映画『JOKER』の予告編が表示されました!


ここから別の映画のページを作ってこのテンプレートを投稿タイプ『映画』の全ページで使いまわしてみましょう。

カスタム投稿タイプ・映画の新規追加したページの編集画面(South Park)
こちらは新たな『映画』のページ、『South Park』の編集画面です。
※タイトル・Post Content・カスタムタクソノミー・アイキャッチ画像・カスタムフィールドのすべての項目でSouth Parkの情報が入っています。
South Parkの映画予告編を採取
こちらはSouth ParkのYouTubeの予告編動画の画面です。

上記の様に投稿タイプ『映画』のページを新規作成し、『South Park』のページを作り、カスタムフィールドをJOKERのページと同じ様に以下のカスタムフィールドを追加しました。

追加したカスタムフィールド>>(名前)trailer:(URL)South Parkの予告編動画のURL

South Parkのページサイトプレビュー

こちらはSouth Parkのページを実際のサイトでプレビューした時の表示画面です。

レイアウトの確認

今回作成したテンプレートのレイアウト通りに、タイトル・Post Content・アイキャッチ画像・Post Info・動画(映画の予告編)が表示されました!

この様に、『カスタム投稿タイプ』にカスタムタクソノミーや動的タグ、カスタムフィールドを組み合わせていくことででサイトを管理しやすく、大幅に拡張していくことが可能になります!

テンプレートを使用する利点

テンプレート使用する利点は他にもあります。

テンプレートのレイアウト変更後のテーマビルダー編集画面

上記は先ほど編集した投稿タイプ『映画』に使用しているテンプレートの編集画面です。
アイキャッチ画像やPost Content、Post Infoの配置をこの様に変更し、テンプレートのレイアウトの変更をし『更新』をします。

JOKERのサイトプレビュー画面
South Parkのサイトプレビュー画面

するとこの様に、簡単にテンプレートに該当する全てのページのレイアウトが変更されます。

もちろん、ドラッグ&ドロップでのウィジェットレイアウト変更だけでなく、新たなウィジェットで機能を追加したり、削除したりと自由自在にレイアウト変更が可能です!

本当に便利な機能ですね!

まとめ

  • カスタムタクソノミーの表示はElementor Proのテーマビルダーを使用すれば簡単にできる。(コード不要)
  • Elementorのテーマビルダーを使えば投稿タイプごとのテンプレートが作成でき、サイトのページごとに細かくレイアウトの変更が行える。
  • テンプレートに沿って同じ投稿タイプの各ページがレイアウトされていくのでサイトの統一感に繋がる。
  • ページのレイアウトを変えたい場合でもテーマビルダーのテンプレートを使えば同じ投稿タイプのすべてのページレイアウトが一斉にそのテンプレートに沿って変更される。
  • 投稿数の多いサイトの管理がとてもしやすくなる。
  • 動的タグ+カスタムフィールドの機能を使えば、SINGLEウィジェットだけではカバーできない様な機能を作り出すことができる。
  • Elementor Proを使用しているなら知っておくべき知識。

この記事で取り上げたテーマビルダーですが、これ以外にもヘッダーやフッター、アーカイブページのレイアウトなどサイトの各パーツをテーマビルダーで構成し、管理していくことが可能です。

テーマビルダーの詳しい使い方について以下の記事でまとめてありますのでよろしければご覧くださいね!

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通