Diviの子テーマの作り方

Diviの子テーマを作成する方法【簡単です】

こんにちはナオミです。

Diviのヘッダーの色を変えたいと思って試行錯誤してたら、子テーマを作るのが一番だと言うことに気づきました。

しかもそれがとっても簡単です。

Diviの子テーマを作成する前に

どんな人がDiviの子テーマを使うべきか?

  1. テンプレートを沢山いじりたい
  2. CSSやJavaScriptのコードを沢山書きたい
  3. チームでコードを管理したい
  4. 納品したサイトに制限をかけたい

これらに当てはまる人は是非子テーマを作って見ましょう。

子テーマではなく、Diviを使うのはありか?

これは全然ありです。Diviだけですでに他のテーマの何倍ものカスタマイズ性があり、色々なサイトが作れます。

自分も今までずっと子テーマを使ってきませんでした。

Diviの子テーマの作成

それでは詳しく説明していきます。

必要なファイル

まずはフォルダを準備してください。
フォルダ名は半角英数を使います。

必要なファイルは次の三つです。

  1. style.css
  2. functions.php
  3. screenshot.png

これらのファイルを作って一つのフォルダに入れます。

Diviの子テーマに必要なファイル

それぞれのファイルの説明をします。

style.css

次のコードを入れてください。

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

大事なラインは、Theme NameとTemplateです。

Theme Nameはテーマの名前を決定します。そして、Templateは親テーマのフォルダ名を決めます。

この上のコードのままコピペしましょう。

functions.php

次のコードを入力します。

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

これは親のDiviテーマからサイトのスタイルを引き継ぐと言うことです。
そのままコピペしましょう。

screenshot.png

これはテーマ選択画面などで、表示される画像です。

Diviの子テーマを作る。screenshot

必要なのは本当これだけです。

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

次に作った子テーマをサイトにアップロードします。

アップロードの仕方はいくつかありますが、今回はFTPを使いました。

wp-content→themesの中にあなたが作成した子テーマのフォルダをアップロードします。

ワードプレステーマのFTPアップロードに関する情報は沢山出回ってるので、他のサイトを参考にしてください。

Diviの子テーマをサイトにアップロードする。フォルダー

これで子テーマのインストールは成功です。サイトに戻って、テーマの画面をリフレッシュしてみましょう。

Diviの子テーマのインストール完了

先ほどアップロードした、子テーマのscreenshot.pngが表示されます。
有効化して使ってみましょう。

ダウンロード

今回動画で使った子テーマはここからダウンロードできます。ダウンロード

この記事ではDiviの子テーマの作り方について説明します。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

目次

そのDiviの質問、
実際に使ってる人にてみませんか?

TOFUラボはDiviを使う人が集まるサロンです。
メンバーは130人を超えます!