Diviテーマビルダーでレシピカードテンプレートを作成する方法

公開: 2019-11-26

フードブロガーやレシピ作成者は、公開するレシピを一貫して見ることがいかに重要かを知っています。一般的な解決策はレシピカードプラグインを使用することですが、これには設計上の制限があります。これで、Divi Theme Builderを使用して、サイトやブログ全体で使用する独自のレシピカードテンプレートを作成できます。 Advanced Custom Fields（ACF）プラグインの助けを借りて、ユニークで再利用可能なレシピカードの設計がこれまでになく簡単になりました。

この投稿では、動的コンテンツを使用してレシピカードテンプレートを作成する方法を紹介します。 Divi Theme Builder設定を使用することにより、その特定のカテゴリを選択することにより、レシピを含むブログ投稿にデザインを適用できます。このチュートリアルが、独自のカスタムフィールドを使用して独自のスタイルのレシピカードを作成するきっかけになることを願っています。

さまざまな画面サイズでデザインがどのように見えるかを見てみましょう。

レシピカードテンプレートプレビュー

さまざまな画面サイズでデザインがどのように見えるかを見てみましょう。

デスクトップ

タブレット

モバイル

1. Advanced CustomFieldsプラグインをダウンロードしてインストールします

検索してインストール

プラグイン検索バーで「AdvancedCustomFields」を検索してACFプラグインを見つけ、インストールしてアクティブ化します。

新しいフィールドグループを追加

[ACF]タブをクリックし、[新規追加]を選択します。グループに「レシピカード」という名前を付けます。 [フィールドの追加]ボタンを使用して、カスタムフィールドを1つずつ追加します。

カスタムフィールドを追加する

カスタムフィールドごとに、[フィールドの追加]ボタンをクリックします。それぞれを異なるタイプのコンテンツに合わせてカスタマイズできます。以下のリストは、各フィールドのラベルとタイプを指定します。モジュールを構築するときに簡単に見つけられるように、各フィールドラベルの先頭に「レシピ」という単語を追加します。ラベルを追加すると、フィールド名が自動入力されます。

レシピタイトル

レシピのタイトルから始めます。

フィールドラベル：レシピタイトル
フィールドタイプ：テキスト
必須？：はい
プレースホルダーテキスト：レシピタイトル
文字数制限：30

レシピ作者

次に、作成者のフィールドを作成します。

フィールドラベル：レシピ作成者
フィールドタイプ：テキスト
必須？：はい
プレースホルダーテキスト：作成者

レシピ準備時間

準備時間でそれに続きます。

フィールドラベル：レシピ準備時間
フィールドタイプ：数値
必須？：はい
プレースホルダーテキスト：##
プリペンド：準備時間：
追加：分

レシピサービング

次に、サービング。

フィールドラベル：レシピサービング
フィールドタイプ：数値
必須？：はい
プレースホルダーテキスト：##
プリペンド：サービング：

レシピフレーバーのヒント

フレーバーチップフィールドを追加します。

フィールドラベル：レシピフレーバーのヒント
フィールドタイプ：テキスト
必須？：はい
プリペンド：フレーバーのヒント：
文字数制限：40

レシピ画像

次に、画像フィールドを追加します。

フィールドラベル：レシピ画像
フィールドタイプ：画像
必須？：はい

レシピ材料タイトル

次に、材料のタイトル。

フィールドラベル：レシピ成分タイトル
フィールドタイプ：テキスト
手順：プレースホルダーテキストと同じように記述します。
必須？：はい
プレースホルダーテキスト：成分

レシピ材料リスト

成分リストでそれに従ってください。

フィールドラベル：レシピ成分リスト
フィールドタイプ：テキストエリア
手順：すべてのアイテムの後にスペースを追加します
必須？：はい
行：8
新しい行：自動的に<br>を追加します

レシピ準備タイトル

最後に、準備タイトル。

フィールドラベル：レシピ準備タイトル
フィールドタイプ：テキスト
手順：プレースホルダーテキストと同じように記述します。
必須？：はい
プレースホルダーテキスト：準備

