カスタムコードを持つDiviページレイアウトをエクスポートする方法

公開: 2019-03-02

Diviページレイアウトをエクスポートおよびインポートできるのが大好きです。数回クリックするだけで、別のプロジェクト用に保存できる、便利にパッケージ化された1つのjsonファイルにすべてのデザイン要素を含めることができます。しかし、ページレイアウトがカスタム外部コード（CSSまたはJavascript）に依存している場合はどうなりますか？もちろん、ページ要素のスタイルと機能を維持するために、そのコードをページレイアウトのエクスポートに含める必要があります。

このチュートリアルでは、ページレイアウト内にカスタム（外部）コードを含めて、別のサイトでレイアウトをエクスポートおよびインポートするときにレイアウトのデザインと機能が維持されるようにする方法を示します。

始めましょう！

基本的な考え方の説明

特定のDiviページレイアウトのスタイル設定に使用されるカスタムCSS（テーマカスタマイザーまたはページ設定のいずれか）を追加した場合、CSSは外部の別のファイルに保存されます。テーマオプションの下でヘッダーに追加された可能性のあるJavaScriptについても同じことが言えます。このコードは外部に保存されるため、Diviページレイアウトで自動的にエクスポートされることはありません。

Diviページレイアウトと一緒にカスタムコードをエクスポートするために、Diviコードモジュールを使用してページコンテンツ内にコードを保存できます。このようにして、Codeモジュール内のコードがページレイアウトとともにエクスポートされます。これは、カスタムレイアウトを自分のコンピューターに保存するのに役立ちます。このようにして、別のプロジェクトにレイアウトをインポートするたびに、ページのカスタム機能とスタイルを設定できます。この手法を使用して、カスタムコードを使用する個々のセクション、行、またはモジュールを保存およびエクスポートすることもできます。

この方法は、実際には、将来の使用のために保存する個々のページまたはページの要素に対してのみ意味があります。これは、サイト全体のレイアウトを保存するための最良の方法ではありません。テーマカスタマイザー設定やテーマオプションをエクスポートできるDiviの移植性オプションを利用する方が理にかなっています。

私たちのYoutubeチャンネルを購読する

Diviコードモジュールを使用してカスタムコードを持つDiviページレイアウトをエクスポートする方法

カスタムCSSとJavascriptを使用するDiviページレイアウトがあり、そのカスタムコードをエクスポート（.json）ファイルに含めたいとします。まず、エクスポートするページを開いて、Diviビルダーをデプロイする必要があります。

この例では、Bakery Landing PageLayoutを使用したページがあります。ボタンをクリックしたときに連絡先フォームを切り替えるためのカスタムCSSとJavascriptをいくつか追加しました。

diviページレイアウト

カスタムCSSは、[詳細設定]タブのページ設定カスタムCSSに追加されました。

diviページレイアウト

カスタムJavascriptが、[統合]タブの[Diviテーマオプション]内のヘッダータグに追加されました。

diviページレイアウト

コードモジュールを使用してカスタムCSSをページに追加する

CSSをページレイアウトとともにエクスポートするには、CSSをページ内のコードモジュールに追加する必要があります。これを行うには、ページ設定を開き、カスタムCSSをクリップボードにコピーします。

diviページレイアウト

この例のためにコピーしているカスタムCSSは次のとおりです。

#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}

次に、コードモジュールをページに追加します。コードモジュールはどこにでも追加できます。たとえば、ページの最上部に追加する場合は、後で見つけて編集する方が簡単な場合があります。または、CSSがターゲットにしていることがわかっている要素の横にコードモジュールを配置することもできます。この場合、CSSを使用して、連絡先フォームモジュールを表示および非表示にします。そこで、ContactFormモジュールのすぐ下にコードモジュールを追加します。

diviページレイアウト

コードモジュールの設定で、コピーした外部カスタムCSSを貼り付けてから、コードモジュールのコンテンツに貼り付けます。 CSSをページコンテンツに追加するため、CSSをスタイルタグでラップする必要があります。コードモジュールでのcssコードは次のようになります。

<style>
#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}
</style>

diviページレイアウト

完了したら、後で参照できるように、コードモジュールに管理ラベルを追加することをお勧めします。たとえば、ワイヤフレームビューでレイアウトを表示するときにそれが何であるかがわかるように、「CSSコード」という名前を付けることができます。

diviページレイアウト

その後、コードモジュールの設定を保存すれば完了です。

コードモジュールを使用してJavascriptをページに追加する

次に、テーマオプションの下のヘッダーであるカスタムJavascriptに対して同じことを実行する必要があります。コードをクリップボードにコピーしてから、DiviBuilderをアクティブにしてページに戻ります。次に、ページの任意の場所に別のコードモジュールを追加します。このJavaScriptはその要素にのみ適用されることがわかっているので、Contact formモジュールの直下に配置しましたが、どこにでも追加できます。

コードモジュールを追加したら、コピーしたJavascriptをコンテンツボックスに貼り付けます。コードはJavascriptであるため、スクリプトタグ内にラップされていることを確認してください。

<script>
jQuery(document).ready(function(){
 jQuery(".toggle-trigger").click(function(){
 jQuery("#toggle-container").toggleClass("toggle-active");
 });
});
</script>

diviページレイアウト

簡単に参照できるように、コードモジュールに管理ラベル（「JSコード」など）を付けます。

diviページレイアウト

これらの2つのコードモジュールには、実際のコンテンツをページに追加するコードがないため、モジュールがページのデザインを壊すことはなく、そこで心配する必要はありません。

ページレイアウトをエクスポートする方法

これで、ページレイアウトをエクスポートする準備が整いました。 Divi Builderを使用してページレイアウトをエクスポートするには、設定メニューを開き、移植性アイコンをクリックします。移植性ポップアップで、名前（「カスタムページレイアウト」）を入力し、「DiviBuilderレイアウトのエクスポート」ボタンをクリックします。

diviページレイアウト

これにより、jsonファイルがコンピューターにエクスポートされます。

これで、jsonファイルは、カスタムコードが完全に機能する別のプロジェクトの準備が整いました。

ページレイアウトをインポートする方法

jsonファイルを新しいページにアップロードするには、レイアウトをインポートするページを開きます。 DiviBuilderがアクティブであることを確認してください。次に、jsonファイルをページにドラッグアンドドロップするだけです。ポータビリティモーダルが自動的にポップアップし、既存のコンテンツを置き換えるオプションを選択するか、事前にバックアップを作成することができます。コンテンツを置き換える必要がないので、インポートボタンをクリックするだけで、すぐにページに読み込まれます。

diviページレイアウト

コードを元の場所に戻す

ページレイアウトをページに正常にインポートしたら、CSSとJSを元の場所に戻す必要がある場合があります。 CSSで現在のページのみのスタイルを設定する場合は、CSSを開始前のページ設定カスタムCSSに追加できます。また、サイト全体のすべてのページでCSSを使用できるようにする場合は、テーマカスタマイザー設定でCSSを追加のCSSに追加できます。

また、[テーマオプション]> [統合]で、元のテーマのヘッダーにJavascriptコードを追加し直すこともできます。または、コードをコードモジュール内に残して、スクリプトがそのページにのみ適用されるようにすることを検討してください。

最終的な考え

後で使用するためにページレイアウトを保存するときは、ページに必要なカスタムコードも保存することが重要です。秘訣は、Divi Codeモジュールを使用して、ページ自体にコードを格納することです。その後、コードはエクスポートされたjsonファイルに残ります。また、後でレイアウトをインポートするときにいつでも簡単に見つけられるように、これらのコードモジュールにラベルを付けるのに役立ちます。

また、私はあなたがあなたのためにより良い仕事を見つけるかもしれない他の方法があることを理解しています。たとえば、コードを個別のファイルとして保存することを決定できます。コードエディタを使用して、カスタムコードを貼り付け、.cssファイルと.jsファイルを保存できます。次に、それらをjsonファイルと一緒にフォルダーに保存できます。

とにかく、これがお役に立てば幸いです。以下のコメントであなたの考えを聞くのを楽しみにしています。

乾杯！