Elementor のテンプレートは JSON として保存されています。つまり HTML ページを、他の Elementor テンプレートと同じようにインポートできる JSON テンプレートファイルに変換できるということです。持ち運びができ、再利用でき、クリップボードにも依存しません。ここでは JSON を使う方法の仕組みと、それを選ぶべき場面を説明します。
2つのエクスポート形式、同じコンポーネント
HTML を変換したあと、エクスポートの方法は2通りあります。Elementor データをコピーは、開いているエディターにすぐ貼り付けられるよう、JSON ペイロードをクリップボードに格納します。JSON テンプレートをダウンロードは、それとまったく同じ構造を .json ファイルとして保存します。コンポーネントは同一で、違いは、ファイルなら持ち運べるのに対し、クリップボードのペイロードは持ち運べないという点です。
JSON ファイルが適しているケース
- サイトをまたいだ再利用。Elementor が入っている WordPress であれば、どこでも同じファイルをインポートできます。
- バージョン管理。ファイルはプレーンな JSON なので、リポジトリで管理したり、2つのエクスポートの差分を取ったり、特定の日付時点のデザインをアーカイブしたりできます。
- 共有。同僚やクライアントにファイルは送れますが、クリップボードは送れません。
- ライブラリの構築。名前を付けた JSON テンプレートをフォルダにまとめれば、今後のページを組み立てるためのコンポーネントライブラリになります。
Elementor に JSON テンプレートをインポートする方法
- HTML を変換し、JSON テンプレートをダウンロードをクリックします。
- WordPress でテンプレート → 保存済みテンプレートを開きます。
- テンプレートをインポートをクリックし、
.jsonファイルを選択します。 - テンプレートがライブラリに表示されます。Elementor のライブラリボタンから、どのページにも挿入できます。
JSON の中身
このファイルが記述しているのは Elementor の要素ツリーです。レイアウト・背景・ボーダー・余白の設定を持つコンテナと、コンテンツやスタイルの設定を持つウィジェットで構成されます。Elementor ネイティブの形式なので、すべてが HTML ブロックではなく編集可能なウィジェットとしてインポートされます。見出し、テキスト、画像、ボタン、アイコンボックス、画像ボックス、グリッドのいずれも、すぐに編集できる状態で取り込まれます。
実用上の注意点を1つ。JSON 内の画像の参照は URL であり、ファイルが埋め込まれているわけではありません。ソースが実際のメディアライブラリの URL を使っていればインポート時にそのまま解決されますが、ローカルパスや Base64 画像は空のプレースホルダーになるため、後から画像を入れることになります。JSON テンプレートをきれいにインポートするために必要な変更は、画像を先にアップロードしておくこと、ただそれだけです。
保存する前にテンプレートをサイト非依存にする
色やフォントをハードコードしたテンプレートは、次にインポートしたサイトでおかしな見た目になります。再利用するつもりのブロックは、エクスポートする前に移行先サイトのカラーを継承と移行先サイトのグローバルフォントを継承で変換してください。そうすればテンプレートはインポート先のサイトで定義されたパレットとフォントをそのまま採用するので、同じ JSON がどこにインポートしてもそのサイト本来のデザインになじみます。
構造をクリーンに保つ
再利用しやすいテンプレートとは、最上位のコンテナが1つで、その中のツリーが浅いものです。エクスポートする前に構造マップを確認してください。ネストの深さが浅く、カードの行が、カードごとに個別のコンテナで包まれているのではなく、ウィジェットを直接配置したグリッドになっていれば、インポート後のスタイル変更がはるかに楽になります。クリーンな入力からはクリーンな JSON が生まれます。
ファイルの実際の構造
仕組みに謎めいたところはなく、各フィールドの意味がわかれば、この形式への苦手意識もずっと薄れます。ダウンロードしたテンプレートは、5つのキーを持つ1つの JSON オブジェクトです。
content— 要素ツリー。コンテナとウィジェットで構成され、それぞれが自身の設定を持ちます。page_settings— ページ単位の設定。変換したブロックでは空です。version—"0.4"。Elementor のテンプレートスキーマのバージョンです。title— テンプレートのタイトル欄に入力した内容。未入力の場合は「HTML Converted Page」になります。type—"page"。
このうち理解しておく価値があるのは type の値です。テンプレートをセクションではなくページとして宣言しているため、保存済みテンプレートにはページテンプレートとして登録されます。それでもライブラリボタンから既存のどのページにも挿入できるので失うものはありませんが、そこから空白のページを直接作り始めることもできるようになります。
クリップボードのペイロードが違って見える理由
コピーボタンがクリップボードに入れる内容を調べてみると、それは同じオブジェクトではありません。type: "elementor"、siteurl、そして elements 配列を持ち、version も title もありません。
これは Elementor のテンプレート形式ではなく、貼り付け用の形式です。右クリックして他のサイトから貼り付けを選ぶと、エディターはまさにこのマーカーを探して、クリップボードの中身をプレーンテキストではなく Elementor データだと認識します。インポートの手順なしで貼り付けが機能するのはこのためであり、同時に、クリップボードのペイロードをファイルに保存してインポートすることができない理由でもあります。2つの形式は同じコンポーネントを記述していても、互いに置き換えはできません。
プレーンな JSON だから本格的なバージョン管理ができる
このファイルはバイナリのバンドルではなく人が読める JSON なので、ソースコードと同じように扱えます。そのおかげで、ページのセクションではめったに行われないものの、実際に役立つことがいくつかできるようになります。
- 2つのエクスポートの差分を取る。ブロックを変換し、ソースを変更してもう一度変換し、ファイルの差分を取れば、どの設定が変わったのかが正確にわかります。特定の変換オプションが実際に何を変えるのかを理解するには、これが群を抜いて速い方法です。
- ある時点のデザインをアーカイブする。日付付きの JSON ファイルは、セクションがどんな見た目だったかの正確な記録です。公開中のページが原形をとどめないほど編集されたずっと後でも復元できます。
- インポート前にレビューする。ファイル内を
httpで検索すれば、参照しているすべての画像 URL がわかり、別のサイトにきれいにインポートできるかどうかがすぐに判断できます。
最後の方法は10秒で済み、最もよくあるインポートの失敗、つまりインポート先から到達できないサイトを指す URL だらけのテンプレートを見つけ出せます。
コピーかダウンロードか — 簡単な基準
今まさに編集中のページに一度だけ挿入する場合は、クリップボードのデータを貼り付けます。複数回インポートするもの、共有するもの、保管しておくものには、JSON ファイルをダウンロードします。同じ変換で、行き先は2つ。持ち運べることが必要かどうかで選びましょう。