初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

Diviテーマ:サブチュートリアル ビジュアルビルダーを使ったフッターの作り方 – 初心者のためのWordpress完全マニュアル

Diviテーマ:サブチュートリアル ビジュアルビルダーを使ったフッターの作り方

October 02, 2017 / 0 Comment / 712 views

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

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

 

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

 

 

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

 

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

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

 

チュートリアル一覧

 

ストック画像オススメ

 

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

 

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

 

 

Footerの作り方

 

 

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

 

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

 

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

 

地図モジュールの使い方

 

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

 

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

 

フッターの作り方

 

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

 

このコードをそのまま使用すると文字の色が白になります。他の色に変更したい場合は、コメントに挿入している通り、#以下の色コードを変更します。色のコードは、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

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です