MB blog

こちらは主に自分用のメモです。

Divi の子テーマを作る方法


スポンサードリンク

Divi テーマをカスタマイズするので、子テーマを作った際のメモです。
親テーマを直接カスタマイズしてしまうと、バージョンアップの際などの対応が非常に面倒なので、カスタマイズをするのであれば子テーマが必須となります。

1. wp-content > themes の下に、 "divi-child" という新規フォルダを作成し、そのルートに以下の2ファイルを作る。

style.css
/*
 Theme Name:     Divi Child Theme
 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 URL, Description, Author などは自由に変更してOK

functions.php
<?php
function my_theme_enqueue_styles() {
 
    $parent_style = 'divi-style';
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

2. 子テーマの有効化

ワードプレス管理画面に戻り、「外観」 --> 「テーマ」に Divi に加えて "divi-child" が出てきているのを確認。

f:id:lake_michigan:20190513141802p:plain

このままだとサムネイルがありませんが、任意の880x660 の画像を divi-child フォルダのルートに配置することでサムネイルに反映させることができます。

3. ファイルの編集(カスタマイズ)

テーマをカスタマイズする際は、新たに追加した子テーマの方の style.css、function.php に追記していきます。
header.php の編集をしたいときは、親テーマの header.php をダウンロードしてきて、それをそのまま子テーマにアップします。