Recipe Card Blocks:レシピを簡単に投稿できるブロックを追加できる

詳細なレシピを簡単に投稿できるブロックを Gutenberg に追加できる WordPress 用プラグインの紹介です。
それは「Recipe Card Blocks by WPZOOM」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Recipe Card Blocks by WPZOOM

Recipe Card Blocks - WordPress.org

Recipe Card Blocks は、詳細なレシピを簡単に投稿できるブロックを Gutenberg に追加できます。
Recipe Card Blocks が Gutenberg に追加するブロックは以下の 5 種類。

  • レシピカード(Schema.org のマークアップ付き)
  • レシピ詳細
  • 材料
  • 料理手順
  • 栄養成分表

レシピカードブロックには、レシピ詳細・材料・料理手順が含まれています。
加えて、完成写真・料理動画・メモ欄を添えることができます。
構造化データにも対応しているので、
Google 検索などでリッチリザルトとして表示されます。

レスポンシブにも対応しており、スマホなどのモバイル端末でも表示可。

Recipe Card Blocks DEMO – demo.wpzoom.com

記事を作成もしくは更新時点でのバージョン:2.5.0
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに専用ブロックが追加されます。

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Recipe Card Blocks – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Recipe Card Blocks」と入力します。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Recipe Card Blocks を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

有効化すると

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

インストールしてくれたことに関するお礼などが表示されているだけです。

専用メニュー

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

ダッシュボードの「コメント」メニューの下に追加されています。

使い方

ブロックを使うので Gutenberg エディターで開きます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

ブロック追加画面を開くと上のような感じでブロックが追加されています。

レシピ詳細(Details)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

  • Servings
    何人前かを入力します。
  • Prep time
    下ごしらえの時間を入力します。
  • Cooking time
    調理時間を入力します。
  • Calories
    カロリーを入力します。

デフォルトでは上の 4 項目を入力できますが、
「Add Item」で項目を追加できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

アイコンも変更できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Number of Columns:
1 行に何列表示するかを指定できます。

Course:
料理のコースを入力します。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Cuisine:
何系の料理(日本料理・中国料理などなど)かを入力します。

Keywords:
キーワードを入力できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

デフォルトの 4 項目の数値を入力できます。
ブロック上からでも変更可。

料理手順(Directions)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

料理の手順を入力するのに便利なブロック。
各手順には画像も挿入できます。
手順は追加もできますし、グループ化もできます。
フロント画面では手順を印刷することもできます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Print Button Visibility:
印刷ボタンを表示するかどうか。

材料(Ingredients)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

料理で使う材料を入力するのに便利なブロック。
フロント画面では材料を印刷することもできます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

印刷ボタンを表示するかどうか。

レシピへジャンプ(Jump To Recipe)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

同じページにあるレシピカードブロックにジャンプできるボタンを配置できます。

レシピ印刷(Print Recipe)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

レシピカードブロックを印刷できるボタンを配置できます。

レシピカード(Recipe Card Block)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

直接画像を追加したり、数値を入力できますが、
右側のブロック設定からも行えます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

「Enter a short recipe description.」では簡単なレシピの説明を入力できます。
この項目はブロック設定には入力項目がありません。
「INGREDIENTS」は材料ブロックと使い方は同じです。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

料理の手順も手順ブロックと使い方は同じです。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

動画を追加できます。
右側のブロック設定からも追加できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

メモ欄。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

レシピを表示する際の表示スタイルを選択します。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

画像をアップロードできます。必須項目です。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Hide Image:
フロントエンド画面でレシピ画像を非表示にするかどうか。

Display Print Button:
印刷ボタンを表示するかどうか。

Pinterest Button
ピンタレストのボタンを表示するかどうか。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Select Alignment:
ヘッダーコンテンツの位置を左・真ん中・右から選択します。

Display Author:
投稿者を表示するかどうか。

Custom author name:
投稿者名をカスタマイズすることができます。
デフォルトでは、投稿者名が表示されます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

動画ファイルを添付できます。
添付する際には、アップロード・メディアライブラリから選択・URL から選択できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Course:
コースを表示するかどうか。

Add course:
コースを追加します。必須項目です。

Display Cuisine:
料理ジャンルを表示するかどうか。

Add cuisine:
料理ジャンルを追加します。必須項目です。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Difficulty:
料理の難易度を表示するかどうか。

Add difficulty level:
料理の難易度を入力します。

Add keywords:
キーワードを登録します。推奨。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Servings:
何人前かを表示するかどうか。

