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