今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ（Divi Childe Theme）を作成することにします。子テーマを作成しておくと、Divi の更新が行われた際に、自分で行った 追加 CSS 等の設定が消えてしまうのを防ぐことができます。
レッスン8 テーマのカスタマイズ1
子テーマを作成する方法
１．子テーマを作成し適用する
１）子テーマ用のファイルを用意する
まず、子テーマ用に次の２つ（あるいは３つ）のファイルを用意します。
- style.css
- functions.php
- （header.php：ヘッダーのカスタマイズもするのであれば）
ファイルはテキストエディタ（メモ帳など）で作成します。ファイルの内容はそれぞれ下記のように記述します。
(1) style.css
style.css の内容は下記のように記載します。テキストエディタで作成してください。ファイル名は必ず style.css としてください。
/* Theme Name: Divi Child Theme Description: Divi Child Theme Author: Isophoto Author URL: https://websvr.org/ Template: Divi Theme URL: https://www.elegantthemes.com/ Version: 1.0.0 */
- Theme Name：テーマの名前
- Description：テーマの説明
- Author：著者
- Auther URL：著者のURL
- Template：Divi（親 Divi のインストールフォルダ名）
- Theme URL：テーマのURL
- Version：子テーマのバージョン
(2) function.php
function.php の内容は下記のように記載します。テキストエディタで作成してください。ファイル名は必ず function.php としてください。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/rtl.css' );
}
?>上記のように記載すると、子テーマの function.php にない部分は親テーマの方から設定されるようになります。日本語のページを作成する場合は、右から記述する言語用の rtl.css についての部分は特になくても問題ありません。また、 add_action の部分は function { } の部分より先に記載しても後に記載してもどちらもかまいません。
(3) header.php
header についてはダウンロードして用意します。FTP ソフトや、お使いのサーバーコントロールパネルのファイルマネージャなどを利用してパソコンにダウンロードしましょう。
header.php はワードプレスインストールフォルダの
/wp-content/themes/Divi
にあります。わかりやすい場所に保存しましょう。
以上の操作で子テーマ用のファイルは準備できるのですが、アイコンも表示させたい場合は、画像ファイルを用意します。上記画像の screenshot.jpg がその画像になります。 Jpeg でも PNG でもどちらでも問題ありません。また、ファイル名も特に指定はありません。今回は下記の画像を用いることにしました。
２）子テーマをワードプレスのテーマフォルダにアップロードする
上記で作成した子テーマ用ファイルを、サーバーへアップロードします。
(1) サーバーに子テーマ用のフォルダを作成する
アップロードするには、まずサーバー上にフォルダを作成します。
アップロード先はワードプレスインストールフォルダの
/wp-content/themes/divi-child-theme
とします。フォルダ名は好きにつけていただいて構いませんが、必ず theme のフォルダに作成してください。
FTPソフト、あるいは、サーバーのコントロールパネルのファイルマネージャ等を利用して、フォルダを作成してください。
(2) ファイルをアップロードする
上記で作成したフォルダに、FTPソフト、あるいは、サーバーのコントロールパネルのファイルマネージャ等を利用して、子テーマ用のファイルをアップロードしてください。
３）子テーマを有効化する
親テーマの Divi から子テーマの Divi Child Theme に有効化されているテーマを変更します。
 | ワードプレスダッシュボードの「外観」＞「テーマ」をクリックします。 |
 | ← 新たに作成した Divi Child Theme が並んでいるので、「有効化」をクリックします。 ↓
|
以上の操作で子テーマが有効化されます。
せっかく作成している大切なサイトですから、比較的簡単な操作ですし面倒がらずに、子テーマを作成し親テーマのアップデートによる影響を最小限にしましょう。
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