Servings Label:
ラベルを入力します。

Servings Value:
人数を入力します。

Servings Unit:
単位を入力します。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Preparation Time:
下ごしらえなどの時間を表示するかどうか。

Prep Time Label:
ラベルを入力します。

Prep Time Value:
時間を分単位で入力します。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Cooking Time:
調理時間を表示するかどうか。

Cook Time Label:
ラベルを入力します。

Cook Time Value:
調理時間を分単位で入力します。

Display Total Time:
下ごしらえ等の時間と調理時間を合計して表示するかどうか。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Calories:
カロリーを表示するかどうか。

Calories Label:
ラベルを入力します。

Calories Value:
カロリーを入力します。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

カスタムの項目と値を最大 4 個まで設定できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

構造化データのテスト結果が表示されています。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

設定されている構造化データを確認できます。

栄養成分(Nutrition)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

栄養成分を表示できます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

必要な項目に値を入力します。
上記の画像は、一部の項目だけを表示しています。

設定(Settings)

一般設定(General)

デフォルト設定(Default)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Course:
コースを表示するかどうか。

Display Cuisine:
料理ジャンルを表示するかどうか。

Display Difficulty:
料理の難易度を表示するかどうか。

Display Author:
レシピの投稿者を表示するかどうか。

「目」アイコンにマウスホバーすると表示位置がプレビュー表示されます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Default Author Name:
新規作成したレシピカードの投稿者名をカスタマイズできます。
デフォルトでは、投稿者の名前が表示されます。

Default Details Title:
新規または既存のレシピカードの詳細タイトルをカスタマイズできます。

Default Ingredients Title:
新規または既存のレシピカードの栄養成分のタイトルをカスタマイズできます。

Default Directions Title:
新規または既存のレシピカードの料理手順のタイトルをカスタマイズできます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Recipe Video Title:
新規または既存のレシピカードのレシピ動画タイトルをカスタマイズできます。

Default Notes Title:
新規または既存のレシピカードの「Notes」タイトルをカスタマイズできます。

Recipe Title Alignment:
レシピのタイトルの表示位置を左・真ん中・右から選択します。

Footer Copyright:
プレミアム版の機能です。
このプラグインの著作権表示を非表示にするかどうか。

レシピ詳細設定(Recipe Details)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Servings:
何人前表示をするかどうか。

Display Preparation Time:
下ごしらえ等の時間を表示をするかどうか。

Display Cooking Time:
調理時間を表示するかどうか。

Display Total Time:
合計時間を表示をするかどうか。

Display Calories:
カロリーを表示するかどうか。

レシピの評価設定(Rating Feature)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

プレミアム版の機能です。
レシピの評価機能を使用できます。

外観設定(Appearance)

レシピテンプレート設定(Recipe Template)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Default Template:
全てのレシピカードに使用するデフォルトのテンプレートを選択します。

レシピボタン設定(Recipe Buttons)

レシピへのジャンプとレシピの印刷ボタンを表示する際の設定を行えます。

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Automatically add Buttons:
投稿コンテンツの上にボタンを自動的に表示するかどうか。

Jump to Recipe Text:
「レシピへのジャンプ」ボタンのラベルをカスタマイズできます。

Print Recipe Text:
「レシピ印刷」ボタンのラベルをカスタマイズできます。

設定(Print)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Print Button:
レシピカードで印刷ボタンを表示するかどうか。

Recipe Image:
レシピ画像を印刷するかどうか。

Recipe Details:
レシピの詳細(何人前、下ごしらえ等の時間、調理時間、カロリー)を印刷するかどうか。

Summary Text:
レシピの概要を印刷するかどうか。

Steps Image:
料理手順の画像を印刷するかどうか。

ピンタレストの設定(Pinterest)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Display Pin Button:
レシピカードにピンタレストのピンボタンを表示するかどうか。

Pin Image:
ピンタレストのピンで使用する画像を選択します。

Pin Description:
ピンタレストのピンで使用するレシピの説明を選択します。

設定(Nutrition)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Layout Orientation:
全ての栄養成分ブロックで使用するデフォルトのレイアウトを選択します。

設定(Google Fonts)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

Enable Google Fonts:
Google Fonts を読み込んで各ブロックで使用するかどうか。

メタデータ設定(Metadata)

WordPressプラグイン「Recipe Card Blocks」の導入から日本語化・使い方と設定項目を解説している画像

プレミアム版の機能です。

URL

Recipe Card Blocks – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています