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 の改良バージョンとしてもこのブロックを使用できます。

リンク

• サイト
• 機能
• 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>
   

   The item_value can be either value or label, depending on the return format of the field. Multiple selected values are separated by ,. Below is the code snippet to change the separator:

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

6. Radio button / Button group type – The HTML output can be either value or label, depending on the return format of the field.

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 で時間を節約しよう

To display simple data type fields for posts, terms, and users, you only need the free version of MFB. MFB Pro can save you 90% of development time when working with ACF complex fields. It achieves this by transforming your ACF complex field types into container blocks, which work similarly to core container blocks. This eliminates the need for creating ACF custom blocks or writing custom code for displaying ACF complex fields.
Below is a video tutorial on how to use MFB Pro to build a post template without coding

The main features of MFB PRO are:

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

If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.

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

• Content Blocks Builder – ブロックエディターで、サイト用のブロック、パターン、またはバリエーションを簡単に作成するためのツール。
• Block Enhancements – ブロックに便利な機能: アイコン、ボックスシャドウ、トランスフォームなどを追加するプラグインです。
• Icon separator – コアの区切りブロックと似ていますが、アイコンを追加できる小さなブロックです。
• SVG Block – インラインSVG画像を簡単かつ安全に挿入するためのブロックで、3000以上のアイコンとよくある非四角形の区切りもバンドルされています。
• Counting Number Block – 数字のカウント効果を持つ数字を表示するためのブロックです。
• Breadcrumb Block – JSON-LD 構造化データをサポートする、シンプルなパンくずリストブロックです。
• Better Youtube Embed Block – Embed YouTube videos without slowing down your site.

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