Divi 子テーマの作成方法

公開: 2024-06-28

サイトを構築するときに選択できる WordPress テーマは数千 (そうです、何千も!) あります。 ただし、ほとんどの Web デザイナーは、WordPress テーマは出発点としては最適ですが、さらにカスタマイズしたいと考えており、子テーマを作成することがそのための優れた方法であると考えています。

子テーマは親テーマから構築されており、独自のコードを追加または削除できます。 WordPress サイトを本格的にカスタマイズしたい場合は、子テーマを使用するのが最善の方法であり、Divi は最良の選択肢の 1 つです。

クリエイティブが Divi 子テーマを作成する最大の理由は、親テーマが更新されてもサイトで何も中断されないようにするためです。 Divi から子テーマを作成すると、基本的にセーフティ ネットとして機能し、サイトが壊れる前に常に存在します。 しかし、先走ってしまいましたので、基本的なことから始めましょう。

この記事では、以下について説明します。

  • Diviとは何ですか、そしてどのような機能がありますか？
  • Divi 子テーマの作成方法 (+ 無料の子テーマのダウンロード!)
  • Divi 子テーマが機能しているかどうかをテストする方法

飛び込んでみましょう。

Diviとは何ですか?どのような機能がありますか?

Divi は、Elegant Themes の WordPress テーマで、さまざまな構造要素を使用してページを最初から構築できます。 これは、優れたビジュアル エディターにより、構築しているサイト上のすべてを完全に制御できることを意味します。

また、何百もの既製のデザインが付属しているため、テーマの作成やカスタマイズの経験がなくても、心配する必要はありません。 初めてのサイトをカスタマイズしようとしている初心者でも、経験豊富な開発者でも、Divi はあなたのアイデアを実現するためのツールを提供します。

開発者が Divi 子テーマを作成しています

Divi には 2 つのビルダー インターフェイスがあります。WordPress のフロントエンドのビジュアル エディターとバックエンド ビルダーです。 ビジュアル エディターでは、ページ自体で編集し、編集内容をライブで確認できるため、クライアント向けのサイトの構築が 10 倍簡単、迅速、そして楽しくなります。 バックエンドでは、ポスト内のブロックベースの表現を編集しています。 ただし、新しいモジュールを追加したり、ビジュアル エディターで行うのと同じように基本的にすべてのことを実行したりすることはできます。 好みに応じて、エディタ間を行ったり来たりするのも簡単です。

Divi には、セクション、行、モジュールという 3 つの主要な構造要素もあり、そのまま利用することも、仕様に合わせてカスタマイズすることもできます。

セクション:これらは、Divi ビルダーの最大の構成要素です。 これらは、コンテンツを視覚的に区別できる領域にグループ化できる水平方向の積み重ねブロックと考えることができます。 構築するものはすべてセクションから始まります。

行:行は、セクション内に配置できるさまざまな列レイアウトです。 これらには、行の左上にある設定アイコンをクリックしてアクセスできるさまざまな設定があり、モジュールが収容される構造を作成するため、Divi Builder で構築されるレイアウトの多様性を大幅に増やすために使用できます。

モジュール:モジュールには、画像、コンテンツ、スライダー、ギャラリー、連絡先フォーム、CTA、ブログ、フォーム、紹介文などのさまざまなコンテンツ要素が含まれています。40 を超えるモジュールから選択して、必要に応じてカスタマイズできます。

Divi について少し理解できたところで、子テーマの作成方法について詳しく見ていきましょう。

Divi 子テーマの作成方法

カスタマイズを開始する前に、Divi がインストールされ、アクティブ化されていることを確認してください。 これには 2 つの方法があります。

オプション 1:フライホイール + Divi を使用して、すばやく簡単に取り付けます。

オプション 2: 手動による方法 (次の 2 つの手順に従います)

ステップ 1:ここで Divi にサインアップしてダウンロードします。 アカウントを作成してログインすると、メンバーエリアにリダイレクトされ、左側にある「ダウンロード」タブを見つけます。 Diviを見つけて「ダウンロード」をクリックします。 これにより、Divi のダウンロードが zip ファイルでダウンロード フォルダーに送信されます。

ステップ 2: WordPress サイトにログインします。 [外観] > [テーマ] に移動します。 右側の「新規追加」または「新規テーマの追加」をクリックします。 左上の「テーマをアップロード」ボタンをクリックします。 ファイルを選択し、その Divi zip ファイルを見つけます。 注: zip ファイルに保存してください (解凍しないでください)。 「インストール」をクリックします。 インストールが完了したら、「アクティブ化」をクリックすると、サイトにインストールされアクティブ化されます。 ?

これで、Divi 子テーマを作成する準備ができました。 Divi 子テーマを作成するには、主に 3 つの方法があります。無料の子テーマをダウンロードする、プラグインを使用する、または手動でコーディングするです。

オプション 1: 無料の Divi 子テーマ ファイルをダウンロードする

子テーマを作成する最も簡単な (そして簡単な!) 方法の 1 つは、この無料の Divi 子テーマをダウンロードすることです。 始めるのに必要なものがすべて揃っているだけでなく、好みに合わせてカスタマイズする余地もあります。 以下から無料の Divi 子テーマをダウンロードしてください。

ダウンロードしたら、Divi をインストールしてアクティベートすれば準備完了です。 それはとても簡単です。 Divi 子テーマを作成する別の方法を希望する場合は、いつでもプラグインを試すことができます。

オプション 2: プラグインを使用して Divi 子テーマを作成する

Divi 子テーマの作成に役立つプラグインが多数あります。 私の個人的なお気に入りをいくつか紹介します。

  • ディビの子供たち
  • 子テーマ設定ツール
  • Orbisius による子テーマ作成者
両端にプラグインが付いたコードを両手で持つ

ディビの子供たち

Divi Children は、Divi ユーザー向けに特別に開発された無料のプラグインです。 難しい作業は自動的に行われるため、クリエイティブな面に集中することができます。 Divi Children によって作成されたすべての子テーマには、WP Customizer を介したカスタマイズ機能が多数付属しています。 このプラグインのインストール方法については、こちらをご覧ください。

子テーマ設定ツール

このプラグインは、子テーマのスタイルシートを直接カスタマイズできるようにしたい WordPress ユーザー向けに設計されました。 このプラグインを使用すると、カスタマイズしたい正確な CSS 属性を簡単に識別してオーバーライドでき、アナライザーはレンダリングされたテーマをスキャンして、子テーマを自動的に構成します。 このプラグインの詳細とインストール方法については、こちらをご覧ください。

Orbisius による子テーマ作成者

このプラグインを使用すると、サイトに現在インストールされているテーマから子テーマをすばやく作成できます。 このプラグインを使用すると、親テーマから無制限の数の子テーマを作成できるため、オプションは無限です。 2 つのエディターを備えており、1 つのテーマからスニペットを選択して、別のテーマに貼り付けることができます。 カスタマイズについて話してください！ このプラグインのインストールについて詳しくは、こちらをご覧ください。

最後に、プラグインが適さない場合は、Divi 子テーマを手動で作成するオプションがいつでもあります。

オプション 3: Divi 子テーマを手動で作成する

あなたが WordPress 開発者であるか、単に挑戦するのが好きな人にとって、これは Divi 子テーマを作成するための素晴らしい方法です。

開発者は自分のサイトを支援する新しいツールを求めています。

ステップ 1: style.CSS ファイルを作成する

おそらくご存知のとおり、style.css ファイルは WordPress に子テーマの詳細を伝えるためのもので、カスタム CSS を追加するために使用できます。 これを行うには、コンピューター上にフォルダーを作成し、名前を付けます (これが Divi 子テーマ用であることがわかるもの)。 そこから、そのフォルダーにファイルを作成し、style.css という名前を付けます。

注: テキスト エディター ツールまたはコード エディター ツールがあることを確認してください。そうでないと、ファイルに名前を付けるのが難しくなります。

ステップ 2: これを style.css ファイルに追加します。

 /*
 テーマ名: Divi 子テーマ
 テーマURI: https://www.elegantthemes.com/gallery/divi/
 説明: Divi の子テーマ
 作者: 君の名は。
 著者URI: https://getflywheel.com/
 テンプレート:ディビ
 バージョン: 1.0.0
*/

テーマ名、テーマ URI、説明、作成者、作成者 URI、およびバージョンはすべて編集可能です。 テンプレート名はそのままにしておいてください。 さらにカスタマイズするには (そして Divi 子テーマが動作していることを確認するには)、ここにカスタム CSS を追加します。

ステップ 3:functions.php ファイルを作成する

すでに作成したフォルダーに別のファイルを作成し、functions.php という名前を付けます。

次に、このコードを新しいファイルに追加し、必要なカスタム関数を最後の行の下に追加します。

 <?php
関数 divi__child_theme_enqueue_styles() {
    wp_enqueue_style( '親スタイル', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

ステップ 4: スクリーンショットを作成する

これは、サイトの WordPress テーマ ページに画像を配置する空白スペースをなくすための重要な手順です。そのため、簡単なスクリーンショットを撮ることがここでの重要な手順です。 スクリーンショットを撮ったら、サイズが 880x660px であること、.png または .jpeg (どちらでも問題ありません!)、名前が [screenshot.png] または [screenshot.jpeg] であることを確認してください。 次に、スクリーンショット画像をメイン フォルダーに追加します。

ステップ 5: フォルダーを圧縮してアップロードする

最後に、フォルダーを zip ファイル形式に圧縮して、WordPress にアップロードします。 [外観] > [テーマ] > [アップロード]に移動し、[アクティブ化] をクリックします。

出来上がり！ Divi 子テーマが正常に作成され、思いどおりにカスタマイズする準備が整いました。

Divi 子テーマが機能しているかどうかをテストする方法

子テーマが正しく動作するかどうかをテストするには、子テーマの style.css ファイルに CSS を追加し、変更を保存します。 これらの変更を実際のサイトで確認すると、それが機能していることがわかります。

注: ページがキャッシュされている場合は、プライベート ブラウザでページを開く必要がある場合があります。

覚えておいてください: 何かが壊れる可能性があるので、ライブ サイトに決して変更を加えないでください。 無料のローカル開発アプリである Local を使用すると、ローカル環境のデバッグをやめて、美しい WordPress サイトの立ち上げにより多くの時間を費やすことができます。 ローカルについて詳しくは、こちらをご覧ください。

結論

カスタマイズは WordPress を使用してサイトを作成する際の最も良い部分の 1 つであり、テーマは出発点として最適ですが、Divi のような子テーマを自由に使えるのは素晴らしいことです。

無料の Divi 子テーマのダウンロード

子テーマを作成する最も簡単な (そして簡単な!) 方法の 1 つは、この無料の Divi 子テーマをダウンロードすることです。 始めるのに必要なものがすべて揃っているだけでなく、好みに合わせてカスタマイズする余地もあります。 以下から無料の Divi 子テーマをダウンロードしてください。