Lazy Blocks | Repeaterブロックの使い方をFAQリストを作りながら解説

Web制作

こんにちは。
Web制作者のhikaruです。

先日、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ブロックは力を発揮します。

今日はここまで。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP