Elementor ProのDisplay Conditionの使い方

Elementor Pro 『Display Condition』の設定の仕方

『 Displey Conditions』はElementor Pro特有の機能であるポップアップやテーマビルダーを公開させる時に行う『PUBLISH SETTINGS』中もので、それぞれの機能をサイトのどのページに表示させるかを決める公開設定になります。
この記事では、『Displey Conditions』の設定の仕方についてテーマビルダーの『ヘッダー』を例に詳しく説明していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

ホームページ・ヘッダーはWordPressの設定が反映されている状態

こちらは『Display Conditions』を説明するためのサンプルページです。
ヘッダーは、テーマビルダーではなくWordpressのテーマで設定したものが表示されています。

ヘッダーをサイト全体に表示させるINCLUDE・Entire Site

以下はテーマビルダーの編集画面です。

テーマビルダーの編集画面

作ったヘッダーをサイトにロードします。
ここからが『Display Conditions』の出番です。
画面左下の緑色の『PUBLISH』(公開)ボタンをクリックします。

※テーマビルダーでのヘッダーの作り方については
『Elementor Proテーマビルダーの@@@』の記事で紹介しています。

Display Conditions・ADD CONDITION

『PUBLISH』をクリックすると上記の画面表示になります。
こちらがPUBLSISH SETTINGSの『Display Conditions』の設定画面です。
この状態はまだ何も設定がされていない時の表示画面です。

『What Do You Want to Display Your テンプレート?』
『あなたのテンプレートをどこに表示させたいですか?』とありますので、

『ADD CONDITION』をクリックします。

 INCLUDE/ Entire Site

するとこの様に『INCLUDE / Entire Site』という表示が出ます。

  • INCLUDE :含む
  • Entire Site:サイト全体

なので『これは、サイト全体で(このヘッダー)を表示させる』ということです。

SAVE&CLOSE

『SAVE&CLOSE』をクリックします。

テーマビルダーの編集画面

すると、先ほどのテーマビルダーの編集画面に戻ります。
これでこちらのヘッダーが、サイトのどのページにも表示される設定になりました。

ヘッダー変更後のホームページ表示画面

こちらはヘッダーを更新した後のサイトのホームページです。
では『About』のページに行くと、

Aboutページ

この様に同じヘッダーが『About』ページでも表示されました。
こちらでの他のページの紹介は割愛しますが、サイト内のどのページに行ってもこちらのヘッダーが表示されます。


サイトの他のページで別のヘッダーを表示させたい場合、まずテーマビルダーにて別のヘッダーを製作またはテンプレートを使い編集し、新たなヘッダーを追加する必要があります。
まずは各ページごとの『Display Conditions』の設定の説明をいきなりする前に、別の新たなヘッダーをサイト内に追加をした流れで設定の説明をしていきます。


テーマビルダーで別のヘッダーをサイトに追加する

この編集ページから、テーマビルダーのページへ簡単に行く方法を説明します。

テーマビルダーへの行き方

左側のボックスの左上の『≡』(3本線)をクリックします。

『Theme Builder』(テーマビルダー)をクリック

するとこの様に『Theme Builder』(テーマビルダー)という表示がありますのでそちらをクリックします。

テーマビルダーをくりくした後の表示画面

すると、この様にすぐにテーマビルダーのページへ行くことができます。

自分のサイト内で持っているテーマビルダーのパーツ一覧

『Your Site’s Global Parts』のリストに表示されているものは、すでにサイト内に持っているテーマビルダーの全てのパーツ一覧です。
各パーツのボックスの左上の◯が緑色になっているものは、現在使用中ということです。

既存のヘッダーをサイトに表示させる

『Header』(ヘッダー)をクリック


画面左側のバーにはパーツごとのリストが表示されていて、『Header』(ヘッダー)をクリックするとこの様にすでにサイト内に自分が持っているヘッダーの一覧が表示されます。
こちらのサンプルでは、水色のヘッダーを選択したいと思います。

『Edit Conditions』をクリック

追加したいヘッダーの下部にある『Edit Conditions』をクリックします。

Display Conditionsの設定画面

すると、この様に PUBLISH SETTINGSの『Display Conditions』の設定画面になりました。
ここから先の工程は、『特定のページのヘッダーを変更する方法』のセクションで説明します。

テンプレートのライブラリからヘッダーを追加する

『Add New』をクリック

こちらは手持ちのヘッダーのリストです。
画面右上の『Add New』をクリックします。