レシピ準備リスト

最後に、準備リスト。

フィールドラベル：レシピ準備リスト
フィールドタイプ：テキストエリア
手順：すべてのアイテムの後にスペースを追加します
必須？：はい
行：10
新しい行：自動的に<br>を追加します

フィールドグループを公開する

フィールドグループを公開します。フィールドグループウィンドウは、次のスクリーンショットのようになります。

DiviBuilderでレシピカードテンプレートのACFプラグインコンテンツにアクセスする方法

動的コンテンツアイコンをクリックすると、高度なカスタムフィールドをDiviモジュールに追加できます。このアイコンは、コンテンツボックスの右上隅にあります。これはそれがどのように見えるかです：

2. DiviBuilderで新しいレシピカードテンプレートを作成します

Diviテーマビルダーの手順

1.レシピカテゴリを作成します

テンプレートを割り当てることができるように、「レシピ」という名前のカテゴリが必要です。ダッシュボードからカテゴリタブに追加します。

2. Diviテーマビルダーを開き、新しいテンプレートを追加します

Diviテーマビルダーを開き、新しいテンプレートを追加します。

3.グローバルボディを追加します

[グローバルボディを追加]をクリックして、テンプレートを特定のカテゴリ>レシピの投稿に割り当てます。次に、[テンプレートの作成]ボタンをクリックします。

4.カスタムボディを構築する

「グローバルボディの追加」をクリックし、「カスタムボディの追加」を選択します。

3.動的コンテンツを使用してレシピカードのデザインを再作成します

新しいセクションを追加

これで、レシピカードテンプレートのデザインを開始できます。 Divi Builderが開いたら、「最初からビルド」を選択します。新しいセクションを追加することから始めます。

バックグラウンド

セクション設定で、背景色を追加します。

背景色：ライトグレー#ededed

サイジング

また、デザインタブでサイズを調整します。

幅：100％
最大幅：100％

1行目を追加

カラム構造

1列の新しい行を追加します。

サイジング

モジュールを追加する前に、行のサイズ設定を調整してください。

最大幅：90％

列の設定

バックグラウンド

行内の列設定をカスタマイズします。まず、背景色を追加します。

背景色：白#ffffff

国境

次に、境界線のスタイルを変更します。

丸みを帯びた角：1vw四隅すべて
ボーダースタイル：4辺すべて
幅：5px
カラー：ベリーダークグレー＃333333

動的コンテンツを含むテキストモジュールを追加する

コンテンツ

行と列の設定が完了したら、モジュールを追加します。テキストモジュールを追加することから始めます。コンテンツウィンドウで、レシピタイトルの動的コンテンツを選択します。選択したら、歯車アイコンをクリックしてH1スニペットを入力します。

本文：レシピタイトル
ボディ設定：
- 前：<H1>
- 後：</ H1>

見出しテキスト

次に、それに応じてH1テキスト設定のスタイルを設定します。

見出しレベル：H1
フォント：オリエンタ
重量：太字
配置：中央
色：ベリーダークグレー＃3d3d3d
サイズ：
- デスクトップ：3vw
- タブレット：4vw
- 電話：5vw
文字間隔：3px
線の高さ：1.5em

間隔

間隔の値も変更します。

下マージン：
- デスクトップ：-1vw
- タブレット：-2vw
- 電話番号：-5vw
トップパディング：
- デスクトップ+タブレット：1vw
- 電話：2vw
ボトムパディング：0vw
左+右パディング：
- デスクトップ+タブレット：3vw
- 電話：4vw

動的コンテンツを含む2番目のテキストモジュールを追加する

コンテンツ

2番目のテキストモジュールを追加し、レシピ作成者の動的コンテンツを選択します。

本文：レシピ作者

文章

次に、テキストのスタイルを設定します。

フォント：サンセリフをエンコード
色：ベリーダークグレー＃3d3d3d
サイズ：
- デスクトップ：1.4vw
- タブレット：2.4vw
- 電話：3vw
配置：中央

