ワードプレス Diviの使い方３ レイアウトを使ったWebページ作成２

今回は Divi を使ったサイト（ Webページ ）作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。

Divi をインストールしていると、ページの編集時に Divi Builder を使うかときかれるので「 Use Divi Builder 」をクリックします。

Use Divi Builder をクリックすると下記のようにパネルが表示されます。レイアウトを使ってサイトを構築するので、真ん中の「 Browse Layouts 」をクリックします。

レイアウトライブラリからレイアウトを選択します。続きでの作成ですから、レイアウトライブラリから「 Fashion 」を選択します。

下図のように詳細が表示されます。今回は写真ギャラリーを作成するので、並んでいるアイコンから「 Gallery 」を選択します。これでよければ「 Use This Layout 」をクリックします。すでに前のページで Elegant Themes の認証が完了しているのでダウンロードがはじまります。

ダウンロードが完了すると、サンプルの写真がレイアウトされた状態で写真ギャラリーのページができあがります。

すでに前のページで写真の変更手順は伝えました。それと同様の操作にて変更を行いましょう。

画像設定のパネルが表示されるので、画像をクリックします。

メディアライブラリが開かれるので、ファイルをアップロードで写真を追加し、追加した写真を選択した状態で「画像をアップロードする」をクリックします。

写真が変更され、ギャラリーの写真の配置が自動で調整されます。「✔（チェックマーク）」をクリックし承認します。

同様の操作にて、写真を順次変更しましょう。上部にあるテキストも「 Photo Gallery 」に変更しましょう。

上記で説明した方法で固定ページに自己紹介のためのページを追加し、タイトルを「 About 」とします。 Divi Builder を使うので「 Use Divi Builder 」をクリックします。

上記で説明した方法で、今度は「 About 」のレイアウトを選択します。

今回は自己紹介のページを作成するので、並んでいるアイコンから「 About 」を選択します。これでよければ「 Use This Layout 」をクリックします。すでに前のページで Elegant Themes の認証が完了しているのでダウンロードがはじまります。

ダウンロードが終わると、下記のページが表示されます。ページの内容を自分の自己紹介に置き換えていきましょう。

テキスト設定でコンテンツの文字列を変更し「✔（チェックマーク）」をクリックし承認します。あるいは、文字列をクリックしカーソルを表示させ直接変更することも可能です。

上記ですでに説明した方法で写真モジュールの設定を変更しましょう。

必要のないセクションは削除します。

レイアウトを利用すると、以上の簡単な操作のみで簡単に「 About （自己紹介）」ページを作成することができます。

上記で説明した方法で固定ページに連絡先情報ためのページを追加し、タイトルを「 Contact 」とします。 Divi Builder を使うので「 Use Divi Builder 」をクリックします。

今回は連絡先情報のページを作成するので、並んでいるアイコンから「 Contact 」を選択します。これでよければ「 Use This Layout 」をクリックします。すでに前のページで Elegant Themes の認証が完了しているのでダウンロードがはじまります。

ダウンロードが終わると、連絡先情報のページが作成されます。この「 Contact 」のページで大きく違うのは、下記の赤枠の地図のモジュールがあることと、その下のメールフォームのモジュールがあることです。この項では、その2点について解説しましょう。

Divi 上で地図の場所を検索して設定するには、Divi テーマに Google Maps Platform の APIキーを設定することが必要です。

表示される地図モジュールの「地図」をクリックすると、Google のAPIキーを入力する画面になります。Google Maps を利用しているので、 APIキーを入力した上での使用が想定されています。

上記の地図モジュールの設定画面で「APIキーを変更」をクリックすると、別ウィンドウで下記のように「Divi テーマオプション」の画面が表示されます。（※ Google の APIキーをまだ取得していない場合は先に「 ジオコードは、以下の理由により成功しませんでした: REQUEST_DENIED の対処方法 」を参考に取得ください）

Divi テーマを変更したら、一旦投稿の編集画面を閉じて開きなおすと、変更が反映されます。

APIキーが反映されていると、「地図の中心の住所」に検索したい住所を入力して検索することで、地図の場所を移動できるようになります。

Divi の初期設定では、地図はアメリカのある地点を指しています。変更しましょう。

地図モジュールの地図の場所が移動するのに合わせて、サイトに表示させている地図の場所も移動するのがわかります。モジュールの地図を拡大縮小すると、それに合わせてサイトの地図の拡大率も変わります。設定したい場所、拡大率に変更しましょう。

PIN とは地図に表示させられる下記のような目印のことです。地図を表示させるだけでなく、目印も置いておく方が、訪問者が場所の判断を行いやすくなります。

地図モジュール（フルワイド地図）の設定画面を表示すると、「新しい PIN 」が表示されています。

関係ない場所を表示していると思うので場所を変更しましょう。 「⚙（歯車）」のアイコンをクリックします。

「ピン設定」のパネルが表示されるので、 PIN に目印となるタイトルやメディアをつけることもできます。

コンテンツの内容を下にスクロールすると、「地図」の項があります。

PIN の位置が移動されました。確定するには「✔（チェックマーク）」をクリックし承認します。ちなみに、赤の×ボタンは「キャンセル」、紫の左回転の矢印は「戻る」、青の右回転の矢印は「進む」を意味します。行った編集内容を戻したり進めたりできます。Divi は操作に統一感があり直感的に操作が可能ですね。

日本語でも、英語でも検索が可能です。

続いて、コンタクトフォーム（お問い合わせフォームモジュール）の設定を行います。

フィールドIDは、コンテンツの目印となるIDです。一意（同じものはひとつしかない状態）となるように設定します。特に変更の必要がないのでそのままにします。

フィールドオプションで、種類「入力フィールド」とあるところをクリックすると種類を変更できます。

フォームモジュールの各項目入力を必須とするには、

チェック項目は複数設置可能です。「＋」をクリックすると項目が追加されます。

チェックボックスがお問い合わせフォームモジュールに配置されます。

これらの機能を組み合わせることで、別のプラグインを用意することなく Divi の機能でお問い合わせフォームを設置できます。

続いて、作成したページの公開と、トップページからのリンクを設定します。