今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、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の使い方10-3

今回は Divi の各種モジュールのうちから、動画モジュールと動画スライダーモジュールについて図解したいと思います。 動画と動画スライダーモジュール...

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi...
divi-lesson8-1-logo

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

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi...

Diviモジュールの設定方法8 トグルとアコーディオン

今回は Diviの各種モジュールのうちから「トグル」と「アコーディオン」のモジュールの使い方について、Divi初心者向けに図解したいと思います。...
divi-lesson3-1-logo

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

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。...

Pin It on Pinterest