Lazy BlocksでRepeaterブロックの作り方

今までWordPressでACF(Advanced Custom field)を多く使ってきましたが、gutenbergになってからはプラグインのLazy Blocksを使い始めています。Lazy Blocksは簡単にブロックを作成できる便利なプラグインです。今回初めてLazy BlocksのRepeaterブロックを使い「スタッフ紹介」のブロックを作成したので、その手順について詳しく紹介していきます。

目次

  1. ブロックの作成方法
  2. Repeaterブロックの作成
  3. 子ブロックの作成
  4. ブロックを出力する設定
  5. ページでブロックを利用する
  6. まとめ

1.ブロックの作成方法

基本的な構成はACFと同じで、リピーターブロック（リピーターフィールド）の中に子ブロック（サブフィールド）を入れて入れ子の状態にします。
ACFと違うのは、出力用のコードをテンプレートに直接書くのではなく、Lazy Blocksの設定の入力欄に記入します。
また利用できる記述が複数あり、PHPの他に「HTML + Handlebars」が使えます。HandlebarsはJavascriptのテンプレートエンジンで、記述がシンプルで管理しやすいのが特徴です。

今回はよくあるスタッフ紹介のブロックを作成していきます。
完成すると下記のようになります。

001

では、最初に大枠のブロック（スタッフ紹介）から作成していきます。

2.Repeaterブロックの作成

下記の内容でブロックを追加します。

  • Title: スタッフ紹介
  • Slug: block-staff
  • Icon: 人のマーク
  • Category: 埋め込み

001

最初に大枠のブロックを登録したので、次はそのブロックで表示させる中身を登録します。
contentの＋ボタン(Add Control)をクリックして、Repeaterブロックを設定していきます。

001

下記の内容でブロックを設定します。

  • Title: スタッフ紹介
  • Slug: staff-list
  • Type: Repeater
  • Row Label: スタッフ{{#}}
  • Minimum Rows: 「1」
  • Maximum Rows: 「10」

Maximum Rows最大値は10にしましたが、必要に応じて変更してください。

001

これでRepeaterブロックの作成は完了です。
次にRepeaterブロックに子ブロックを作成していきます。

3.子ブロックの作成

スタッフ紹介の下の「Show Child Controls」をクリックし、子ブロックを追加していきます。

001

最初に「名前」を下記のように設定します。

  • Label: 名前
  • Name: staff-name
  • Type: Text

001

続けて「写真」の設定を行います。

  • Label: 写真
  • Name: staff-image
  • Type: Image

001

最後に「詳細」の設定を行います。

  • Label: 詳細
  • Name: staff-detail
  • Type: Classic Editor(WYSIWYG)

TypeをClassic Editor(WYSIWYG)にし、いろいろ入力できるようにしています。

001

これで子ブロックの作成は完了です。
ブロックは下記のようなカタチになっています。

001

4.ブロックを出力する設定

入力された内容を記事に出力するには、codeの欄に入力します。

codeの作成には下記の3種類から選べます。

  • HTML + Handlebars
  • PHP
  • Theme Template

通常は「HTML+Handlebars」か「PHP」を利用します。

次に、今回のブロックを「HTML+Handlebars」と「PHP」の2つの方法で記載してみました。

HTML + Handlebarsの場合

CodeのOutput Methodで「HTML + Handlebars」を選択し、 Frontendフィールドに下記のコード入力します。

<div class="staff-block">
{{#each staff-list}}
<div class="twoBlocks">
  <div class="twoBlocks-media"><img src="{{staff-image.url}}" alt="{{staff-image.alt}}"></div>
  <div class="twoBlocks-content">
    <div class="twoBlocks-name">{{staff-name}} </div>
    <div class="twoBlocks-txt">{{{staff-detail}}}</div>
  </div>
</div>
{{/each}}
</div>

001

Lazy Blocksの記述方法はLazy Blocksのマニュアルをご覧ください。phpとHandlebars両方の記載が掲載されています。

今回参考にしたのは下記のページです。

PHPの場合

CodeのOutput Methodで「PHP」を選択し、Frontendフィールドに下記のコード入力します。

<div class="staff-block">
<?php foreach ( $attributes [ 'staff-list' ] as $inner ) : ?>
<div class="twoBlocks">
  <div class="twoBlocks-media"><img src="<?php echo esc_url( $inner['staff-image']['url'] ); ?>">
  </div>
  <div class="twoBlocks-content">
    <div class="twoBlocks-name"><?php echo $inner [ 'staff-name' ]; ?> </div>
    <div class="twoBlocks-txt"><?php echo $inner [ 'staff-detail' ]; ?></div>
  </div>
</div>
<?php endforeach; ?>
</div>

001

これでブロックの作成は完了です。 最後に画面右上の公開ボタンを押してください。

Lazy Blocksの一覧を見ると、「スタッフ紹介」が登録されています。 001

5.ページでブロックを利用する

スタッフ紹介のページを作成し、ブロックを追加します。 ブロックの中でスタッフ紹介を選択してください。

001

下記のブロックが追加されています。

001

ブロックの入力画面はこのようになるので、入力していきます。 001

表示画面で確認すると、下記のように表示されます。 001

6.まとめ

Lazy Blocksを使うことで手軽にブロックを作成できますが、Repeaterブロックを使うことでLazy Blocksで出来る範囲が大きく広がります。いろんな形に活用できそうです。これでようやくACFを使わなくて済みそうですね。

前の記事 次の記事