テンプレートの使い方

更新日: 2022/06/19

Elementorテンプレートの使い方を解説します。

ショップのご利用ガイドについてはこちらをご覧ください。

無料テンプレートはこちら

以下のダウンロードリンクから無料テンプレートをダウンロードできます。

無料テンプレートをダウンロードする

ダウンロードしていただいたzipファイルの中に、xxx.jsonというファイルがあります。こちらがテンプレートファイルとなります。

動作環境について

ホムペディアストアで販売中のテンプレートはElementorがインストールでき、正しく動作する状態であればどのWordpressテーマでも使用可能です。現在ご使用中のテーマでも使えます。

Elementorの動作環境はこちらのようになっています。

動作環境

  • Wordpress5.2以上
  • PHP7.0以上
  • MySQL5.6もしくはMariaDB10.0以上
  • Wordpressのメモリ制限が128MB以上(256MB以上推奨)
  • サーバーに正しいフォルダー権限が付与されていること
  • 対応ブラウザはChrome,Firefox,Safari,Edgeのバージョン79以上

詳細については公式ページのこちらをご覧下さい。

ダウンロードしたテンプレートを使用する方法

テンプレートを使用するために以下の作業が必要になります。

  1. 必要なプラグインをインストールする
  2. Elementorの設定
  3. テンプレートをインポートしてページに挿入
  4. ヘッダーとフッターの作成
  5. ContactForm7の設定(必要な場合のみ)

無料テンプレートでは1~4で作業が完了します。テンプレートの必須プラグインに「Contact Form 7」がある場合は5の作業を行なってフォームをインポートしてください。

1.必要なプラグインをインストールする

まずは必要なプラグインをインストールしてください。必要なプラグインは商品ページの仕様にある「必須プラグイン」をご覧ください。

無料テンプレートの場合、必要なプラグインは次の2つです。インストール方法は通常のWordpressプラグインのインストール方法と同じです。

  • Elementor
  • Elementor Header&Footer

Wordpressの管理画面メニューにある「プラグイン」の「新規追加」を押してプラグイン追加画面に移動します。

ホムペディアストア プラグインのインストール方法 新規追加

「キーワード」の横にある入力フォームに必要なプラグインの名前を入力します(この場合はElementor)。すると自動的に検索されるので一番上に表示されたプラグインの「今すぐインストール」を押します。

ホムペディアストア プラグインのインストール方法 今すぐインストール

インストールが完了すると「有効化」ボタンに変わるのでボタンを押します。

ホムペディアストア プラグインのインストール方法 有効化

「Elementor Header&Footer」プラグインも同様にインストールしてください。

2.Elementorの設定

プラグインのインストールが完了したら次はElementorの設定を行います。

Elementorの初期設定ではjsonファイルとsvgファイルのアップロードが拒否されています。テンプレートファイルはjson形式になっているため、設定を変更してアップロードができるようにする必要があります。

「Elementor -> 設定 -> 高度な設定」にある「フィルタリングされていないファイルのアップロードを有効化」を「有効化」に変更してください。変更を保存ボタンで保存すれば設定は完了です。

Elementorのテンプレートインポート作業の前にjsonファイルのアップロード許可が必要

テンプレートのアップロードが完了したら設定を元に戻しておきましょう。

3.テンプレートをインポートしてページに挿入

まずはWordpressの管理画面から新しく固定ページを作成し、「Elementorで編集」ボタンを押します。

ホムペディアストア インポート方法 Elementorテンプレート2

次にElementor編集画面の中央にある「フォルダアイコン」を押してテンプレートライブラリを開きます。

ホムペディアストア インポート方法 Elementorテンプレート4

テンプレートライブラリを開いたら、右上にある「矢印アイコン」を押してインポート画面を開きます。

ホムペディアストア インポート方法 Elementorテンプレート5

インポート画面でインポートボタンを押して、ファイルを選択します。先ほどダウンロードしたテンプレートのzipファイルを解凍して、その中にある「elementor-商品名.json」を選択してください。

無料テンプレートの場合は「elementor-free_#1.json」のようになっているものを選択してください。

ホムペディアストア インポート方法 Elementorテンプレート6

