Meta Field ブロック

説明

こちらの個別ブロックプラグインを使用すると、メタフィールドまたはカスタムフィールドをフロントエンドでブロックとして表示できます。投稿、ターム、およびユーザーのカスタムフィールドをサポートしています。postId や postType コンテキストを持つ親ブロックのなかにネストしたり、個別ブロックとして使用できます。

コア API で取得できる値を持つフィールド (get_post_meta, get_term_meta, get_user_meta) の値が文字列であるか、文字列に変換できる場合に、フィールドの値を表示できます。ブロックエディターでフィールドの値を表示するには、それが REST API 経由でアクセス可能であるか、またはフィールドタイプが dynamic に設定されている必要があります。

また、Advanced Custom Fields プラグインで作成されたカスタムフィールドも明示的に表示することができます。文字列であるか、文字列に変換できるすべての ACF フィールドタイプ をサポートしています。 また画像やリンク、ページリンク、真偽値、チェックボックス、セレクト、ラジオ、ボタングループ、タクソノミー、ユーザー、投稿オブジェクト、関連フィールドタイプなど、他の複雑なフィールドも基本形式でサポートされています。

当プラグインは、開発者向けにフック API も提供しており、ブロックの出力を簡単にカスタマイズしたり、複雑なデータ型フィールドを表示したり、コンテキストパラメータとして object_id と object_type を使用して任意の種類のコンテンツを表示したりすることができます。

このブロックが本当に役立つエッジケースの1つは、クエリループ内でショートコードを使用する際に post_id を取得する必要がある場合です。その場合はフィールドタイプを dynamic に設定し、フィールド名にショートコードを入力します。ブロックはフロントエンドとエディターの両方で正しく表示されます。また、エディターでショートコードのプレビューのみを表示したい場合は、core/shortcode の改良バージョンとしてもこのブロックを使用できます。

リンク

• サイト
• How it works
• MFB PRO

カスタムフィールドの HTML 出力とは ?

カスタムフィールドの HTML 出力は、フィールドのコンテキストに依存します。フィールド値を取得するために、次のいずれかのコアAPI関数が使用されます: get_post_meta, get_term_meta, get_user_meta.

ACF フィールドの HTML 出力とは何ですか ?

1. すべての基本的なフィールドタイプ、文字列を返すか、文字列に変換できるものをサポート – HTML の出力は、get_field 関数により取得できます。

2. リンクタイプ – HTML の出力:

   <a href={url} target={target} rel="noreferrer noopener">{title}</a>
   

   target が _blank でない場合、rel 属性は存在しません

3. 画像タイプ – HTML 出力は、wp_get_attachment_image 関数から取得されます。画像サイズはプレビュー サイズ設定から取得されます。

4. True / False タイプ – 値が true の場合、HML 出力は Yes となり、値が false の場合は No となります。これらのテキスト値を変更するコードスニペットは以下です:

   add_filter( 'meta_field_block_acf_field_true_false_on_text', function ( $on_text, $field, $post_id, $value ) {
     return 'Yep';
   }, 10, 4 );
   
   add_filter( 'meta_field_block_acf_field_true_false_off_text', function ( $off_text, $field, $post_id, $value ) {
     return 'Noop';
   }, 10, 4 );
   

5. チェックボックス / セレクトタイプ – HTML の出力:

   <span class="value-item">{item_value}</span>, <span class="value-item">{item_value}</span>
   

   item_value は、フィールドの戻り形式に応じて、value または label になります。複数の選択値は、, で区切られます。区切り文字を変更するコードスニペットは以下です:

   add_filter( 'meta_field_block_acf_field_choice_item_separator', function ( $separator, $value, $field, $post_id ) {
     return ' | ';
   }, 10, 4 );
   

6. ラジオボタン / ボタングループタイプ – HTML の出力は、フィールドの返り値フォーマットに依存しますので value または label です。

