WordPress のカスタムブロックの作り方を調べてみた

最近は SES の合間に、大阪の自動車関連製品の会社さん向けに製品カタログサイトを作っているのですが、車種別の製品を登録するために WordPress のカスタムブロックを作らないとダメだと思って、通常通り React を使って作る方法を調べていたのですが、どうやら ACF Pro(Advanced Custom Field Pro)を持っていれば、ACF Blocks というのが使えるらしく、少し調べてみたら、恐ろしく簡単にブロックを作れることに気が付いてしまったので、今後は ACF Blocks を使ってカスタムブロックを作ることにしようと思う。

作り方は、テーマフォルダ内に blocks フォルダを作成して、その中にブロックのテンプレートを作成して、ブロックの入力項目をいつも通りカスタムフィールドとして作成した上で、そのブロックのテンプレートとカスタムフィールドを紐づけるように設定をしたらそれで完成するようだ。

通常通り React を使って作るパターンについても調べてみたんだけど、まず ES5 の範疇で node.js の環境を使わずに作る方法についても調べてみたら、要素を組み立てる部分が大変過ぎて実用的じゃないことにはすぐに気が付いた。なので、JSX を使って要素をコーディングする方法は悪くないと思うけど、WordPress の良さである、 node.js に依存しなくても開発ができるというライトウェイトな点が台無しになってしまう。

上記で挙げた ACF Block を使う場合は、PHP だけでカスタムブロックができてしまうのだから、これ以上に楽なことはない。慣れた環境で、慣れた ACF のデータを扱うための関数を使いながら、ブロックの追加ができる。

ただ、ACF Block が使えるのは ACF Pro だけなので、Pro版を購入しなければならない。現状で Pro 版を購入しようと思うと、サブスク型でしか購入できないため、定期的にお金がかかるため、選択肢から外れる場合も多そうだ。私の場合は、2018年頃に買い切り型で最上位のプランを購入していたので、その場合のユーザー保護で、永続的に Pro 版の利用ができるようだ。

ひとまず、今回のプロジェクトで、これからカスタムブロックの制作に入るけど、実際に作ってみた結果について、また報告できればと思います。