Elementorテンプレートの使い方を解説します。
ショップのご利用ガイドについてはこちらをご覧ください。
無料テンプレートはこちら
以下のダウンロードリンクから無料テンプレートをダウンロードできます。
ダウンロードしていただいたzipファイルの中に、xxx.jsonというファイルがあります。こちらがテンプレートファイルとなります。
動作環境について
ホムペディアストアで販売中のテンプレートはElementorがインストールでき、正しく動作する状態であればどのWordpressテーマでも使用可能です。現在ご使用中のテーマでも使えます。
Elementorの動作環境はこちらのようになっています。
動作環境
- Wordpress5.2以上
- PHP7.0以上
- MySQL5.6もしくはMariaDB10.0以上
- Wordpressのメモリ制限が128MB以上（256MB以上推奨）
- サーバーに正しいフォルダー権限が付与されていること
- 対応ブラウザはChrome,Firefox,Safari,Edgeのバージョン79以上
詳細については公式ページのこちらをご覧下さい。
ダウンロードしたテンプレートを使用する方法
テンプレートを使用するために以下の作業が必要になります。
- 必要なプラグインをインストールする
- Elementorの設定
- テンプレートをインポートしてページに挿入
- ヘッダーとフッターの作成
- 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 -> 設定 -> 高度な設定」にある「フィルタリングされていないファイルのアップロードを有効化」を「有効化」に変更してください。変更を保存ボタンで保存すれば設定は完了です。
テンプレートのアップロードが完了したら設定を元に戻しておきましょう。
3.テンプレートをインポートしてページに挿入
まずはWordpressの管理画面から新しく固定ページを作成し、「Elementorで編集」ボタンを押します。
次にElementor編集画面の中央にある「フォルダアイコン」を押してテンプレートライブラリを開きます。
テンプレートライブラリを開いたら、右上にある「矢印アイコン」を押してインポート画面を開きます。
インポート画面でインポートボタンを押して、ファイルを選択します。先ほどダウンロードしたテンプレートのzipファイルを解凍して、その中にある「elementor-商品名.json」を選択してください。
無料テンプレートの場合は「elementor-free_#1.json」のようになっているものを選択してください。
データをインポートするとライブラリのテンプレートタブにインポートしたデータが表示されます。もし表示されない場合は、右上にある更新アイコンを押して、画面を更新してください。
表示されたデータの「挿入」を押すとテンプレートを挿入することができます。
テンプレートを挿入すると、ページにインポートしたテンプレートが表示されます。
インポートできたらElementor編集画面の左下にある「更新」ボタンを押して保存します。
テンプレートデータのインポートはこれで完了です。固定ページを表示して正しく表示されているか確認することができます。
4.ヘッダーとフッターの作成
最後にヘッダーとフッターの作成を行います。
「外観 -> Elementor Header&Footer Builder」でヘッダーとフッターの一覧画面を表示します。
ヘッダーを作成する
まずはヘッダーを作成します。画面の上にある「Add New」ボタンを押して新しくテンプレートを作成します。
新規作成ページでは以下のように設定してください。
- タイトル: テンプレート名を入力（画像ではヘッダーと入力しています）
- Type of Template: 「Header」を選択
- Display On: 「Entire Website」を選択
- User Roles: 「All」を選択
設定できたら「Elementorで編集」ボタンを押してElementorの編集画面を開きます。
テンプレートのインポートと同じ方法でヘッダーテンプレートをインポートできます。まずはフォルダアイコンを押してライブラリを開きます。
テンプレートライブラリを開いたら、右上にある「矢印アイコン」を押してインポート画面を開きます。
インポート画面でインポートボタンを押して、ファイルを選択します。「elementor-商品名_header.json」を選択してください。
無料テンプレートの場合は「elementor-free_#1_header.json」のようになっているものを選択してください。
データをインポートするとライブラリのテンプレートタブにインポートしたデータが表示されます。表示されたデータの「挿入」を押してヘッダーテンプレートを挿入してください。
インポートできたら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管理画面の「ツール -> インポート」からインポートしてください。
インポートが完了すると「お問い合わせ -> コンタクトフォーム」にフォームが追加されます。
フォームはElementorテンプレート内ですでに設置されています。固定ページを表示してフォームが正しく表示されていることを確認してください。
ページの確認
ここまででテンプレートのインポート作業は完了です。作成したページを確認して正しく表示されているか確認してみてください。
画像は商品に含まれないためダミー画像が表示されます。
テンプレートがインポートできたのでこの後はカスタマイズを行っていただくことでページが完成します。
カスタマイズについて
カスタマイズ方法についてはこちらのブログ記事をご覧ください。