目標：Elementor Digital AgencyのテンプレートキットとHello Themeを使用した完全なウェブサイトを作成します。
ホームページは以下のようなページ構成になります。
- ホーム
- 会社概要
- サービス内容
- ソーシャルメディア
- クライアント
- シングルポストのアーカイブ
- お問い合わせ
- ヘッダーとフッター
- 404ページ
ステップ１：テーマを選ぶ
- 「外観」>「テーマ」へ
- 新規追加をクリックします。
- Hello Elementor（ハローエレメンター）を検索
- インストールをクリックします。
- アクティブ化をクリックします。
ステップ２：ページの作成
- 固定ページ > すべてのページへ移動
- もしWordPressデフォルトで存在するサンプルページがあれば、削除します。
- 新規追加をクリックします。
- 新しいページに名前をつけます。
- Elementorで編集ボタンをクリックします。
- ウィジェットパネルの左下にあるページ設定の歯車をクリックします。
- ページレイアウトを「エレメンター全幅」に変更します。ヘッダーが不完全であることに注意してください。これについては後のステップで説明します。
- テンプレート追加フォルダのアイコンをクリックして、テンプレートライブラリを開きます。
- テンプレートライブラリの検索ボックスから「Digital Agency Home（デジタルエージェンシーホーム）」を検索します。
- 「挿入」をクリックして、テンプレートをページに読み込みます。
- 公開ボタンをクリックします。
- 公開されたページを見るには、「見てみる」をクリックします。
これらの手順を新しいページごとに繰り返し、「会社情報」、「サービス」、「ソーシャルメディア」、「クライアント」、「お問い合わせ」の各ページを必ず追加してください。
ヒント
Macの場合はcommand + E、Windowsの場合はCTRL + Eを押してFinderを開き、"Add "と入力して検索結果から "New Page "を選択して新しいページを作成します。このようにして、ダッシュボードに戻ることなく、Elementorのエディタから直接新しいページを作成し続けることができます。
注意：
ニュースページはまだ作成されていません。これは他のページのように静的なページではないからです。これは動的コンテンツを持つアーカイブページであり、続いてこのページを作成することになります。
ステップ３：WordPress にどのページをホームページとして使用するか設定する
- WordPressのダッシュボードから「設定」→「表示設定」と進み、「ホームページの表示：」のオプションを「固定ページ」に変更し、「ホームページ」のドロップダウンリストから上記の手順で作成したホームページを選択します。
- 「変更を保存」ボタンをクリックします。
- ページ > すべてのページに移動し、作成したホームページの横に「フロントページ」と表示されていることを確認します。
ステップ４：Elementorのテーマビルダーを使ってヘッダーを挿入する PRO版
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、”Theme Builder “を検索して選択します。
- 新規追加ボタンをクリックします。
- テンプレートタイプのドロップダウンから「ヘッダー」を選択します。
- テンプレートに“サイトヘッダー”のような名前をつけます。
- ライブラリでヘッダーテンプレートを開いたら、「Digital Agency（デジタルエージェンシー）」と検索します。
- デジタルエージェンシーのヘッダーにカーソルを合わせ、「挿入」リンクをクリックします。
注意：
新しいサイトのため、まだメニューを作成していません。そのため、先ほど挿入したヘッダーテンプレートに空のメニューウィジェットが表示されます。次にWordPressのメニューを作成します。
ステップ５：メニューの作成 PRO版
- command + E (Mac) または CTRL + E (Windows) を押して Finder を開き、「メニュー」を検索して選択すると、WordPress のメニューセクションにすばやく移動します。
- 「メニュー構造」の下に、”メインメニュー”のようなメニュー名を入力します。
- メニュー作成ボタンをクリックします。
- 「メニュー項目の追加] > 「ページ」 で、作成したページの横にチェックマークを付け、「メニューに追加」 ボタンをクリックします。
- ページを上下にドラッグして、必要に応じて並べ替えます。
- 子ページを少し右にドラッグして、親ページのすぐ下に子ページとしてアイテムを入れ子にします。ソーシャルメディアの場合は、「サービス」のすぐ下にある「ソーシャルメディア」を少し右にドラッグします。
- メニューの保存ボタンをクリックします。
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、「テーマビルダー」を検索して選択し、Elementorでヘッダーを編集します。
- 公開ボタンをクリックします。
- 条件追加ボタンをクリックします。
- 条件として「インクルード」>「サイト全体」を選択し、「保存して閉じる」ボタンをクリックします。
- ヘッダーにメニューが表示されるようになりました。
ステップ６：Elementorのテーマビルダーを使ってフッターを挿入する PRO版
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、”Theme Builder “を検索して選択します。
- 新規追加ボタンをクリックします。
- テンプレートタイプのドロップダウンから「フッター」を選択します。
- テンプレートにサイトフッターなどの名前を付けます。
- ライブラリでフッターテンプレートを開いたら、「Digital Agency（デジタルエージェンシー）」と検索します。
- デジタルエージェンシーのフッターにカーソルを合わせ、「挿入」リンクをクリックします。
- エディターにはヘッダーが表示されますが、実際に編集できるのはフッターのみです。
- 公開ボタンをクリックします。
- 条件の追加ボタンをクリックします。
- 条件として「インクルード」>「サイト全体」を選択し、「保存して閉じる」ボタンをクリックします。
ステップ７：ニュースアーカイブページのテンプレートを作成する PRO版
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、”Theme Builder “を検索して選択します。
- 新規追加ボタンをクリックします。
- テンプレートタイプのドロップダウンから「アーカイブ」を選択します。
- テンプレートに”ニュースアーカイブ”のような名前を付けてください。
- ライブラリでアーカイブテンプレートを開いたら、「Digital Agency（デジタルエージェンシー）」を検索してください。
- デジタル エージェンシー アーカイブ テンプレートにカーソルを合わせて、「挿入」リンクをクリックします。
- 公開ボタンをクリックします。
- 条件追加ボタンをクリックします。
- 条件として「インクルード」>「すべてのアーカイブ」を選択し、「保存して閉じる」ボタンをクリックします。
注意：
このサイトは新しいサイトのため、デフォルトの "Hello World "の投稿しかありません。新しい投稿を作成して、"News "というカテゴリ（この例では - 必要に応じて独自のカテゴリを使用してください）で、このテンプレートを使用するように設定する必要があります。次はそれを行います。
ステップ８：ニュースカテゴリに新しい投稿を作成する PRO版
- 投稿 > すべての投稿に行きます。
- 必要ならば、WordPressのデフォルトのインストールに付属しているHello Worldの投稿を削除します。
- 新規追加をクリックします。
- 名前を付けて、通常のように投稿を作成します。
- 必要であれば、アイキャッチ画像と抜粋を追加します。
- カテゴリの下で、新しいカテゴリの追加をクリックして、ニュースのような名前を付けます。
- 公開ボタンをクリックします。
- ニュースカテゴリに追加する必要がある各記事について、手順3から7を繰り返します。
- comman + E (Mac)またはCTRL + E (Windows)を押してFinderを開き、「ニュース」(またはカテゴリと設定したタイトル)を検索します。検索結果に表示されたカテゴリをクリックして、カテゴリページを表示します。新しい投稿がニュースアーカイブページにきれいに表示されていることを確認します。
- ニュースアーカイブページから投稿のタイトルをクリックします。
- スタイリングが理想的ではないことに注意してください。これは、次に行うシングルポストテンプレートを作成する必要があるためです。
ステップ９：シングルポストのテンプレートを作成する PRO版
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、”Theme Builder “を検索して選択します。
- 新規追加ボタンをクリックします。
- テンプレートタイプのドロップダウンから「シングル」を選択します。
- 投稿タイプのドロップダウンから「投稿」を選択します。
- テンプレートに名前をつけます。
- ライブラリでシングルポストのテンプレートを開いたら、「Digital Agency（デジタルエージェンシー）」と検索します。
- デジタルエージェンシーのシングルポストテンプレートにカーソルを合わせ、「挿入」リンクをクリックします。
- 公開ボタンをクリックします。
- 条件追加ボタンをクリックします。
- 条件として「含める」>「カテゴリに含める」>「ニュース」（または作成したカテゴリ名）を選択し、「保存して閉じる」ボタンをクリックします。
- 「見てみる」をクリックすると、シングルポストのテンプレートデザインを使用した投稿が表示されます。
ステップ10：ニュースアーカイブページをメニューに追加する PRO版
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、「メニュー」を検索してメニューに戻って編集します。
- 「メニュー項目の追加 > カテゴリ」で、ニュースカテゴリ（または作成したカテゴリ）の横にチェックマークを付け、「メニューに追加」をクリックします。
- 新しいメニュー項目を好きな場所にドラッグします。
- メニューの保存をクリックします。
ステップ11：404ページを作成する PRO版
- command + E（Mac）またはCTRL + E（Windows）を押してFinderを開き、”Theme Builder “を検索して選択します。
- 新規追加ボタンをクリックします。
- テンプレートタイプのドロップダウンから「シングル」を選択します。
- 投稿タイプのドロップダウンから「404ページ」を選択します。
- テンプレートに404などの名前を付けてください。
- ライブラリで404テンプレートを開いたら、「Digital Agency（デジタルエージェンシー）」と検索してください。
- デジタルエージェンシー404テンプレートにカーソルを合わせ、挿入リンクをクリックします。
- 公開ボタンをクリックします。
- 条件追加ボタンをクリックします。
- 条件として「インクルード」>「404ページ」を選択し、「保存して閉じる」ボタンをクリックします。
- サイトに存在しないページの URL をブラウザに入力すると、新しい 404 ページが表示されます。
ステップ 12：ニーズに合わせてコンテンツを編集する PRO版
完成しました！
Elementorのデジタルエージェンシーテーマキットを使って、まったく新しいウェブサイトを作成しました。これで完全なウェブサイトの構造ができましたので、ページのコンテンツを編集して、あなた自身の情報をすべて盛り込む準備ができています。