7. ページリンクタイプ、投稿オブジェクトタイプ – 単一値フィールドの HTML 出力:

   <a class="post-link" href={url} rel="bookmark">{title}</a>
   

   複数の値を持つフィールドの場合は以下のようになります:

   <ul>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
   </ul>
   

8. リレーションシップタイプの場合は以下のようになります:

   <ul>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
   </ul>
   

9. タクソノミータイプ – HTML の出力:

   <ul>
     <li><a class="term-link" href={term_url}>{term_name}</a></li>
     <li><a class="term-link" href={term_url}>{term_name}</a></li>
   </ul>
   

10. ユーザータイプ – 単一値フィールドの HTML 出力:

    <a class="user-link" href={author_url}>{display_name}</a>
    

    複数の値を持つフィールドの場合は以下のようになります:

    <ul>
      <li><a class="user-link" href={author_url}>{display_name}</a></li>
      <li><a class="user-link" href={author_url}>{display_name}</a></li>
    </ul>
    

11. 他の複雑なフィールドタイプに対して、カスタム HTML 出力を生成するには、以下のフックを使用できます:

    apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value, $object_type )
    

    または、一般的なフックを使用してもかまいません:

    apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $object_id, $object_type )
    

コピー & ペーストのスニペット

meta_field_block_get_block_content フックを利用してブロックコンテンツをカスタマイズする場合は、フィールドタイプとして dynamic を選択することをおすすめします。これにより、フロントエンドとエディタの両方で変更が表示されます。ACF フィールドを使用している場合は、フィールドコンテンツを変更するために meta_field_block_get_acf_field フックを利用することをおすすめします。

1. ブロックの HTML 出力を変更するには ?
   meta_field_block_get_block_content フックを使用します:

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id, $object_type ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     if ( 'your_unique_field_name' === $field_name ) {
       $block_content = 'new content';
     }
   
     return $block_content;
   }, 10, 5);
   

   ACF フィールドに対してのみ、フック meta_field_block_get_acf_field を使用します:

   add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value, $object_type ) {
     $field_name = $field['name'] ?? '';
   
     if ( 'your_unique_field_name' === $field_name ) {
       $block_content = 'new content';
     }
   
     return $block_content;
   }, 10, 5);
   

   こちら基本的なコードスニペットは非常に強力です。これを使用して任意の投稿、用語、ユーザー、または設定フィールドから任意のフィールドを表示できます。詳細は、以下の使用例をご覧ください。

2. クエリループ内でブロックを投稿へのリンクでラップする方法は ?
   meta_field_block_get_block_content フックを使用します:

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) {
       $block_content = sprintf('<a href="%1$s">%2$s</a>', get_permalink($post_id), $block_content);
     }
   
     return $block_content;
   }, 10, 4);
   

   ACF フィールドに対してのみ、フック meta_field_block_get_acf_field を使用します:

   add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {
     $field_name = $field['name'] ?? '';
   
     if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) {
       $block_content = sprintf('<a href="%1$s">%2$s</a>', get_permalink($post_id), $block_content);
     }
   
     return $block_content;
   }, 10, 4);
   

   このちらスニペットは、HTML インラインタグまたは画像のみを含むブロックでのみ機能します。

3. 画像の URL フィールドを画像タグとして表示するには ?
   meta_field_block_get_block_content フックを使用します:

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) {
       $block_content = sprintf('<img src="%1$s" alt="your_image_url_field_name" />', esc_attr($block_content));
     }
   
     return $block_content;
   }, 10, 4);
   

   ACF フィールドに対してのみ、フック meta_field_block_get_acf_field を使用します:

   add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {
     $field_name = $field['name'] ?? '';
   
     if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) {
       $block_content = sprintf('<img src="%1$s" alt="your_image_url_field_name" />', esc_attr($block_content));
     }
   
     return $block_content;
   }, 10, 4);
   