間隔

その後、間隔を調整します。

トップマージン：1.5vw
トップパディング：
- デスクトップ+タブレット：0vw
- 電話：2vw
ボトムパディング：2vw
左+右パディング：
- デスクトップ：2vw
- タブレット+電話：3vw

2行目を追加

カラム構造

次に、次の列構造を使用して2番目の行を追加します。

サイジング

行設定を開き、それに応じてサイズ設定を調整します。

側溝幅：2
幅：90％
最大幅：100％
行の配置：左

間隔

次に、間隔。

トップ+ボトムパディング：0.5vw
左パディング：10vw

可視性

最後に、[詳細設定]タブで、表示を調整します。

水平方向のオーバーフロー：目に見える
垂直オーバーフロー：目に見える

列1+ 2 +3設定

国境

3つの列すべてを同じ方法でスタイル設定します。まず、境界線の設定に移動し、いくつかの変更を加えます。 3つの列すべてについて繰り返します。

丸みを帯びた角：1vw四隅すべて
ボーダースタイル：4辺すべて
幅：5px
カラー：ベリーダークグレー＃333333

変身

デザインにホバー効果を与えるには、次のように変換設定を調整します。 3つの列すべてについて繰り返します。

ホバー時の変換スケール：105％x 105％

列1にテキストモジュールを追加

コンテンツ

テキストモジュールを追加し、今のところコンテンツウィンドウを空のままにします。後で追加します。

バックグラウンド

モジュールに背景色を追加します。

背景色：ライムグリーン＃b1e88d

見出しテキスト

次に、H5テキスト設定のスタイルを設定します。

見出しレベル：H5
H5フォント：オリエンタ
H5カラー：ベリーダークグレー＃3d3d3d
H5サイズ：
- デスクトップ：1vw
- タブレット：2.3vw
- 電話：3.3vw
配置：中央

間隔

最後に、間隔の値を次のように調整します。

トップパディング：
- デスクトップ：1vw
- タブレット：1.5vw
- 電話：3.5vw
ボトムパディング：
- デスクトップ：0.5vw
- タブレット+電話：1.5vw
左+右パディング：
- デスクトップ：2vw
- タブレット+電話：3vw

テキストモジュールを列1から2回複製し、列2と3に移動します

ワイヤフレームビューで、最初の列のテキストモジュールを複製します。次に、複製を列2と3に移動します。

列1のテキストモジュールに動的コンテンツを追加する

準備時間の動的コンテンツを追加し、設定を調整します。

本文：レシピ準備時間
ボディ設定：
- 前：<H5>準備時間：
- 変更後：分</ H5>

列2のテキストモジュールに動的コンテンツを追加する

レシピ提供の動的コンテンツを追加し、設定を調整します。

本文：レシピサービング
ボディ設定：
- 前：<H5>サービング：
- 後：</ H5>

列3のテキストモジュールに動的コンテンツを追加する

フレーバーチップの動的コンテンツを追加し、設定を調整します。

本体：レシピフレーバーのヒント
ボディ設定：
- 前：<H5>フレーバーのヒント：
- 後：</ H5>

3行目を追加

カラム構造

次に、次の列構造を使用して3番目の行を追加します。

サイジング

モジュールを追加する前に、行のサイズを調整してください。

カスタムガター幅：2
幅：80％
最大幅：100％

間隔

また、デフォルトの上部マージンを消去します。

トップマージン：0vw

可視性

最後に、[詳細設定]タブで表示を調整します。

水平方向のオーバーフロー：目に見える
垂直オーバーフロー：目に見える

列1+ 2 +3設定

国境

境界線の設定から始めて、3つの列すべてを同じ方法でスタイル設定します。列2と3について繰り返します。

丸みを帯びた角：1vw四隅すべて
ボーダースタイル：4辺すべて
幅：5px
カラー：ベリーダークグレー＃333333

変身

デザインタブにホバートランスフォームを追加して続行します。列2と3について繰り返します。

