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の子テーマを作成する方法【簡単です】」に2件のコメントがあります

  1. はじめまして!
    Wordpress初心者です。
    現在美容サロンを経営しており、業者に頼らず自分でHPを作成中です。
    これまで何個か日本のテーマを購入してみたものの、結局うまくいかずでした。

    とうとうDiviに出会い、いろいろ検索しているうちにNAOMIさんのページにたどりつき、
    ついに購入しました(^^♪
    私のページはまだメンテナンス中ですが、
    これから楽しみながらブログページやLPの制作に打ち込めそうです。

    PS。子テーマダウンロードさせていただきました。
    これからも動画で勉強させていただきます。
    いつもありがとうございます!

    1. Rommyさん!
      コメントありがとうございます!

      Diviは他のテーマと全然違いますよね。
      Divi楽しいですよね!
      LP作りには結構適してると思います。

      数日前にSlackのDiviのオンラインコミュニティを始めました。
      もしよかった参加しませんか?
      まだ数人ですが、わからないところはそこで全力でサポートしますよ!
      招待状を送っておきますね。
      何でも聞いてください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です