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-lesson3-2-logo

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

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson3-1-logo

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

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

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

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

Divi レッスン9 テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...
divi-lesson7-logo

ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop...

Pin It on Pinterest