ホバー時の変換スケール：105％x 105％

動的コンテンツを含む画像モジュールを列1に追加

コンテンツ

レシピ画像の動的コンテンツを含む画像モジュールを追加します。

画像：レシピ画像

動的コンテンツを含むテキストモジュールを列2に追加します

コンテンツ

次に、材料のタイトルに動的コンテンツを含むテキストモジュールを追加します。歯車のアイコンをクリックして、次のようにH3スニペットを入力します。

本文：レシピ成分タイトル
ボディ設定：
- 前：<H3>
- 後：</ H3>

見出しテキスト

次に、見出しテキストのスタイルを設定します。

見出しレベル：H3
H3Font：オリエンタ
H3カラー：ベリーダークグレー＃3d3d3d
H3サイズ：
- デスクトップ：1.6vw
- タブレット：2vw
- 電話：5.5vw
配置：中央

間隔

間隔を調整してモジュールを完成させます。

下マージン：0vw
トップパディング：
- デスクトップ：2vw
- タブレット：3vw
- 電話：4vw
左+右パディング：
- デスクトップ：2vw
- タブレット+電話：3vw

Dividerモジュールを列2に追加します

ライン

仕切りモジュールを追加し、次のようにスタイルを設定します。

色：ライムグリーン＃b1e88d

サイジング

次に、サイズ値を調整します。

重量：5px
幅：40％
配置：左

間隔

最後に、間隔を調整します。

トップマージン：0vw

動的コンテンツを含むテキストモジュールを列2に追加します

コンテンツ

材料リストの動的コンテンツを含むテキストモジュールを追加します。動的コンテンツタブの歯車アイコンをクリックして、生のHTMLを有効にします。

テキスト本文：レシピ成分リスト
本文の設定：生のHTMLを有効にする

文章

次に、次のようにテキストのスタイルを設定します。

フォント：サンセリフをエンコード
カラー：ベリーダークグレー＃333333
サイズ：
- デスクトップ：0.9vw
- タブレット：2vw
- 電話：3vw

間隔

また、間隔を調整します。

トップマージン：
- デスクトップ：-1vw
- タブレット：-3vw
- 電話番号：-5vw
トップパディング：
- デスクトップ+タブレット：0vw
ボトムパディング：
- デスクトップ：3vw
- タブレット+電話：4vw
左+右パディング：
- デスクトップ：3vw
- タブレット：4vw
- 電話：5vw

列2のすべてのモジュールを複製し、列3に移動します

ワイヤフレームビューで、2列目のすべてのモジュールを複製します。複製したモジュールを同じ順序で列3に移動します。

列3の最初のテキストモジュールに動的コンテンツを追加する

準備タイトルの動的コンテンツを追加します。

本文：レシピ作成タイトル

列3の2番目のテキストモジュールに動的コンテンツを追加する

また、準備リストの動的コンテンツを列の最後のテキストモジュールに追加します。

本文：レシピ準備リスト

4行目を追加

カラム構造

テンプレートを完成させるには、投稿コンテンツモジュールが必要です。次の列構造を使用して、新しい行を追加します。

サイジング

モジュールを追加する前に、行のサイズを調整してください。

カスタムガター幅：2
幅：100％
最大幅：80％

間隔

次に間隔設定を変更します。

左+右パディング：0vw

列1の設定

バックグラウンド

上記のレシピカードに一致するように列のスタイルを設定します。まず、背景を追加します。

背景色：白#ffffff

間隔

また、間隔を調整します。

左パディング：0vw

国境

大事なことを言い忘れましたが、境界線の設定を変更します。

丸みを帯びた角：1vw四隅すべて
ボーダースタイル：4辺すべて
幅：5px
カラー：ベリーダークグレー＃333333

列2を空のままにします。

投稿コンテンツモジュールを列1に追加

文章

投稿コンテンツモジュールを1列目に追加し、レシピカードテンプレートに一致するようにテキストのスタイルを設定します。

