Meta Field ブロック

説明

This single-block plugin allows you to display a meta field or a custom field as a block on the front end. It supports custom fields for posts, terms, and users. It can be nested inside a parent block that has postId and postType context, such as Query Block, WooCommerce Product Collection, or used as a stand-alone block.

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

You can also display custom fields created by the Advanced Custom Fields or Meta Box plugin explicitly. It supports all ACF field types and Meta Box field types whose values are strings or can be converted to strings. Some other ACF complex fields such as Image, Link, Page Link, True False, Checkbox, Select, Radio, Button Group, Taxonomy, User, Post Object and Relationship field types as well as Meta Box fields such as Select, Checkbox, Radio, Image, Video, Taxonomy, User, Post field types are also supported in basic formats.

当プラグインは、開発者向けにフック 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_true_false_on_text', function ( $on_text, $field_name, $field, $post_id, $value ) {
     return 'Yep';
   }, 10, 4 );
   
   add_filter( 'meta_field_block_true_false_off_text', function ( $off_text, $field_name, $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, $field_name, $field, $post_id, $value ) {
     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 )
    

What is the HTML output of Meta Box fields?

1. Similar to ACF fields, all basic fields that return strings or can cast to strings using the function rwmb_get_value are supported.

   The HTML output of cloneable basic fields is:

   <span class="value-repeater-item">{item_1_value}</span>, <span class="value-repeater-item">{item_2_value}</span>
   

   Use the following hooks to change the tag and the separator:

   apply_filters( 'meta_field_block_mb_clone_field_item_separator', ', ', $field, $post_id, $field_value )
   apply_filters( 'meta_field_block_mb_clone_field_item_tag', 'span', $field, $post_id, $field_value )
   

2. Single image types – The HTML output is from the wp_get_attachment_image function. The image size is from the image_size setting.

3. Image list types (Cloneable Single image, Image, Image advanced, Image upload) – The HTML output is:

   <figure class="image-list">
     <figure class="image-item"><img /></figure>
     <figure class="image-item"><img /></figure>
   </figure>
   

4. Checkbox / Switch type – Similar to ACF True / False type.

5. Multi-choice types (Select, Select advanced, Button group, Autocomplete, Image select, Checkbox list) – The HTML output is:

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

   To display the label instead of the value, use this hook:

   apply_filters( 'meta_field_block_mb_field_choice_item_display_label', false, $field_name, $field, $post_id, $value )
   

   To change the separator, use this hook:

   apply_filters( 'meta_field_block_mb_field_choice_item_separator', ', ', $file_name, $field, $post_id, $value )
   

6. Radio type – The output is the field value by default. To display label or change the separator, use the same hooks as the multi-choice types.

7. Post type – The HTML output for a single-value field is:

   <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. Taxonomy, Taxonomy advanced type – The HTML output for a single-value field is:

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

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

   <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>
   

9. User type – Similar to ACF User type

10. Video type – The HTML output for a single-value field is:

    <video controls preload="metadata" src={video_src} width={video_width} poster={poster} />
    

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

    <figure class="video-list">
      <figure class="video-item"><video /></figure>
      <figure class="video-item"><video /></figure>
    </figure>
    

11. To display complex field types or change the output of a field, use the hook meta_field_block_get_mb_field or the general hook meta_field_block_get_block_content.

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

When using the meta_field_block_get_block_content hook to customize block content, we recommend selecting dynamic as the field type. This way, both the front end and the editor will show the changes. If you are working with ACF Fields, we suggest using the meta_field_block_get_acf_field hook to modify the field content. Similarly, Meta Box users should use the meta_field_block_get_mb_field hook to modify the content. ACF snippets can also be used with Meta Box fields, but you must use the correct hook name and replace the get_field function with the rwmb_get_value function.

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, or Meta Box 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 custom blocks or writing custom code for displaying complex fields.
Below is a video tutorial on how to use MFB Pro to build a post template without coding

MFB プロ版のおもな機能:

• Display settings fields.
• ACF の高度なレイアウトフィールドを表示: グループ、繰り返し、および柔軟なコンテンツを表示。
• Display ACF Repeater fields in a carousel layout, which is useful for displaying banner sliders.
• ACF の 関連フィールドや オブジェクトフィールドをクエリループとして表示。.
• Display the ACF Image field as a core image block.
• Display the ACF Gallery field as a gallery using grid or masonry layouts or as a carousel of images.
• Display the ACF File field as a video block, an image block, a button block, or a link.
• Display the ACF Link field as a button block.
• Display the ACF URL field as an image block, a button block, or a link.
• Display the ACF Email, and ACF File fields as a button block or a link.
• Display the Meta Box Group field, similar to the ACF Group field.
• Display the Meta Box Cloneable Group field as a repeater block, similar to the ACF Repeater field. Supports row, stack, grid or carousel layouts.
• Display the Meta Box Post field as a Query Loop.
• Display the Meta Box single image fields as an image block.
• Display the Meta Box image list fields as a gallery using grid or masonry layouts or as a carousel of images, similar to the ACF Gallery field.
• Display the Meta Box File single input field as a video block, an image block, or a button.
• Set a single image sub-field (ACF Image or Meta Box Image) as the background image of a group field.
• 特定の投稿、用語、またはユーザーのカスタム フィールドを表示

当プラグインが役に立った場合は、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 を使用して開発されています。