動的コンテンツを使用してDiviでWooCommerce製品情報アコーディオンを作成する方法

公開: 2019-10-11

Diviで製品ページを作成する場合、アコーディオンモジュールを利用して、動的コンテンツを使用して製品情報を表示できます。 これにより、製品ページに独自のデザインを与えるだけでなく、ページ上の貴重なスペースを維持できます。

このチュートリアルでは、Diviの動的コンテンツ機能を使用して製品情報アコーディオンを作成する方法と、Divi Visual Builderを使用してアコーディオン（およびそのコンテンツ）を設計する方法を示します。

始めましょう。

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

製品情報アコーディオンレイアウトを無料でダウンロード

このチュートリアルのレイアウトデザインを手に入れるには、まず下のボタンを使用してレイアウトデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

同じ結果を表示するには、このチュートリアルで説明されている製品セットアップが必要であることに注意してください。

チュートリアルに行きましょう。

入門

開始するには、次のことを行う必要があります。

  • まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
  • WooCommerceプラグインをインストールしてアクティブ化します。 WooCommerceを初めてセットアップする場合は、基本的なセットアップウィザードを実行して、ストアの準備を整える必要があります。 完了すると、新製品を追加する準備が整います。
  • 以下の指示に従って、新しい製品を作成します。 新製品を追加する方法の詳細については、このチュートリアルを確認してください。

    • サンプル製品のセットアップ

    このチュートリアルのサンプル製品を設定するには、[製品]> [新規追加]に移動します。 製品に「マッサージ（シングルセッション）」というタイトルを付け、クリックしてDiviBuilderを使用します。

    divi製品情報アコーディオン

    次に、次の製品ページの設定と製品情報を更新します。

    1. [Diviページ設定]で、[サイドバーページなし]レイアウトを選択します。

    2.製品カテゴリを追加/選択します

    3.製品画像を追加します

    4.次の製品の詳細な説明コンテンツを追加します。 

    <h3>Quality Massage</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li>Vestibulum sagittis orci ac odio dictum tincidunt.</li>
 	<li>Donec ut metus leo.</li>
</ul>

