WordPressのブロックをテンプレートの任意の位置に振り分けて表示する方法

WordPressのクラシックテーマで制作しているWebサイトにおいて、1ページの中でブロックの表示位置を振り分ける方法について紹介しています。

テンプレートの任意の位置にGutenbergブロックを呼び出せるため、カスタムフィールドの代わりにブロックでコンテンツを管理したい場合に有効な方法です。

どのようなケースか

次の画像はカスタムブロックを2箇所に挿入したページです。

背景色グレーのセクションが3つあり、最初のセクションに「ブロックA」を、最後のセクションに「ブロックB」のカスタムブロック（黒背景に白文字のテキスト）を挿入しています。カスタムブロック以外のHTMLは全てテンプレートに直接記述しています。

エディタは次のようになっています。2つのブロックを挿入しただけのシンプルな画面です。

この方法は、ページ全体はテンプレートで構成しつつ、特定のセクションのみ編集可能にしたい場合に有効です。企業サイトを例にすると以下のようなイメージです。

1
- 企業情報           ← 固定
2
- 実績              ← ブロックを活用したい
3
- サービス内容        ← 固定
4
- お客様の声         ← ブロックを活用したい
5
- お問い合わせ        ← 固定

本文を表示する<?php the_content(); ?>では、ブロックをセクションごとに分割して表示することは困難です。そこで今回の方法の出番となります。

動的に変更したい箇所が複数ある場合、カスタムフィールドを使うケースも多いかと思いますが、ブロックで管理したい場合や繰り返しフィールドが使えない環境では、この方法が有効な選択肢になり得ます。

実装例

早速ですが以下が実装に使用したコードです。

1
<?php
2
$content = get_the_content();
3
$blocks = parse_blocks($content);
4
?>
5

6
<section>
7
    <h2>見出し</h2>
8
    <?php
9
    foreach ($blocks as $block) {
10
        if ($block['blockName'] === 'lazyblock/block-a') {
11
            echo render_block($block);
12
        }
13
    }
14
    ?>
15
</section>
16
<section>
17
    <h2>見出し</h2>
18
    <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
19
</section>
20
<section>
21
    <h2>見出し</h2>
22
    <?php
23
    foreach ($blocks as $block) {
24
        if ($block['blockName'] === 'lazyblock/block-b') {
25
            echo render_block($block);
26
        }
27
    }
28
    ?>
29
</section>

やっていること

コードのポイントを順に説明します。

ブロックデータの取得

テンプレートの冒頭でget_the_content()で投稿本文を取得し、parse_blocks()でブロック構造の配列に変換しています。この処理は1回のみ行い、以降は変数$blocksを使い回します。

ブロックの出力

表示したい箇所でそれぞれ$blocksをループし、引数で指定したブロック名（例：lazyblock/block-a）と一致するブロックをrender_block()でHTMLとして出力しています。render_block()はブロックデータをHTML文字列に変換するWordPressの関数です。

今回はLazy Blocksのカスタムブロックを使用していますが、コアブロックでも同様に機能します。

動作確認環境

以下の環境において動作を確認しました。

• WordPress 6.9.4（クラシックテーマ）
• PHP 8.0.0
• Lazy Blocks 4.2.1

この方法のメリット・デメリット

メリットとデメリットをまとめると次のようになります。

冒頭でも触れましたが、カスタムフィールドの繰り返し機能を使用できない現場ではかなり有効な方法だと感じています。

この方法は、ブロックを「レイアウト要素」ではなく「コンテンツデータ」として扱う設計とも言えます。デメリットを把握しつつ適切な場面で使用していきたいです。