データをインポートするとライブラリのテンプレートタブにインポートしたデータが表示されます。もし表示されない場合は、右上にある更新アイコンを押して、画面を更新してください。

表示されたデータの「挿入」を押すとテンプレートを挿入することができます。

ホムペディアストア インポート方法 Elementorテンプレート7

テンプレートを挿入すると、ページにインポートしたテンプレートが表示されます。

ホムペディアストア インポート方法 Elementorテンプレート8

インポートできたらElementor編集画面の左下にある「更新」ボタンを押して保存します。

テンプレートデータのインポートはこれで完了です。固定ページを表示して正しく表示されているか確認することができます。

4.ヘッダーとフッターの作成

最後にヘッダーとフッターの作成を行います。

「外観 -> Elementor Header&Footer Builder」でヘッダーとフッターの一覧画面を表示します。

ホムペディアストア ヘッダーとフッターの作成1

ヘッダーを作成する

まずはヘッダーを作成します。画面の上にある「Add New」ボタンを押して新しくテンプレートを作成します。

新規作成ページでは以下のように設定してください。

  • タイトル: テンプレート名を入力(画像ではヘッダーと入力しています)
  • Type of Template: 「Header」を選択
  • Display On: 「Entire Website」を選択
  • User Roles: 「All」を選択

ホムペディアストア ヘッダーとフッターの作成2

設定できたら「Elementorで編集」ボタンを押してElementorの編集画面を開きます。

テンプレートのインポートと同じ方法でヘッダーテンプレートをインポートできます。まずはフォルダアイコンを押してライブラリを開きます。

テンプレートライブラリを開いたら、右上にある「矢印アイコン」を押してインポート画面を開きます。

ホムペディアストア インポート方法 Elementorテンプレート5

インポート画面でインポートボタンを押して、ファイルを選択します。「elementor-商品名_header.json」を選択してください。

無料テンプレートの場合は「elementor-free_#1_header.json」のようになっているものを選択してください。

ホムペディアストア インポート方法 Elementorテンプレート6

データをインポートするとライブラリのテンプレートタブにインポートしたデータが表示されます。表示されたデータの「挿入」を押してヘッダーテンプレートを挿入してください。

ホムペディアストア インポート方法 Elementorテンプレート7

インポートできたらElementor編集画面の左下にある「更新」ボタンを押して保存します。

フッターを作成する

最後にフッターを作成します。テンプレート一覧画面に戻り、先ほどと同じように「Add New」ボタンで新規作成ページを開きます。

新規作成ページでは以下のように設定してください。

  • タイトル: テンプレート名を入力(ここではフッター)
  • Type of Template: 「Footer」を選択
  • Display On: 「Entire Website」を選択
  • User Roles: 「All」を選択

設定できたら「Elementorで編集」ボタンを押してElementorの編集画面を開きます。

テンプレートのインポート方法は先ほどと同じです。

インポートするファイルは「elementor-商品名_footer.json」を選択してください。

無料テンプレートの場合は「elementor-free_#1_footer.json」のようになっているものを選択してください。

インポートできたらElementor編集画面の左下にある「更新」ボタンを押して保存してください。

5.ContactForm7の設定

LPテンプレートではフォームプラグインの「Contact Form 7」を使用している場合があります。

デモページで表示されているようなフォームを正しく表示するにはファイルのインポートが必要です。

ダウンロードファイル内にある「contact-form-7.xml」をWordpress管理画面の「ツール -> インポート」からインポートしてください。

ホムペディアストア 5.ContactForm7の設定1

インポートが完了すると「お問い合わせ -> コンタクトフォーム」にフォームが追加されます。

ホムペディアストア 5.ContactForm7の設定2

フォームはElementorテンプレート内ですでに設置されています。固定ページを表示してフォームが正しく表示されていることを確認してください。

ページの確認

ここまででテンプレートのインポート作業は完了です。作成したページを確認して正しく表示されているか確認してみてください。

画像は商品に含まれないためダミー画像が表示されます。

テンプレートがインポートできたのでこの後はカスタマイズを行っていただくことでページが完成します。

カスタマイズについて

カスタマイズ方法についてはこちらのブログ記事をご覧ください。

Elementorの使い方