4. ブロック内で複数のメタフィールドを表示する方法は ?
   例えば、ユーザーのフルネームを表示する必要があるときは、first_name と last_name という2つのメタフィールドから表示します。

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     if ( 'full_name' === $field_name ) {
       $first_name = get_post_meta( $post_id, 'first_name', true );
       $last_name  = get_post_meta( $post_id, 'last_name', true );
   
       // If the meta fields are ACF Fields. The code will be:
       // $first_name = get_field( 'first_name', $post_id );
       // $last_name  = get_field( 'last_name', $post_id );
   
       $block_content = trim("$first_name $last_name");
     }
   
     return $block_content;
   }, 10, 4);
   

   フィールドのタイプを dynamic に選択し、フィールド名を full_name と入力してください。

5. 設定フィールドを表示するには ?
   例えば、サイトのフッターテンプレートパートに footer_credit という名前の設定フィールドを表示する必要があるときは、以下の手順になります。

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     // Replace `footer_credit` with your unique name.
     if ( 'footer_credit' === $field_name ) {
       $block_content = get_option( 'footer_credit', '' );
   
       // If the field is an ACF Field. The code will be:
       // $block_content = get_field( 'footer_credit', 'option' );
     }
   
     return $block_content;
   }, 10, 4);
   

6. MFB をプレースホルダーとして使用しあらゆる種類のコンテンツを表示するには ?

MFB PRO で時間を節約しよう

投稿やターム、ユーザーなどシンプルなデータ型フィールドを表示するには、MFB の無料版のみ必要です。MFB プロ版 を使うと、ACF 複合フィールドを扱うときに開発時間を 90% 節約できます。これは、ACF 複合フィールド タイプを、コアコンテナ ブロックと同様に機能するコンテナブロックに変換することで実現します。これにより、ACF カスタム ブロックを作成したり、ACF 複合フィールドを表示するためのカスタムコードを記述したりする必要がなくなります。
以下は、MFB プロ版 を使用しコーディングなしで投稿テンプレートを作成する方法に関する動画チュートリアルです

MFB プロ版のおもな機能:

• 設定フィールドを表示
• ACF の高度なレイアウトフィールドを表示: グループ、繰り返し、および柔軟なコンテンツを表示。
• ACF の 関連フィールドや オブジェクトフィールドをクエリループとして表示。.
• ACF 画像フィールドをコア画像ブロックとして表示
• ACF Gallery field を表示
• ACF File field as a core video block を表示
• ACF リンクフィールドをコアボタンブロックとして表示
• ACF の URL フィールド、コアの画像ブロック、コアのボタンブロック、またはリンクとして表示
• ACF Email, and ACF File フィールドをコアのボタンブロックまたはリンクとして表示
• 特定の投稿、用語、またはユーザーのカスタム フィールドを表示

当プラグインが役に立った場合は、WordPress.org で簡単なレビューと 評価 をお願いできますか。皆様のご協力を心より感謝いたします。

もし興味がありましたら、他のプラグインもチェックしてみてください:

• Content Blocks Builder – このプラグインは、コードエディターを必要とすることなくブロックエディターで直接ブロック、バリエーション、パターンを作成できるようにすることで、ブロックエディターを強力なページ ビルダーに変えます。
• SVG Block – SVG 画像をブロックとして表示するブロックです。画像やアイコン、区切り線、ボタンなどに便利です。SVG 画像をアップロードしてアイコンライブラリに読み込むことができます。
• Icon separator – コアの区切りブロックと似ていますが、アイコンを追加できる小さなブロックです。
• Breadcrumb Block – JSON-LD 構造化データをサポートし、WooCommerce と互換性のあるシンプルなパンくずリスト ブロック。
• Block Enhancements – アイコン、ボックスシャドウ、トランスフォームなど、ブロックに便利な機能を追加するプラグインです。
• Counting Number Block – カウントできる数字を表示するブロック
• Better YouTube Embed Block – 埋め込まれた YouTube 動画のパフォーマンス問題を解決するブロック。複数の動画や再生リストを埋め込むこともできます。

このプラグインは @wordpress/create-block を使用して開発されています。