こんにちは、Hodaです。
皆さん、WordPressでElementorを使っいて、Elementorを部分的に使いたいって思ったことはないでしょうか？原則としてElementorでページ制作をする場合、ページ全体をElementorで作成することになります。
しかし、Dynific Global Templates という無料プラグインを使うことで、ショートコードで簡単にElementor をその箇所だけで表示することができます。
メモ
ちなみに、Elementorの有料プランであれば、デフォルトでショートコードを使うことができます。今回はElementorの無料版を利用している方の代替案としてご紹介します。
Dynific Addons for Elementor とは？
Dynific Addons for Elementorは、Elementorで作成したデザインをテンプレートとして保存し、WordPressサイト内の好きな場所で再利用できるプラグインです。
以前は「Anywhere Elementor」という名前で提供されていた人気プラグインで、現在はDynific Addons for Elementorへと名称が変更されています。
通常、Elementorでページを編集する場合は、そのページ全体をElementorで制作することが多いですが、Dynific Addonsを使えば、Elementorで作った特定のセクションだけを通常のWordPressページや投稿内に表示できます。
例えば、
- 記事途中に表示するCTA
- 共通のお知らせ
- キャンペーン用バナー
- 商品やサービスの紹介エリア
- 全ページ共通の案内ボックス
といったパーツをElementorで作成し、ショートコードを使って必要な場所に呼び出せます。
テンプレートはWordPress管理画面の「Dynific Templates」から作成でき、現在は基本的に以下のようなショートコードで表示します。
[dynific_template id="123"]
さらに便利なのが、一度作ったテンプレートを複数ページで共有できる点です。テンプレート側を修正すれば、それを使用しているすべてのページに変更が反映されるため、サイト共通パーツの管理も簡単になります。
無料版のElementorでも利用できるため、「ページ全体をElementor化するほどではないけれど、一部分だけElementorで自由にデザインしたい」という場合には非常に便利なプラグインです。
Dynific Addons for Elementor の使い方
まずは通常のプラグイン同様に、WordPress のプラグイン設定からインストールをします。インストールが完了したら、有効化をします。
有効化が完了したら、WordPress の管理画面から「Dynific Templates」をクリックします。
「Dynific Global Templates」のような画面になります。ここに、これから作成するテンプレートが表示されます。
新規で作成するには「Add New Dynific Template」のボタンをクリックします
Create Dynific Template
ボタンをクリックすると、ポップアップでこのように表示されます。一応、有料プランもあり、有料プランにすると動的なページも作成することができますが、基本的には無料プランで問題ありませんので、「Normal」をクリックします。
次に名前を付けることができますので、日本語でも問題ありません。わかりやすい名前を付けておきます。
名前を付けたら「Edit with Elementor」のボタンをクリックします。
あとは、通常通りElementorが開きますので、今回パーツとして作成したい部分をElementorで作成します。例えば、ページ共通で使う フッター部分のエリアなどを作成できます。
完成しましたら。「公開」をクリックします。
ショートコードを使う
公開して保存すると、「Dynific Global Templates」の画面に作成したテンプレートが表示されます。
あとは、このショートコードをWordPressの好きな場所に貼り付けることで表示することができます。
基本的に貼り付けができる場所は、投稿ページ、固定ページ、ウィジェットなどです。
Dynific Global Templatesを使う際の注意点
Dynific Global Templatesは、Elementorで作成したデザインをショートコードで好きな場所に表示できる便利な機能ですが、すべてのWordPress環境で必ず同じように表示されるとは限りません。
特に注意したいのが、利用しているWordPressテーマや他のプラグインとの競合です。
Dynific Global Templatesで呼び出したコンテンツは、表示先ページのテーマやCSS、JavaScriptの影響も受けます。そのため、Elementorの編集画面では正しく表示されていても、実際の記事内にショートコードを設置すると、余白や文字サイズ、横幅などが変わってしまう場合があります。
また、キャッシュ・高速化プラグインやCSS／JavaScriptを最適化するプラグインとの組み合わせによっては、Elementorに必要なスタイルやスクリプトが正常に読み込まれず、レイアウトが崩れたり、一部のウィジェットが動作しなかったりする可能性もあります。
特に以下のような場合は、公開前に実際のページで表示を確認しておくことをおすすめします。
- 独自CSSが多く設定されているテーマを利用している
- CSSやJavaScriptの圧縮・遅延読み込みを行っている
- キャッシュプラグインを利用している
- Elementor以外のページビルダー系プラグインを併用している
- ポップアップやアニメーションなどJavaScriptを使うウィジェットを配置している
表示がおかしい場合は、まずキャッシュを削除したうえで、他のプラグインを一時的に無効化して原因を切り分けてみるとよいでしょう。
また、サイト全体のレイアウトをDynific Global Templatesに大きく依存させるよりも、CTAや告知エリアなど、部分的にElementorを使いたい場面で利用するほうがトラブルも少なく、扱いやすいでしょう。
Swellテーマでも使えることは確認
有名なテーマである「Swell」のテーマで使えるか確認したところ、僕の環境では問題なく使うことができました。これによって、基本的にはSwell のブロックを使ってページを作成して、一部だけElementorのブロックを表示するというハイブリッド型のページも作成できますね！
まとめ
Dynific Addons for Elementor の Global Templates を使えば、Elementorの無料版でも、作成したデザインをショートコードで投稿や固定ページの好きな場所に表示できます。
特に、普段はSwellなどのWordPressテーマでページを作成しつつ、「この部分だけElementorで自由にデザインしたい」という場合には非常に便利です。CTAや共通バナー、フッター周辺のパーツなど、一度作成したデザインを複数ページで使い回せるのも大きなメリットですね。
テーマやプラグインとの組み合わせによっては表示崩れが起こる可能性もあるため、公開前の確認は必要ですが、Elementorをサイト全体ではなく部分的に活用したい方は、ぜひ試してみてください。
