先日、Lazy Blocksのリピータ機能を使用したところ、
かなり使えそうだと感じたので、紹介しようと思います。
ちなみにここでは、Repeaterブロックを使った簡単なFAQリストを
作成しながら、使い方を説明していきます。
Repeaterブロック作成
新規ブロックを作成します。
- Title: 「よくある質問」
- Slug: 「block-faq」
- Icon: 「はてなマーク」
- Category: 「フォーマット」

Add Controlボタンを選択して、Repeaterブロックの設定をします。
- Label: 「よくある質問」
- Name: 「faq-list」
- Type: 「Repeater」
- Row Label: 「よくある質問{{#}}」
- Minimum Rows: 「1」
- Maximum Rows: 「10」

見出しブロック作成
Show Child Controlsを選択して子ブロックを表示します。

Add Child Control を選択して、見出しブロックの設定をします。
- Label: 「見出し」
- Name: 「faq-title」
- Type: 「Text」

本文ブロック作成
Add Child Control を選択して、本文ブロックの設定をします。
- Label: 「本文」
- Name: 「faq-body」
- Type: 「Classic Editor」

Code作成
次のコードをFrontendフィールドに入力します。
<dl class="faq-list"> <?php foreach ( $attributes [ 'faq-list' ] as $inner ) : ?> <div class="faq-list__inner"> <dt class="faq-list__head faq-list__js-btn"> <?php echo $inner [ 'faq-title' ]; ?> </dt> <dd class="faq-list__body faq-list__body-js"> <?php echo $inner [ 'faq-body' ]; ?> </dd> </div> <?php endforeach; ?> </dl>
Output Methodで、PHPを選択。

公開する、を選択します。
エディタで表示を確認をします
エディタ画面で、ブロックの追加 > フォーマットを選択。
すると、よくある質問ブロックが存在するはずです。

どんな状況でRepeaterブロックを使うの?
次のようなコードがあります。
<dl> <dt>タイトル</dt> <dd>本文</dd> <dt>タイトル</dt> <dd>本文</dd> </dl>
dtとddのセットですが、
コンテンツによって増減する可能性があるとします。
そういったときに、ボタン一つでdtとddのセットを増減できる、
Repeaterブロックは力を発揮します。
今日はここまで。
コメント