Diviプラグインのハイライト：Divi Module Builder

Divi Builderには、レイアウトに実質的に任意のデザイン要素を追加するのに役立つ多くのモジュールが含まれていますが、独自のモジュールを作成したい場合はどうでしょうか。 Divi Module Builderと呼ばれるサードパーティのプラグインは、この機能を提供します。

この記事では、プラグインを見て、プラグインで何ができるか、そしてプラグインがどれほど簡単に使用できるかを見ていきます。 Divi 3.0.50以降が必要で、DiviとExtraの両方で動作します。 開発者のWebサイトDiviPlugins.comから入手できます。

Divi ModuleBuilderのインストール

プラグインをアクティブ化したら、[ DMBアクティブ化ページ]をクリックします。 または、ダッシュボードの[カスタムモジュール]に移動して[ライセンス]をクリックすると、この画面が表示されます。

ライセンスキーを入力し、[ライセンスのアクティブ化]をクリックします。 カスタムモジュールと呼ばれる新しいメニューがダッシュボードに追加されます。 このメニューには、モジュールの構築に必要なすべてのものがあります。

モジュールの追加

モジュールは、ダッシュボードメニューの[カスタムモジュール]、[モジュールの追加]の下に作成されます。 モジュールの作成に使用する領域は2つあります。 左側の領域は、フィールドを作成する場所です。 右側の領域は、フィールドが使用するコードを追加する場所です。 モジュールを標準または全幅にすることができます。 準備ができたら、下書きを保存したり公開したりできます。 モジュールが公開されると、DiviBuilderに表示されます。

田畑

モジュールには、必要な数のフィールドを含めることができます。 各フィールドには、フィールドプロパティがあります。 フィールドの各プロパティを詳しく見てみましょう。

フィールドラベル–モジュールのコンテンツタブにフィールドのタイトルとして表示されるラベル。

フィールド識別子–HTMLでフィールドを参照するために使用する一意の値。 フィールド識別子には、小文字、数字、およびアンダースコアのみを使用してください。

フィールドの説明–フィールドの目的を説明する独自の説明を追加します。 これは、モジュールのコンテンツタブの入力の下に表示されます。 このフィールドはオプションですが、ユーザーに役立つ情報や例を追加することをお勧めします。

フィールドタイプ–ユーザーに表示される入力のタイプを決定します。 ドロップダウンボックスから、テキスト、テキスト領域、色、画像、はい/いいえの切り替え、アイコンなど、いくつかのフィールドタイプを選択します。

[デザイン]タブ–モジュールのデザイン内にこのフィールドのフォントコントロールを追加します。 テキストまたはテキスト領域を選択すると、このオプションが表示されます。 HTMLにクラスを追加して、フォントコントロールを適用する要素を特定する必要があります。

フィールドを非表示–ユーザーがこの要素のコンテンツを制御できるようにすることなく、HTML出力内の要素のフォントを制御できるようにします。 このオプションは、テキストまたはテキスト領域のフィールドタイプが選択されている場合にのみ使用可能になります。

フィールドラベル、識別子、説明を追加するか、フィールドタイプを選択するか、[デザイン]タブを有効にするか、フィールドを非表示にすることを選択します。 各フィールドの上/下矢印をクリックして、フィールドを再配置します。 各セクションとフィールドには、説明と例が記載されています。

コード

カスタムHTML、PHP、CSS、およびJavaScriptを追加して、出力を制御します。 HTMLフィールドは、カスタムクエリとPHPを受け取ることができます。 PHPがコードを認識する前に、PHPを有効にする必要があります。 それ以外の場合は、コードを画面に出力します。 HTMLとPHPはどちらも、フィールド識別子を使用してフィールドを参照します。

コードショートカットは、コードフィールドの下のボタンとして提供されます。 これには、タグとフィールド識別子が含まれます。 フィールド識別子を追加すると、コード領域の下部に表示され、クリックしてコードに追加できます。 HTML識別子はオレンジ色のボタンとして表示され、PHPは緑色で表示されます。 ショートカットとして利用できる以上のものを使用できますが、これらは開発時間を短縮するためにここにあります。

モジュールの作成

モジュールを作成する簡単な例を次に示します。 タイトルは、DiviBuilderのモジュールに表示される名前になります。 フィールドラベルと説明を追加し、フィールドタイプとして[テキスト]を選択して、フィールド識別子を作成しました。

識別子がHTMLショートカットに表示されるように、下書きとして保存しました。 次に、ショートカットからH1タグを選択し、タグの間にカーソルを置き、HTMLショートカットからラベルを選択しました。 終了したら、公開を押します。 結果は、ユーザーがテキストを入力できるフィールドを持つモジュールになるはずです。 出力には、テキストがヘッダー1として表示されます。

モジュールがDiviBuilderに表示されます。 他のDiviモジュールと同じようにページに追加できます。

[コンテンツ]タブには、ラベルで追加したフィールドが含まれています。

モジュールには、フィールドに入力したテキストが表示されます。 HTMLを追加してH1として表示したので、テキストには自動的にH1プロパティがあります。 [デザイン]タブを追加して、カスタマイズ機能を追加することもできます。 これには、フィールドを正しくターゲットにするためのコードが必要になります。

モジュール

モジュールのリストはダッシュボードメニューに表示されます。 カスタムモジュール、モジュールに移動します。 ここで、モジュールを編集または削除できます。 モジュールごとにPHPがオンかオフかを示します。 モジュールのクローンを作成する場合は、 [設定]でそれらを表示する必要があります。

カスタムモジュール設定

[設定]メニューには、モジュールを管理できる場所があります。 公開モジュールとドラフトモジュールの両方を表示できます。

それらのクローンを作成できます。これにより、別のモジュールで使用した多くのコードを必要とするモジュールから開始するのに適した場所が得られます。 PHPを編集、無効化、または有効化して（コードエラーのためにエディターからロックアウトされている場合に役立ちます。これを実行し、この機能を使用してモジュールを編集しました）、モジュールをインポートおよびエクスポートすることもできます。

依存関係を追加する

ここで、サードパーティのCSSとJavascriptの依存関係を追加できます。 それらを外部URLまたは内部URLとして追加します。 ドロップダウンボックスからCSSまたはJavascriptを選択し、名前を追加して、URLを追加します。 その後、どのページでも使用できます。 FontAwesomeの使用例を示します。 これは、1つの場所に依存関係を作成し、それをどこでも使用するための優れた方法です。

Divi Module Builderの例–カスタムブロググリッド

例として「oky」モジュールを作成するのではなく、開発者が作成したすばらしい例であるカスタムブロググリッド（開発者のWebサイトから無料でダウンロードできます）を示しています。 HTML、PHP、CSSの3つのフィールドが含まれています。 それぞれを見てみましょう。

カスタムブロググリッドモジュール

フィールド1には[カテゴリ]というラベルが付けられ、カテゴリを識別子として使用し、フィールドタイプは[テキスト]に設定されています。

フィールド2には、B＆W ImageEffectというラベルが付いています。 識別子はfilterで、フィールドタイプはYes / NoToggleです。 フィルタはCSSで作成されます。

フィールド3には「投稿タイトル」というラベルが付いており、識別子としてpost_titleを使用します。 フィールドタイプは[テキスト]に設定されており、[デザイン]タブが有効になっています。 モジュールでこのフィールドのカスタマイズを確認します。 このフィールドには、HTMLでH2クラスが与えられます。

PHPが選択されているため、HTML出力コードボックスで使用できます。

カスタムCSSがCSS出力ボックスに追加されます。

これがJavascriptです。 このプラグインを最大限に活用するには、HTML、PHP、CSS、およびJavascriptを十分に理解している必要があります。 言い換えれば、これは開発者向けのプラグインです。

DiviBuilderのカスタムブロググリッドモジュール

モジュールが公開されると、DiviBuilderに表示されます。

モジュール内に表示される設定とそのラベルは、選択内容によって異なります。 このモジュールを使用すると、カテゴリを追加したり、白黒効果を有効にしたり、[コンテンツ]タブに投稿タイトルを追加したりできます。 また、バックグラウンド設定（モジュールのデフォルト）も含まれています。

このモジュールでは、[デザイン]タブが有効になっています。 これには、テキスト、投稿タイトルテキスト、境界線、間隔、およびアニメーションの設定が含まれます。

カスタムブロググリッドの結果

結果は、ホバーアニメーションを備えたブロググリッドです。 白黒モードを有効にしたので、画像にカーソルを合わせない限り、画像は白黒で表示されます。 私はこの形式のホバーを好みます–画像を不明瞭にするのではなく、ホバーで画像を表示します。

これでは、白黒モードを無効にし、タイトルフォントを変更し、背景のグラデーションを追加しました。 ボタンを変更したり、オーバーレイを追加したりするために、コードにさらに調整を追加できます。コード化できれば、想像できるほとんどすべてのことを実行できます。

ライセンスとドキュメント

選択できるライセンスは、シングル、無制限、ライフタイムの3つです。 Unlimitedライセンスは、無制限のWebサイトを対象とし、1年間の更新とサポートが含まれています。 Lifetime Unlimited Sitesライセンスには、生涯更新とサポートが含まれています。

ドキュメントは開発者のWebサイトで提供されています。 サンプルコードは、ステップバイステップの説明とともに含まれています。

最終的な考え

Divi Module Builderは強力なプラグインであり、多くの可能性を秘めています。 コードに関する十分な知識が必要なため、すべての人に適しているわけではありません。 これにより、開発者はモジュールを作成および共有するための優れたツールを利用できます。 あるサイトから別のサイトにインポートおよびエクスポートできるのが好きです。 モジュールを使用する各サイトには、プラグインをインストールする必要があります。 コードに関する十分な知識があり、独自のDiviモジュールの作成に関心がある場合は、Divi ModuleBuilderを一見の価値があります。

我々はあなたから聞きたい。 Divi Module Builderを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

aliaksei kruhlenia /shutterstock.com経由の注目の画像