Meta Field ブロックは、カスタムフィールドをブロックとして挿入できるようになるWordPressプラグインです。

投稿内やサイトエディターのテンプレートなどに、カスタムフィールドを設置できます。

Meta Field ブロックのインストール

インストール手順は以下の通りです。

ファイルをFTPでアップロードしてインストール

1. Meta Field ブロックをダウンロードします。
2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
3. 管理画面の[プラグイン]ページで、Meta Field ブロックを有効化します。

WordPress管理画面でインストール

1. [プラグイン] – [新規追加]にアクセスします。
2. 「Meta Field ブロック」で検索します。
3. [今すぐインストール]をクリックして、Meta Field ブロックをインストールします。
4. [有効化]をクリックしてプラグインを有効化します。

Meta Field ブロックの使い方

Meta Field ブロックの使い方については、[設定] – [Meta Field Block]に詳しく記載されていますので、参考にしてください。

カスタムフィールドのREST APIを有効にする

ここでは、Advanced Custom Fieldsで追加したカスタムフィールドを例に解説いたします。

まずはACFのフィールドグループで、「グループ設定」の「REST API で表示」をオンにします。

ちなみに、自前でカスタムフィールドを登録している場合は、以下のようにshow_in_restを有効にします。

register_meta(
  'post',
  'post_meta_string',
  array(
    'show_in_rest' => true,
    'type'         => 'string',
    'default'      => 'The default string value',
    'single'       => true,
  )
);

ブロックの挿入

投稿編集画面で「Meta Field Block」ブロックを挿入します。”テーマ”カテゴリー内に追加されています。

メタフィールド設定で「フィールドタイプ」を”ACF”にして、フィールド名を入力します。フィールド名は「提案される値」に表示されますので、その中からコピペします。「値が空の場合、ブロックを非表示」にチェックを入れると値が入っていない場合は出力されません。

「接頭辞と接尾辞」ではラベルの表記を設定します。

保存すると、このように投稿に設定されたカスタムフィールドの値が表示されます。

サイトエディターでも同様の方法でカスタムフィールドをブロックとして配置できます。

使い方をYouTube動画で見る

YouTubeで使い方の動画が用意されているので、ご紹介いたします。

コーディングなしで動的データを表示する投稿テンプレートの構築方法(ブロックテーマ)

ACF の繰り返しフィールドをリスト、グリッド、カルーセルとして表示する方法

ACF ギャラリーのフィールドをグリッド、マーソンリー、カルーセルとして表示する方法

あとがき

カスタムフィールドを簡単にブロック化できて超絶便利ですね。

特にブロックテーマでのサイト制作で活躍しそうです。