Divi で子テーマを作成するのには、先に紹介した自分で作成する方法以外に、別に簡単な方法があるので、今回はその方法を図解したいと思います。初心者の方はこちらを利用される方が良いかもしれません。

Diviで子テーマを作成するより簡単な方法 Diviの使い方8-1-2 初心者の方へ

1.divi.space の子テーマ作成ジェネレータを利用する

1)divi.space の子テーマジェネレータにアクセスする

下記の divi.space のサイトにアクセスします。

https://divi.space/divi-child-theme-builder/ref/8831/

Divi 子テーマを作成するためのジェネレータのサイトになっています。英語のサイトですが簡単に利用できます。

2)必要事項を入力する

入力欄があるので必要事項をそれぞれ下記のように入力します。

  • Theme Name:テーマ名
  • Description:作成するテーマの説明文
  • Version:バージョン
  • Theme Website:サイトアドレス
  • Author:著者、作成者名
  • Author Website:著者のサイトアドレス
  • Theme Screenshot:テーマのアイコンとなる画像(サイズは1200×900推奨とあるが自由)
  • Parent Theme:親テーマ(Divi か Extra)
  • GNU License:わからなければそのままで問題ありません
  • Custom CSS:必要なら
「GENERATE」をクリックします。

3)メールが届きます

子テーマジェネレータで子テーマを作成すると、24時間の間だけアクセス可能なダウンロードアドレスが、下記のようにメールで届きます。

アドレスをクリックすると、ダウンロードがはじまるので、適当なところに保存します。

子テーマが Zip ファイルとしてダウンロードされます。

4)子テーマをサイトにアップロードする

子テーマをサイトにアップロードするには、

「外観」>「テーマ」をクリックします。

テーマの画面で、

「新規追加」をクリックします。
「テーマのアップロード」をクリックします。
「ファイルを選択」をクリックします。
先ほどダウンロードしたファイルを選択します。
「今すぐインストール」をクリックします。
パッケージが展開されてインストールされます。
サイトに子テーマがインストールされます。
子テーマを有効にするには「有効化」をクリックします。

5)子テーマのログイン画面カスタマイズ

divi.space の子テーマジェネレータで子テーマを作成すると、ログイン画面のカスタマイズを行うことができる「Login Editor」が、テーマのカスタマイズに追加されます。

divi-theme-customize「外観」>「カスタマイズ」をクリックします。
「Login Editor」をクリックします。
ログイン画面の表示を変更するための各種設定ができます。

子テーマの作成はこちらの方が簡単ですね。初心者の方はこちらを利用するほうが良いかもしれませんね。

続いて外観のカスタマイズをしましょう。

ワードプレス Divi の使い方8 外観のカスタマイズ2 サイトの文字の大きさを変える

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

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

divi-lesson8-1-logo

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

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

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

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

Diviのモジュールの使い方6 アクションの呼び出しとボタン

今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います。Diviの使い方10 モジュールの使い方6...
divi-lesson2-logo

ワードプレス Diviの使い方2 固定ページの作成チュートリアルツアー

Divi 入門講座の第2回目として、 今回は Divi...
divi-lesson3-1-logo

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

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

Pin It on Pinterest