今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi Childe Theme)を作成することにします。子テーマを作成しておくと、Divi の更新が行われた際に、自分で行った 追加 CSS 等の設定が消えてしまうのを防ぐことができます。

レッスン8 テーマのカスタマイズ1
子テーマを作成する方法

1.子テーマを作成し適用する

1)子テーマ用のファイルを用意する

まず、子テーマ用に次の2つ(あるいは3つ)のファイルを用意します。

  • 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 でもどちらでも問題ありません。また、ファイル名も特に指定はありません。今回は下記の画像を用いることにしました。

2)子テーマをワードプレスのテーマフォルダにアップロードする

上記で作成した子テーマ用ファイルを、サーバーへアップロードします。

(1) サーバーに子テーマ用のフォルダを作成する

アップロードするには、まずサーバー上にフォルダを作成します。

アップロード先はワードプレスインストールフォルダの
/wp-content/themes/divi-child-theme
とします。フォルダ名は好きにつけていただいて構いませんが、必ず theme のフォルダに作成してください。

FTPソフト、あるいは、サーバーのコントロールパネルのファイルマネージャ等を利用して、フォルダを作成してください。

(2) ファイルをアップロードする

上記で作成したフォルダに、FTPソフト、あるいは、サーバーのコントロールパネルのファイルマネージャ等を利用して、子テーマ用のファイルをアップロードしてください。

3)子テーマを有効化する

親テーマの Divi から子テーマの Divi Child Theme に有効化されているテーマを変更します。

ワードプレスダッシュボードの「外観」>「テーマ」をクリックします。

← 新たに作成した Divi Child Theme が並んでいるので、「有効化」をクリックします。

以上の操作で子テーマが有効化されます。

せっかく作成している大切なサイトですから、比較的簡単な操作ですし面倒がらずに、子テーマを作成し親テーマのアップデートによる影響を最小限にしましょう。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson5-2-movie

ワードプレス Diviの動画利用方法 Diviレッスン5-2

今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi...
divi-reference2-logo

ワードプレス Divi リファレンス2 テーマのオプションの設定方法

Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。Diviの使い方9...
divi-lesson8-3-logo

ワードプレス Diviの使い方8 外観のカスタマイズ3 色を変える方法

今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。Divi の使い方8 外観のカスタマイズ3 色を変える方法 4.カラースキームでサイト全体の色を変える...

Divi用の子テーマ作成プラグインを利用する Diviの使い方8-1-3

今回はDivi で子テーマを作成する方法の3つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi...
divi-lesson1-logo

ワードプレステーマ Diviの使い方1 Diviとは?~インストールまで

WordPress(ワードプレス)のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、...

Pin It on Pinterest