Block Bindings と ACF - 富山でWeb勉強会

Block Bindings とは

私の理解で話すと、カスタムブロックを作らずに、なんなら場合によってはPHPコードも書かずに、カスタムフィールドの値をページ内に表示できる API です。
コードエディタの画面で、HTMLが触れる感じのスキルがあれば、何とかなるはず。
WordPress のコアとして実装されているものなので、基本的には何のプラグインも使わずに実装できます。

これが出てくるまでは、カスタムフィールドの値を投稿内に表示しようと思ったら、カスタムブロックを作るしかなくて、それはとてもハードルの高いものでした。

ACFは必須なのか？

結論を先に言うと、不要です。

カスタムフィールドと言えば、有名どころのプラグインとして ACF こと「Advanced Custom Fields」があります（一部の界隈には嫌われ者らしいし、いうて理由を聞いたら納得もできる）。

このサイトでも使っています。
記事に必要なメタ情報を入力するために使っていて、下記のような項目ごとのフィールドを記事管理画面に設けつつ、記事の詳細や表示の制御などにメタ情報を使っています。

最初にも書いた通り、Block Bindings API を利用するにあたって、ACFは必須じゃないです。その代わり、実用に足るもの（クライアントへの納品案件）にするとしたら、functions.php か、自作プラグインかで、入力枠の制御が必要になる…はずです。

こちらが参考になるやも。
https://chiilog.com/2024/04/12/2468

カスタムフィールドの値を表示するコード

ACFプラグインでカスタムフィールドを作る方法については割愛します！
公式のドキュメントを参考にしてください。
https://www.advancedcustomfields.com/resources/creating-a-field-group/

ブロックエディタで記事を編集、もしくはテンプレートの任意の位置に下記のコードをコピペして、黄色のハイライト部分を、表示したいカスタムフィールドの「キー」に変更します。

<!-- wp:paragraph {
    "metadata":{
        "bindings":{
            "content":{
                "source":"acf/field",
                "args":{
                    "key":"act-field-key"
                }
            }
        }
    }
} -->
<p>The value of this paragraph comes from a block binding and will be replaced at render.</p>
<!-- /wp:paragraph -->

カスタムフィールドの「キー」と言うのは、ACFの、「フィールドグループを編集」のところで確認できます。

これだけ！

このサイトでいうと、この辺りの表示に利用しています。

テンプレート側の見た目は、こうなる。

※正確には、同期パターンにしてから、テンプレートに組み込んでいます。

基本的には、コードエディタの表示にして編集していくことになると思います。