ライブラリ・ヘッダーのテンプレートのリスト・テンプレートの挿入

すると、この様にライブラリが表示され、ヘッダーのテンプレートを選択することができます。
ポインターがテンプレートに触れると、『挿入』ボタンが表示されるのでそちらをクリックします。
また各テンプレート中央の+ボタンをクリックすれば、プレビューを見ることができます。
※そのプレビュー画面にも『挿入』ボタンはあります。

『Import Document Seting』・Yesをクリック

するとこの様に『Import Documents Settings』の確認表示が出ますので『Yes』をクリックします。

挿入したテンプレートの編集画面

するとこの様に、選択したヘッダーテンプレートが入った状態の編集画面に切り替わります。
こちらの編集画面でロゴや書式などを自由に変更ができます。
編集が終わったら『PUBLISH』(公開)をクリックします。

Display Conditionsの表示画面

すると、こちらの『Display Conditions』の設定画面が表示されます。

特定のページのヘッダーを変更する方法

こちらのセクションで、実際にどの様にページごとに表示させるヘッダーの種類を変更・設定するのかを説明していきます。

こちらサンプルでは自作の『きのこ(水色)』のヘッダーをホームページに表示させる設定をしてみたいと思います。

ADD CONDITIONをクリック

『 Add Condition』をクリックします。

INCLUDE / Entire Siteの表示になり、他のヘッダーがすでに設定されているという内容の表示が出る

するとこの様に、
『Elementor recognized that you have set this location for other templates:(ヘッダー名)』
『すでに(ヘッダー名)がサイトにこの場所(※このサンプルではサイト全体)に表示される様に設定されています。』
という内容のメッセージが出ますので、

▼をクリック・Singularを選択

『Entire Site』の左側の▼をクリックします。
すると、

  • Entire Site:サイト全体
  • Archives :アーカイブページ
  • Singular  :特定のページ

の表示が出るので、『Singular』を選択します。

All Singularの左側の▼をクリック

するとこの様に『 INCLUDE / Singular / All Singular』と表示が変わりました。
このまま何も変更せずに『SAVE& CLOSE』をクリックすれば、ホームページ以外の全てのページのヘッダーが『きのこ(水色)』に設定されますが、このサンプルではホームページのみに表示をさせたいので、『All Singular』の左側の▼をクリックします。

『Front Page』を選択

するとこの様にページのリストが表示されますので『Front Page』を選択します。

INCLUDE / Singular / Front Pageの設定でSAVE&CLOSE

設定が『INCLUDE / Singular / Front Page』となりました。
これは『きのこ(水色)のヘッダーをホームページに含める(表示させる)』という意味になります。
最後に『SAVE&CLOSE』をクリックします。

SAVE&CLOSEをクリックした後の表示画面

するとこちらの画面に戻ります。
きのこ(水色)の状態が『Instance : Front Page』に変わり、こちらがホームページに設定されたことがわかります。

ヘッダー変更後のホームページの表示画面

こちらはサイトのホームページです。
きのこ(水色)のヘッダーが表示されています。

Aboutページの表示画面
Aboutページ
Contact usのページの表示画面
Contact usページ

尚、AboutページやContact usページを見てみると、ヘッダーは元のヘッダー『きのこ(オレンジ)』のままです。
こちらの記事では全てお見せするのを割愛しますが、ホームページ以外のページ全てにこちらのヘッダーが表示されます。

特定のページでヘッダーを表示させないようにする方法

Contact usのページの表示画面

では、『Contact us』のページはヘッダーを表示させないように設定をしてみたいと思います。

テーマビルダーの『Header』ページ・Edit Conditions

テーマビルダーの『Header』のページへ行き、『Contact us』と同じ『きのこ(オレンジ)』のヘッダーの下にある『Edit Conditions』をクリックします。

※こちらのページへの行き方は、この記事の『テーマビルダーで別のヘッダーをサイトに追加する』のセクションで詳しく説明していますのでそちらを参考にしてください。

 Display Conditions画面

『Edit Conditions』をクリックすると、この様に直接『Display Conditions』の設定画面に行きます。

『ADD CONDITION』をクリックします。

※『きのこ(オレンジ)』のヘッダーはすでに『INCLUDE / Entire Site(サイト全体に表示する)』に設定をしていたため、上記の画像の様に最初から『INCLUDE / Entire Site』が表示されています。

 ADD CONDITIONをクリックした後の表示画面

するとこの様に、もう一つ『INCLUDE / Entire Site』が表示されますので、2つめの『INCLUDE』の左側にある+ボタンをクリックします。

 『EXCLUDE』を選択

すると、

  • INCLUDE : 含む
  • EXCLUDE : 除く

と表示されますので『EXCLUDE』を選択します。

『Singular』を選択

『EXCLUDE / Entire Site』という表示になりますので、『Entire Site』の右側の▼をクリックし、『Singular』を選択します。

『All Singular』の横の▼をクリック

すると『EXCLUDE / Singular / All Singular』という表示になりますので、『All Singular』の右側の▼をクリックします。

ページのリスト・『固定ページ』を選択

すると上記画面の様に各ページのリストが表示されますので、『固定ページ』を選択します。

『固定ページ』のリストを参照する

すると『EXCLUDE / Singular / 固定ページ / All』と表示されますので『All』の右側の▼をクリックするとページを絞り込むテキストバーが表示されますので、ページ名やキーワードなど、何か1文字以上を入力します。

固定ページのリストから『Contact us』ページを選択

するとこの様に、ページのリストが表示されますのでそこから必要なページを選択します。

Display Conditions設定後の画面・『EXCLUDE / Singular / 固定ページ / Contact us』

2つ目のCONDITIONの設定が、
『 EXCLUDE / SIngular / 固定ページ / Contact us』になりました。
これは『Contact us』のページでは『きのこ(オレンジ)』のヘッダーは使用しない。』という意味になります。

SAVE&CLOSEをクリック

そして『SAVE&CLOSE』をクリックします。

Display Conditions編集後の『Contact us』ページ表示画面
Contact usページ

こちらは実際のサイトの『Contact us』のページの表示画面です。
ヘッダーはテーマビルダーのものではなく、Wordpressのテーマで設定したものが反映されています。

Aboutページ
Aboutページ
Mushroomページ
Mushroomページ

尚、 AboutページやMushroomのページ、は『きのこ(オレンジ)』のヘッダーが表示されています。
※こちらでは画像等割愛していますが、きのこ(オレンジ)のヘッダーは『INCLUDE / Entire Site』で設定もしているのでホームとContact usページ以外のサイト全体で表示されています。

ホームページ
ホームページ

そしてホームページは『きのこ(水色)』のヘッダーを『INCLUDE / Singular / Front Page(ホームページに『きのこ(水色)』のヘッダーを表示させる)』と設定をしているのでこちらの表示になります。

この様に『CONDITION』の組み合わせで特定のページにだけヘッダーを表示させたりさせなかったり、特定のページに別のヘッダーを表示させることが可能になります。

Display Conditionsの設定を解除したにも関わらず警告メッセージがでる時

Display Conditions で現在のサイト全体のヘッダー(INCLUDE / Entire Site)は『きのこ(オレンジ)』に設定していましたが、やはり『きのこ(ピンク)』のヘッダーに変更をしたいと思い、『きのこ(オレンジ)』のDisplay Conditionsは解除をしました。

Didplay Conditions画面・警告メッセージ

すると
Elementor recognized that you have set this location for other templates:きのこ(オレンジ)
という警告が、きのこ(オレンジ)の設定を解除したにも関わらずに表示されました。

しかし、この警告は無視して大丈夫です。
パソコン次第でこの警告が実際にはないのに出てしまうことがあります。
もちろん警告が出ないものもあります。
そのまま設定を続行してもきちんと設定はサイトに反映されますので心配いりません。

更に細かい設定例①・INCLUDE / EXCLUDEはいくつでも追加できる

テーマビルダー・Header画面

では、こちらの『きのこ(ピンク)』のヘッダーの Display Conditionsをサンプルに、さらに細かい設定例をお見せします。

Display Conditions・未設定の画面

現在の設定は何もされていない状態です。
『ADD CONDITION』をクリックします。
すると『INCLUDE / Entire Site』と表示が出て、下の方に『きのこ(オレンジ)と設定が被っています。』というメッセージが出るのは『特定のページのヘッダーを変更する方法』のセクションで説明した通りです。

Display Conditions・Archiveを選択

こちらのサンプルでは、『Archives』を選択してみたいと思います。

INCLUDE/Archives/All Archives

すると、このように『INCLUDE / Archives / All Archives』と表示されます。
このまま『SAVE&CLOSE』をクリックすれば、全てのアーカイブページで『きのこ(ピンク)』のヘッダーが表示されますが、こちらのサンプルではアーカイブ記事の中の『カテゴリー』ページのみに『きのこ(ピンク)』を表示させる様に設定してみます。