フォント：サンセリフをエンコード
カラー：ベリーダークグレー＃333333
サイズ：
- デスクトップ：0.9vw
- タブレット：2vw
- 電話：3vw
線の高さ：2em

見出し1テキスト

フォント：オリエンタ
カラー：ベリーダークグレー＃333333
サイズ：
- デスクトップ：2vw
- タブレット：5vw
- 電話：6vw

見出し2テキスト

フォント：オリエンタ
カラー：ベリーダークグレー＃333333
サイズ：
- デスクトップ：1.8vw
- タブレット：4.5vw
- 電話：5.5vw

見出し3テキスト

フォント：オリエンタ
カラー：ベリーダークグレー＃333333
サイズ：
- デスクトップ：1.6vw
- タブレット：4.5vw
- 電話：5vw

間隔

レシピカードのスタイルに合わせて、間隔の値を調整します。

上+下のパディング：2vw
左+右パディング：
- デスクトップ：4vw
- タブレット+電話：6vw

ブロック引用線の色またはリンクの色を変更する場合は、テーマカスタマイザのアクセント色で変更できます。

4.ACFプラグイン設定とレシピカードテンプレートを使用して投稿を編集/作成します

カスタムフィールドの入力

投稿を開くか追加します。コンテンツ領域の下に、レシピカードテンプレートのすべてのカスタムフィールドがあります。このアボカドトーストのデザインを再現するには、次のようにフィールドに入力します。

レシピタイトル：

スーパーグリーンビーガンアボカドトースト

レシピ作者：

マグダレナスウィフター– www.veganchef.com

レシピ準備時間：

レシピサービング：

レシピフレーバーのヒント：

海塩フレークとエクストラバージンオイルを使用する

レシピ画像：

アボカドトースト画像

レシピの材料タイトル：

材料

レシピの材料リスト：

3全粒粉パンのスライス
1熟したアボカド
100グラム。調理したソラマメ
10g。緑の芽
みじん切りねぎ1個
30g。砕いたフェタチーズ
1レモンを半分に切る
オリーブオイルのダッシュ
海塩を振りかける

レシピの準備タイトル：

準備

レシピ準備リスト：

1.お好みに合わせてパンのスライスをトーストします。
2.アボカドを開き、果肉を取り除き、フォークでつぶします。
3.レモン汁をアボカドの上に絞り、塩で味付けします。
4.アボカドマッシュをトーストの上に広げます。
5.そら豆、もやし、刻んだネギをふりかけます。
6.塩で味付けします。
7.砕いたフェタチーズを加えます。
8.オリーブオイルで仕上げます。

投稿にタイトルを付ける

題名

投稿にタイトルを追加することを忘れないでください。

アボカドトーストレシピ

コンテンツの追加、カテゴリの選択、注目の画像の追加

ブログ投稿の内容を通常のエディターに書き込むか挿入します。レシピカテゴリを選択し、注目の画像を追加します。

レシピカードテンプレートプレビュー

もう一度、レシピカードテンプレートを使用して完成した投稿がさまざまな画面でどのように表示されるかをもう一度見てみましょう。

デスクトップ

タブレット

モバイル

それはラップです！

このレシピカードテンプレートのデザインを実現するために行った手順を簡単に確認しましょう。

ACFプラグインをインストールします。
レシピカードフィールドグループを設定します。
カスタムフィールドを追加します。
新しいテンプレートを作成し、「レシピ」カテゴリの下のブログ投稿に割り当てます。
モジュールのACFフィールドからの動的コンテンツを使用します。
フィールドに入力して、ブログ投稿を作成または編集します。
ブログ投稿コンテンツを追加します。

このデザインは動的コンテンツを含むテンプレートとして作成されているため、ACFプラグインのカスタムフィールドを使用するすべてのレシピブログ投稿で一貫性が保たれます。このレシピカードテンプレートのデザインが、食品関連のブログのあらゆる種類の新しく革新的なレシピテンプレートに影響を与えることを願っています。コメントであなたの考えを教えてください。