【WordPress】CFSの代替に最適！Lazy Blocksで簡単カスタムフィールド設定【繰り返し処理（リピーター）も対応】

2024年9月6日2024年9月13日

皆さんこんにちは！IWACODEの岩村です。

WordPressのカスタムフィールドを利用する際、Custom Field Suite（CFS）を使っていた方も多いでしょう。しかし、脆弱性の発見により、現在CFSの使用を見直す必要が出てきています。多くの方が代替としてAdvanced Custom Field（ACF）を検討していますが、ACFの無料版には繰り返しフィールド機能がなく、リピーター処理ができない点で悩んでいる方も少なくありません。

そこで今回は、Lazy Blocksというプラグインを使って、繰り返し処理に対応したブロックの作成方法をご紹介します。

Lazy Blocksの特徴

Lazy Blocksは、WordPressのブロックエディター（Gutenberg）でカスタムブロックを作成・管理できるプラグインです。特に、繰り返しフィールド（リピーター機能）を簡単に実装できる点で優れています。以下に、Lazy Blocksの主な特徴をまとめました。

Gutenberg完全対応: Lazy BlocksはGutenbergエディターに完全対応しており、ビジュアル的なブロック編集が可能です。これにより、コーディング不要でカスタムブロックを作成できます。
繰り返しフィールドのサポート: ACF（無料版）で対応が難しい繰り返し処理も、Lazy Blocksでは簡単に設定可能です。これにより、商品リストやスタッフ紹介ページなど、複数の要素を繰り返し表示したいケースに適しています。
カスタムフィールドの柔軟性: Lazy Blocksは、テキスト、画像、数値、リストなど多様なフィールドタイプをサポートしており、フィールドのグルーピングや条件付き表示にも対応しています。

Lazy Blocksのインストール、設定の手順

次に、CFSで作成していたカスタムフィールドをLazy Blocksに移行する手順を説明します。

今回はスタッフ紹介のブロックを作成し、WordPressのPHP関数を使用し取得してみようと思います。

Lazy Blocksのインストールと設定

WordPress管理画面でLazy Blocksをインストール、有効化します。

有効化すると管理画面に以下のように表示されます。

Lazy Blocksを有効化したら、「Lazy Blocks」→「新規投稿を追加」からブロックの作成を開始します。フィールド名やフィールドタイプを設定していきます。

※サンプルブロックは必要ないので削除して問題ありません。

ブロックを作成

このような画面が表示されるので、以下の手順にて登録していきます。

ブロック名を入力（ひとつ前の画面に一覧として表示されます）
SLUG名を登録（PHPにて取得する際にこちらの名称をキーにして取得します）
アイコンを設定します。グーテンベルク上で表示されるアイコンです。
カテゴリを設定します。作成したブロック定義をグーテンベルク上の選択画面のどのカテゴリに入れるかの指定になります。
グーテンベルク上でデータを登録する際に、グーテンベルク上で操作するのか、それとも右側の入力エリアで操作するのかの指定となります。

繰り返しの項目を作成

次に繰り返し項目（リピーター）を設定していきます。

繰り返し項目の名称を登録します。グーテンベルク上で表示されるラベルとなりますのでわかりやすい名前が良いです。
NAMEを登録します。DBに登録する際のキーとなる情報になるので、他と被らないように指定してください。後ほどPHPで取得する際にこちらの値を指定します。
リストから繰り返しを選択します。※結構下の方にあります。
こちらは繰り返し項目を追加していた際に表示される名称となります。グーテンベルク上では{{#}}には連番が割り当てられるため、実際には｛｛｝｝は表示されません。

繰り返し内の入力項目を作成

今回はスタッフ紹介のため、以下の項目を作成します。

スタッフ画像（image）
スタッフ名（text）
ひとことコメント（textarea）

Hide Child Controlsを押下し、繰り返しの中に入力項目を作成します。

画像

LABELに名称を設定
NAMEにキー情報を指定
TYPEに画像で指定

テキスト

LABELに名称を設定
NAMEにキー情報を指定
TYPEにテキストを指定

テキストエリア

LABELに名称を設定
NAMEにキー情報を指定
TYPEにテキストエリアを指定

設定したブロックを公開

画面右上の公開ボタンを押して保存します。
※上記の画像は既に公開ボタンを押しているため、ボタンの名前が「保存」になっています。

スタッフ紹介ブロックが作成されています。

グーテンベルク（ブロックエディタ）にてデータの登録

グーテンベルク（ブロックエディタ）上で、実際にデータを登録していきます。

ブロックの中に「スタッフ紹介」が追加されています。

こちらを選択すると、以下のようにエディタに追加されます。

+Add Rowを押下して画像、スタッフ名、ひとことコメントを登録してきます。

３名分追加してみました。

PHPファイルにて取得する

今回作成したブロック、登録した値を取得するコードのサンプルとなります。

<?php
// ブロックデータを取得
$blocks = parse_blocks(get_the_content());

foreach ($blocks as $block) :
  if ($block['blockName'] === 'lazyblock/block-staff') :

    $staff_list_json = urldecode($block['attrs']['staff-list']);
    $staff_list = json_decode($staff_list_json, true);

    if (!empty($staff_list)) :
      foreach ($staff_list as $staff_item) :
        $staff_image = $staff_item['staff-image']['url'];
        $staff_name = $staff_item['staff-name'];
        $staff_message = $staff_item['staff-message'];
?>
        <div class="staff-introduction">
          <div class="staff-image">
            <img src="<?php echo esc_url($staff_image); ?>" alt="スタッフ画像">
          </div>
          <div class="staff-info">
            <h3 class="staff-name"><?php echo esc_html($staff_name); ?></h3>
            <p class="staff-message"><?php echo esc_html($staff_message); ?></p>
          </div>
        </div>
<?php
      endforeach;
    endif;
  endif;
endforeach;
?>

主な処理内容

ブロックデータの取得

$blocks = parse_blocks(get_the_content())で、現在のページからすべてのデータを取得します。

対象ブロックの判別

取得したブロックデータの中から、blockNameがlazyblock/block-staffであるブロックを判定します。

  if ($block['blockName'] === 'lazyblock/block-staff') :

データのデコード

urldecode()関数を使用して、エンコードされたスタッフリストデータをデコードし、json_decode()関数でJSON形式のデータをPHPの配列として変換します。

    $staff_list_json = urldecode($block['attrs']['staff-list']);
    $staff_list = json_decode($staff_list_json, true);

データがエンコードされていたため、上記の処理にてデータが正常に見えるように調整しております。

スタッフデータのループ処理

デコードしたデータが存在する場合にのみ、各スタッフの情報をループ処理で展開します。

if (!empty($staff_list)) :
  foreach ($staff_list as $staff_item) :

出力結果

CSSは最低限とし、ページ上出力した結果が以下のようになります。

  .staff-introduction {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    width: min(964px, 100%);
    margin: 0 auto;
    padding: 30px 0;
  }

  .staff-image img {
    width: 150px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .staff-info {
    display: flex;
    flex-direction: column;
  }

  .staff-name {
    font-size: 1.2em;
    margin: 0;
    font-weight: bold;
  }

  .staff-message {
    margin-top: 10px;
    font-style: italic;
    color: #555;
  }