<h3>Our Gaurantee</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    5. [製品データ]で、製品タイプを[可変製品]に変更します。

    6.次の値を持つ「Type」という名前の属性を追加します。 ホットストーン| アロマテラピー| 深部組織。 必ず「バリエーションに使用」を選択してください。

    divi製品情報アコーディオン

    7.次に、製品データトグルの下の[バリエーション]タブで、ドロップダウン入力を使用して、すべての属性からバリエーションを作成します。

    divi製品情報アコーディオン

    divi製品情報アコーディオン

    8.ドロップダウンから[通常価格の設定]を選択して、3つの変数すべての通常価格を設定します。

    divi製品情報アコーディオン

    9.ポップアップボックスに値「50」を入力し、[OK]を選択します。

    divi製品情報アコーディオン

    10.終了したら、製品を保存または公開します。

    これで、カスタム製品情報アコーディオンを使用してレイアウトの設計を開始する準備が整いました。

    Diviで動的コンテンツを使用して製品情報アコーディオンを作成する

    デフォルトの製品レイアウトでは、さまざまなWooモジュールを使用して製品情報が表示されます。 この例では、アコーディオンを使用して、製品の説明、製品の追加情報、および製品のレビューという3つの主要な製品情報を表示します。 これら3つのコンテンツはすべて、現在wootabsモジュール内に表示されています。 私たちがする必要があるのは、ウータブモジュールを削除し、動的コンテンツを介して引き込まれた同じ情報を持つアコーディオンモジュールと交換することです。

    これがその方法です。

    まず、クリックしてフロントエンドでDiviを使用し、ビジュアルビルダーを展開します。 次に、ウータブモジュールを削除します。

    divi製品情報アコーディオン

    次に、新しいアコーディオンモジュールを追加して、タブを置き換えます。

    divi製品情報アコーディオン

    [アコーディオン設定]ポップアップで、最初のアコーディオンの歯車アイコンをクリックして、個々のアコーディオン設定を開きます。

    divi製品情報アコーディオン

    「製品について」というタイトルを入力します。

    次に、本文コンテンツ入力ボックスにカーソルを合わせ、動的コンテンツアイコンをクリックします。

    divi製品情報アコーディオン

    動的コンテンツのリストから「製品の説明」を選択します。

    divi製品情報アコーディオン

    これにより、バックエンドで製品に設定した製品の長い説明が取り込まれます。

    divi製品情報アコーディオン

    最初のアコーディオンコンテンツを配置したら、2番目のアコーディオンの設定を開き、以下を更新します。

    • タイトル：仕様

    次に、「製品追加情報」の動的コンテンツを本文に追加します。

    divi製品情報アコーディオン

    2番目のアコーディオンコンテンツの準備ができたら、新しいアコーディオンアイテムを追加し、そのアコーディオンの設定を次のように更新します。

    • タイトル：レビュー

    次に、「Product Reviews」動的コンテンツを本文に追加して、製品レビュー要素/コンテンツを取り込みます。

    注：ライブページのコンテンツを表示するには、製品に少なくとも1つのレビューを追加していることを確認してください。

    Diviを使用した製品情報アコーディオンとコンテンツの設計

    製品情報アコーディオンに製品情報を表示するために必要な動的コンテンツが含まれているので、組み込みのアコーディオンモジュール設定を使用してアコーディオンのスタイルを設定する準備が整いました。

    アコーディオンモジュールの設定を開き、以下を更新します。

    • アイコンの色：＃ff9375
    • アイコンのフォントサイズを使用：はい
    • アイコンフォントサイズ：26px

    divi製品情報アコーディオン

    • 閉じたトグルの背景色：#ffffff
    • オープンタイトルのテキストの色：＃ff9375
    • タイトルテキストの色：＃222222
    • タイトルフォント：ラト
    • タイトルフォントの太さ：太字
    • タイトルフォントスタイル：TT
    • タイトルテキストサイズ：20px
    • タイトル文字の間隔：0.2em
    • タイトルラインの高さ：2em

    divi製品情報アコーディオン

    • ボディフォント：ラト
    • 本文サイズ：16px
    • ボディラインの高さ：1.8em

    divi製品情報アコーディオン

    • リンクテキストの色：＃ff9375

    これは、レビューの星評価など、各アコーディオンの動的コンテンツ内にあるすべてのリンクを対象とします。

    divi製品情報アコーディオン

    • 順序付けられていないリストのテキストの色：＃ff9375
    • 順序付けられていないリストスタイルタイプ：円
    • 順序付けられていないリストアイテムのインデント：5％

    divi製品情報アコーディオン

    • ボーダー幅：0px
    • 上枠幅：1px
    • 上枠の色：＃222222

    divi製品情報アコーディオン

    そして最後のステップとして、cssの小さなスニペットを追加して、アコーディオントグル間のデフォルトのマージンを取り除きましょう。

    [詳細設定]タブで、次のCSSをToggle要素に追加します。 

    margin-bottom: 0px;

    それでは、製品情報アコーディオンの最終的なデザインを確認しましょう。

    divi製品情報アコーディオン

    レイアウトの最終調整

    アコーディオンのデザインに合わせてレイアウトを調整することができます。 たとえば、各モジュールのフォントをLatoに調整し、変数のドロップダウンの周囲にカスタムの境界線と境界線の半径を追加し、それに合わせて背景色を塗りつぶして[カートに追加]ボタンを更新できます。

    完了したら、これが最終結果です。

    divi製品情報アコーディオン

    上記の無料ダウンロードとして、このレイアウトデザインを含めました。 お気軽にチェックしてみてください。 同じ結果を表示するには、このチュートリアルで説明されているように製品をセットアップする必要があることに注意してください。

    注：Diviの製品の多くのWooCommerce要素のデフォルトの色は、テーマカスタマイザー設定の2次色の値から継承されます。 ウーモジュールごとの色を更新するよりも、この2次色を1回更新する方が簡単な場合があります。

    最終的な考え

    私たちが学んだように、動的な製品情報を取り込むために使用できる要素はWooモジュールだけではありません。 製品情報アコーディオンは、Diviモジュールを使用して製品情報を独自の簡潔な方法で表示する方法の優れた例です。 製品ページの新しくてエキサイティングなアコーディオンデザインを自由に探索してください。 そしてもちろん、アコーディオンの代わりに複数のトグルモジュールを使用して、同様の結果を得ることができます。

    コメントでお返事をお待ちしております。

    乾杯！