『All Archives』の右側の▼をクリックします。

※Elementor recognized that you have set this location for other templates: きのこ(水色)と警告が出ていますが、実際には設定解除済みなのでこれは無視します。
こちらの警告について『Display Conditionsの設定を解除したにも関わらず警告メッセージがでる時』のセクションで詳しく説明をしていますのでそちらを参考にしてください。

Archives内のカテゴリーを選択

するとこの様にアーカイブページのリストが表示されるので、そこから『カテゴリー』を選択します。

設定『INCLUDE/Archives/カテゴリー/All』:全てのカテゴリーページで表示させる

『INCLUDE / Archives / カテゴリー/ All』
全てのカテゴリーページで『きのこ(ピンク)』を表示させる。
という設定になりました。

では、カテゴリーページの中の特定の記事だけには『きのこ(ピンク)』を表示させない様にするにはどうしたらいいでしょうか。

設定『EXCLUDE/Archives/カテゴリー/ねこ』:ねこのカテゴリーページには表示させない

『 ADD CONDITION』でもう一つCONDITIONを追加し、
『EXCLUDE / Archives / カテゴリー / ねこ』としてみました。
これは、カテゴリー記事の中の『ねこ』でカテゴライズされた記事には『きのこ(ピンク)』は表示されず、それ以外の全てのカテゴリー記事では『きのこ(ピンク)』が表示されるということです。

また更に、CONDITIONを追加していくことも可能です。

設定『 INCLUDE/Singular/404 Page』:404ページにも表示させる

例えば上記画面の様に『INCLUDE / Singular / 404 Page』とすれば、
『404ページに『きのこ(ピンク)』を表示させる。』
といった様に、一つのヘッダーで他に使用しているヘッダーの設定と被らない範囲であればいくつでも『INCLUDE / EXCLUDE』を追加していくことが可能です。

更に細かい設定例②・投稿者によりヘッダーを使い分ける

例えば、サイトに複数の投稿者がいる場合、投稿者ごとにヘッダーを使い分けることも可能です。
では、サンプルとしてサイトに投稿者が2人いる設定でDisplay Conditionsを設定してみたいと思います。

テーマビルダー・『Header』の画面

サンプルでは、

  • きのこ(オレンジ):投稿者①
  • きのこ(水色)  :投稿者②

でヘッダーを設定してみます。

Display Conditions画面

『ADD CONDITION』をクリックします。

設定『INCLUDE/Singular/By Author』

『INCLUDE / Singular 』を選択し、『By Author』を選択します。
※Authorとは、英語で『著者』という意味です。

Author(投稿者名)の選択

すると『INCLUDE / Singular / By Author / All』と表示されるので、『All』の右側の▼をクリックし、投稿者名を絞り込むテキストバーが表示されます。
そこに投稿者名やキーワードを入力するとこの様に投稿者名のリストが出てくるので、そこから『投稿者①』を選択します。

設定『INCLUDE/Singular/By Author/投稿者①』:全ての投稿者①のページで表示させる

『INCLUDE / Singular / By Author / 投稿者①』となったら『SAVE&CLOSE』をクリックします。

次に『きのこ(水色)』のDisplay Conditionsの設定です。

Author(投稿者名):投稿者②を選択

こちらは『きのこ(水色)』のDisplay Conditionsです。
行程は『投稿者①』を設定した時と同じで、ここでは投稿者名を『投稿者②』にするだけです。

設定『INCLUDE/Singular/By Author/投稿者②』:全ての投稿者②のページで表示させる

『INCLUDE / Singular / By Author / 投稿者②』で『SAVE&CLOSE』をクリックします。

別々のヘッダーそれぞれでDisplay Conditionsの『By Author』の設定をすることにより、全てのその投稿者が関わるページのヘッダーが、設定した投稿者のヘッダーに変わる様になります。

その他のAuthor設定・投稿By Author/固定ページBy Author/メディアBy Author

また、こちらのサンプルでは『By Author』の設定を説明しましたが、他にも

  • 投稿 By Author
  • 固定ページ By Author
  • メディア By Author

と更に選択がありますので、より細分化した設定も可能になります。


こちらのサンプルでは、『ヘッダー』をサンプルにして『Display Conditions』の設定の仕方を紹介しましたが、ヘッダーに限らずテーマビルダーの他のパーツ、ポップアップでも『Display Conditions』の設定の仕方は全く同じなので、ページごとの細かい表示設定でぜひ『Display Conditions』を活用してください!

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

目次

コメントを残す

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

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。