私はもう長いことAdvanced Custom Fields (ACF) を愛用してきました。
ご存じない方のために説明すると、ACFはコンテンツをよりコントロールできるようにするプラグインです。 カスタム投稿メタを使用して、構造化データでコンテンツをリッチ化します。 また、投稿、ページ、カスタム投稿タイプなどを更新する際に、メタボックスのデータフィールドを構築および設定できます。
過去に、私は Delicious Brains ウェブサイトのプロジェクトの一環として、このプラグインを使用しました。 しかし、このブログの記事で、サードパーティのソリューションが WordPress の開発にとっていかに重要であるかがわかりました。 説明しましょう…
ACF の仕組み
ACF が何をするのか理解するのに時間がかかったので、ここで簡単に例を挙げます。 私はこれを犬の救済のためのチャリティー サイトで使用しました。 しかし、犬の名前、説明、投稿タイトル、コンテンツに加えて、犬の品種と性別、ビデオへのリンク、いくつかの写真も保存したいのです。
そのために、カスタム フィールド >> 新規追加メニューからこのデータ用のフィールド グループを作成しました:
いろいろなタイプのフィールドを追加することができます。 ここでは、選択項目、テキスト ボックス、単純なブール値のチェックボックス、およびギャラリー フィールドを使用しました。 後者は ACF Pro のオプションで、これについては後で詳しく説明します。
以下は、ユーザー オプションを含むセレクト ボックスを設定する方法です。
次に、このグループは Dog カスタム投稿タイプの編集画面でのみ表示すると言いました。 ここでは、投稿タイプ、テンプレート、カテゴリ、ユーザー ロールなど、さまざまなロジックを使用できます。
ただし、ACF の真の力はデータを追加するときにあります。
ACF フィールドへのデータ追加
Dog 投稿で作業していると編集画面の様子が違って見えます。
これにより、コンテンツ編集者がすべての追加データを簡単に追加できるようになりました。 また、get_field 関数コードを使用して、テーマ内のデータを表示する場所を正確に指定できます。
<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>プラグインがなければ、WordPress デフォルトのカスタム メタボックスを使用するか、ゼロから独自の豊かなメタボックスをコーディングするか、カスタム分類法に犬の品種と性別を押し込む必要があります。 投稿コンテンツに埋め込まれたネイティブギャラリーも使わなければならないかもしれない。
ACF Elevates WordPress
ACF は、コンテンツ管理システム (CMS) としての WordPress が、コンテンツをよりコントロールするために失っていたものを、まさに提供してくれます。
さらに、開発者や代理店は、ショートコードやページ ビルダー、あるいは post_content をまったく必要とせずに、クライアントがコンテンツをコントロールできるように、これを活用しました。
実際、ACF は私たちの顧客の間で非常に人気があるので、WP Offload Media との統合を追加する必要がありました。
画像とトリミングは、Amazon S3、DigitalOcean Spaces、または Google Cloud Storage にオフロードされたメディアで動作します。
ACF に追加フィールド オプションを加える
プラグインの無料版には多くの機能性が備わっています。 しかし、リピーター、柔軟なレイアウト、ギャラリーなどのフィールドにアクセスするには、プレミアム バージョンが不可欠です。
たとえば、ユーザーが製品ページのスライダーで選択した体験談を表示できるようにするために、リピーター フィールドを使用しているとします。
次に、ページの編集時に表示され、どの証言を表示するかを制御できます。
アクションとフィルターがコードベースに散りばめられているため、ACF は常に非常に開発者に優しく、拡張可能なツールとなっています。
しかし、私が過去に発見したいくつかの問題の 1 つは、フィールド設定、特にフィールド グループとフィールドのカスタム投稿タイプをデータベースに保存することでした。
これは、開発サイトでフィールド定義を変更した場合、WP Migrate DB Pro などのソリューションを使用してデータベースを本番環境に戻すことができない、ということを意味します。
これは、古くからあるデータベース マージの問題です (私を巻き込まないでください…)。 私は以前、最初にライブ サイトでフィールドを変更することによって、これを回避していました。 その後、データベースをローカル サイトにプルして、開発を続行します。
幸いなことに、ACF はローカル JSON 機能を導入しました。 これは、フィールド設定を JSON ファイルとして保存し、データベースと同期できるようにするものです。
この素晴らしい機能により、ACF データに対するデータベース マージ問題が解決されます。 また、JSON ファイルをバージョン管理下に置き、設定を通常のファイル展開プロセスの一部にできることを意味します。
- JSON ディレクトリをテーマ外の
app/dataディレクトリに定義しました (変更される可能性があるため)。 -
admin_init上のデータベース設定が古いJSONファイルは自動的に同期します。
現在、WordPress Block Editor（旧称Gutenberg）がありますが、素晴らしい編集体験を生み出すには、ACFがまだ不可欠だと主張します。
Using the Block Editor alongside ACF
ブロックエディタはコンテンツの編集にACFとは異なる方向を示しています。
当初、ブロック エディタはメタ ボックスをサポートしていませんでした。 投稿の編集」画面から削除されたこともあり、多くの怒りの声が上がりました。 現在では、メタボックスのサポートが追加されています。
カスタム データ用のフィールドの代わりにブロックを使用することで、新しいエディターは ACF の未来に大きな影響を与える可能性があります。 さらに、ネイティブなソリューションがある今、新しいサイトがサードパーティのツールをインストールする可能性ははるかに低くなります。
しかし、提案されたコアな変更が ACF の将来を脅かしたのは、これが初めてではありません。 数年前、Post Meta のために新しいチームが編成されました。
多くのライブラリ/フレームワーク/プラグイン (CMB、SCB、WPAlchemy、ACF、Pods) があり、今のところこの役割を担っています。
当時、私は、新しい競合機能を導入するこの決定により、いくつかのプラグインが冗長になるかもしれないことについて書きました。 最終的に、Post Meta プロジェクトはどこにも行かず、新しいエディターが到着し、ACF は嵐を乗り越えました。
ACF は立ち直っただけでなく、適応もしました。
ACF は立ち直っただけでなく、適応しました。その結果、ACF のパワーとカスタム ブロックの柔軟性を組み合わせたものが出来上がりました。
ACF を使用してブロックを構築する方法
明らかに、カスタム ブロックは有益です。 しかし、それを作成するための技術的なプロセスは複雑です。
ACF Blocks は、現在のカスタム フィールドと統合され、動的でカスタマイズ可能であり、次の 2 つのことを実現できます:
- 現在のカスタム フィールドを Block Editor エコシステムに取り入れることができます。
- カスタム インライン ソリューションを作成できる。
これらは PHP テンプレート ファイルまたは callback 関数を使用して表示されるので、テーマを開発するのと同じようにできます。
ACF Blocks は不便ではありませんが、もしあなたの React スキルがまだ低いなら、さらに調査したいと思うことでしょう。
ACFブロックの構築
それでは、ACFブロックを構築する方法を説明します。 ツールの Pro バージョンには、ACF 5.8 からこの機能が含まれているので、2 年ほど前から私たちの手元にあることになります。 以下は、超シンプルなブロック登録コードの例です：
add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}ここから先は、フィールドグループの作成とブロックのレンダリングを行いたいところです。 前者はWordPressのカスタムフィールド> Field Groups画面から行います。
ここで、フィールドグループを追加して通常通りに入力してください。 しかし、「場所」メタボックスでは、「ブロック」ルールを使用して、（この場合）Testimonial Block を選択したいと思います。
最後に、ブロックをレンダーする必要があるでしょう。
- ブロックの初期登録時に
render_template設定で与えたパラメータをもとに、テーマ用のテンプレートファイルを作成します。 - Choose the right method for rendering the Block.
- Enqueue your styles and scripts.
Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.
On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.
‘InnerBlocks’ Support
The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.
They can be custom or core Blocks, and you’re able to use the current “Title”, “Content”, and “Button” fields in your own ACF Blocks.
Here’s a quick tutorial to get up and running. InnerBlockを使い始めるには、'jsx' => truesupports 配列に含めます。
acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));次に、echo<InnerBlocks /> HTML タグを Block テンプレート内に記述する必要があるでしょう。
echo '<div class="block-about__content">'; echo '<InnerBlocks />';これは簡単な例に過ぎませんが、InnerBlockでできることはまだまだたくさんあります。
ACF ブロックの代替案
もちろん、ACF はブロックを作成するための唯一の解決策ではありえません。
過去に「バニラ」ブロックの作成方法を取り上げましたが、始める前に React の知識が必要です。
さまざまなコンポーネントからブロックを組み立てる WordPress プラグインもありますが、これらは開発者向けではなく、「エンドユーザーいじり」向けだと言えるでしょう。 Lazy Blocks は定期的に更新されているので、提供されているものを試してみたい人には良い選択肢です。
ACFの未来
リリース以来、ACFはWordPressの補完プラグインとして欠かせない存在になっています。 それは、プラットフォームを拡張し、豊かにし、より使いやすくします。
しかし、ブロック エディターと ACF Blocks を組み合わせることは、ケーキの上のアイシングであり、CMS の将来に対する素晴らしい投資です。 これは、開発者が React の急な学習曲線から始めることなく、Block Editor を拡張するための参入障壁を低くするのに役立ちます。 長い目で見れば、ブロックエディターの進化を懸命に後押ししている人たちは、これを勝利と見なすことができるかもしれません。