Diviテーマをインストールするとデフォルトでフッターが自動設定されていますが、ウィジェットでフッターセクションをカスタマイズする通常の方法の他に、今までのチュートリアルでやってきたようにセクションでフッターを作成するという方法があります。
セクションで作成すると、コンタクトフォームを挿入できたり地図を挿入できたりなど、自由にフッターセクションをカスタマイズすることができます。

またフォントの種類や色などを、CSSを使わなくても簡単に設定することができるので、初心者の方でも簡単にフッターを作成することができるのもポイントです。

作成したフッターセクションは、フッターのphpファイルを編集することによってデフォルトのフッターのように全ページに自動で表示することができます。

 Divi基本操作チュートリアルシリーズ

Diviテーマ Step By Stepチュートリアル サンプルデザイン:  https://yukifel-divitutorial.com/

Diviテーマの購入はこちら:  https://www.elegantthemes.com

チュートリアル一覧

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方
• Step4: メンバープロフィールの作り方
• Step5: カウンターの設置方法
• Step6: 価格表モジュールの使い方
• Step7: コンタクトフォームの作り方
• Step8: Google Mapの挿入とFooterの作り方

ストック画像オススメ

Pexels:　無料だけどやたらと解像度の良い、クオリティの高いストック画像が著作権フリーでダウンロードできます。ちなみにこのチュートリアルで使っている画像は、著作権を考慮して、大体このサイトから取得しています。

Shutterstock: 有料には有料の良さがある！種類の豊富さとクオリティの高さはお墨付き。ネットサーフィンをしていて、この画像いいなと思った画像はだいたいShutterstockと言っても過言ではないほど、世界で一番有名なストック画像の有料サイトです。

Footerの作り方

ビジュアルビルダーを使ってフッターを作成する

いつものように固定ページでビジュアルビルダーを立ち上げたら、通常セクションを挿入して、コラム数を選択します。

モジュール仕様の一例として、リンクの一覧を表示したい場合は、テキストモジュールを挿入し、下記の画像のようにテキストを入力したら、ピンクの太枠で囲んであるリンクアイコンをクリックし、テキストをリンクに変更します。

リンクの文字の色を変更したい場合、通常のデザインタブでテキストの色を変更しても色が変更されません。
そのため、カスタムCSSで色の設定を変更する必要があります。

画像のように詳細設定タブをクリックして、CSSクラスに　footer-linkと入力します。

一度ダッシュボードに戻り、Divi >> テーマカスタマイザー >> 追加CSSの順にクリックし、下記のコードをそのままコピーアンドペーストします。

/*Footer Linkの色の変更*/
 	 	.footer-link a {
 	 	color: #ffffff; /*#より先を変更したいカラーコードに変更*/
 	 	}

このコードをそのまま使用すると文字の色が白になります。他の色に変更したい場合は、コメントに挿入している通り、#以下の色コードを変更します。色のコードは、W3Schoolなどで取得できます。

デフォルトのDiviのフッターと同じ背景色にしたい場合は、セクションの背景の色を#222222に設定します。

作成したセクションを既定のフッターにする

先ほどビジュアルビルダーを使って作成したフッターセクションですが、今のままでは、ページを作成するたびに、フッターをマニュアルで挿入する必要があります。

では、ページを作成すると同時にフッターとして自動表示させるにはどうすればいいのか。
まずは、先ほど作成したセクションをDiviライブラリーにグローバルテンプレートとして保存します。

水色のライブラリに追加するというアイコンをクリックしたら、ライブラリにセクションをテンプレートとして追加することができます。
テンプレート名はお好きにつけていただいて構いませんが、グローバルとして保存にはチェックを入れてください。

！ここから先の作業は、Phpファイルを編集します。難しい作業ではありませんが、間違ってプログラムがクラッシュするのが怖い！！という方や今いちよく分からないという方は、先ほどテンプレートとしてライブラリに保存したグローバルフッターを各ページにマニュアルで挿入するようにしてください。

グローバルとして保存してあると、後ほどセクションの内容を変更したくなった時、このグローバルテンプレートが使用されている場合は、全てのページのそのグローバルテンプレートが一括して変更されます。

ダッシュボードに戻り、Divi>>Diviライブラリーの順にクリックし、Diviライブラリーの一覧を表示します。

先ほど保存したフッターテンプレートの編集をクリックして、編集画面を開きます。
編集画面を開いたら、URLに注目してください。post=?の後に数字が書いてあると思います（数字はユーザーによって違います）。
この数字を後ほど使うので、覚えておいてください。

ここでは特に編集する必要はないので、そのまま画面を閉じます。

次に外観>>テーマの編集をクリックして、footer.phpをクリックします。念のため全てのfooter.php内のコードをコピーして、テキストエディターなどに変更前のコードを保存しておくのがベター。
footer.phpを開いたら、

＜footer id=”main-footer”>＜/footer>というコードを見つけます。

その下に、下記のコードをコピーアンドペーストして挿入します。
数字の部分(1390)は、先ほど覚えておいてくださいと言った番号に変更してください。

ファイルを更新すると、全てのページに作成したフッターが自動で表示されるようになりました。

まとめ

ビジュアルビルダーでフッターを作成すると、ウィジェットでフッターを作成するより、デザインやコンテンツをもっと簡単にカスタマイズすることができます。

phpのファイルの編集がわからなくても、作ったセクションをライブラリにグローバルテンプレートとして保存することによって、簡単にマニュアルで各ページにライブラリからテンプレートを呼び出すことができます。

今回のチュートリアルでわからなかった点や、質問等ありましたら、コメント欄や、SNS、またはメッセージにてお気軽にお問い合わせください。

またWordpressに関するテーマやプラグインのチュートリアルのリクエストも大歓迎しております。

それでは次回のチュートリアルでまたお会いしましょう！ See you later<3