Meta Field ブロック

説明

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

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

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

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

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

リンク

カスタムフィールドの 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_namelast_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:

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 を使用して開発されています。

スクリーンショット

  • メタフィールドの設定

  • 接頭辞と接尾辞の設定

  • ACF 設定で Show in REST API 表示を有効にする

ブロック

このプラグインは1個のブロックを提供します。

  • Meta Field Block Display a custom field as a block on the front end. It supports custom fields for posts, terms, and users. It supports ACF fields explicitly.

インストール

  1. プラグインのファイルを/wp-content/plugins/meta-field-block ディレクトリにアップロードするか、WordPress のプラグイン画面よりプラグインを直接インストールします。
  2. WordPressの「プラグイン」画面よりプラグインを有効化してください

FAQ

このプラグインはどんな人に必要ですか ?

このプラグインは開発者向けに作成されました、もちろんエンドユーザーも使うことができます。

メタ値の入力と保存をサポートしていますか ?

いいえ、提供しません。このブロックはメタフィールドをブロックとして表示するだけです。

すべての種類のメタフィールドをサポートしていますか ?

単純な型、例えば文字列、整数、または数値のような基本的な型のみが直接使用できます。オブジェクトや配列などの他の複雑な型は、HTML マークアップ文字列に変換する必要があります。

すべての種類の ACF フィールドをサポートしていますか ?

It supports all basic field types that return strings or cast to strings. Some complex field types like image, link, page_link, post_object, relationship, taxonomy, and user are also supported in a basic format. To display complex ACF field types such as Group, Repeater, Flexible Content, Gallery, File, etc., you will need to either purchase MFB PRO or write your own custom code using the hook API.

接頭辞と接尾辞は何のためにあるのでしょうか ?

これらの設定の値は、プレーンテキストまたは許可された HTML 要素である必要があります。これらの値は、wp_kses( $prefix, wp_kses_allowed_html( "post" ) ) でフォーマットされます。これらの設定は、メタフィールドの名前や接頭辞または接尾辞を持つ値など、いくつかのユースケースに役立ちます。たとえば、$100、100pxなどです。

メタフィールドに対してスタイルは含まれていますか ?

このブロックは、メタフィールドの値に対して特定の CSS スタイルを提供しません。そのかわり設定から基本的なインラインスタイルを提供します。

他のメタフィールドフレームワークをサポートしていますか ?

はい、可能です。ただし、それらのメタフィールドが get_post_metaget_term_meta、または get_user_meta 関数を介してアクセス可能で、戻り値が文字列または文字列にキャストできる場合に限ります。ブロックエディターで値を表示するには、メタフィールドに REST API 経由でアクセスする必要があります。

表示されるマークアップが空白、またはメタフィールドの値と異なる場合はどうなりますか ?

There is a chance that your meta value contains some HTML tags or HTML attributes that are not allowed to be displayed. To fix this, you should use the hook apply_filters( 'meta_field_block_kses_allowed_html', $allowed_html_tags ) to add your tags and attributes to the array of allowed tags. By default, the block allows all tags from the $allowedposttags value and basic attributes for iframe and SVG elements.

評価

2024年4月16日 1 reply
finally! a SIMPLE way to get acf fields into FSE templates!!!
2024年1月31日 1 reply
One of the most useful and powerful plugin there is for WP. A must have and the support is fantastic! A+
41件のレビューをすべて表示

貢献者と開発者

Meta Field ブロック はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Meta Field ブロック” は3ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Meta Field ブロック” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.2.11

Release Date – 06 June 2024

  • Added – Support clientNavigation interactivity
  • Added – Allow changing the object type via the new filter meta_field_block_get_object_type
  • Improved – MFB Pro: Use useEntityRecord to display suggested names for setting fields

1.2.10

Release Date – 07 May 2024

  • Added – Add correct format for ACF textarea and editor field in the editor
  • Updated – Use useSettings instead of useSetting since WP 6.5
  • Improved – Flush server cache for object type and ACF fields when necessary
  • Improved – Add field label to the layout variations of SFB: Group, Flexible content, Repeater
  • Improved – MFB Pro: Don’t allow editing field path for repeater items SFB
  • Improved – MFB Pro: Flexible content field type

1.2.9

Release Date – 01 May 2024

  • Improved – Invalidate the MFB cache when updating a post, a term, a user, or settings
  • Updated – Help text in the settings page

1.2.8

Release Date – 22 April 2024

  • Updated – Since WP 6.5 we could not get the post ID and post type from the current context when accessing the template editor from a post/page.
  • Added – Add the emptyMessage feature to static blocks

1.2.7

Release Date – 16 April 2024

  • Added – Support displaying custom fields inside the Woo Product Collection block

1.2.6

Release Date – 22 March 2024

  • Added – Add query, and queryId of Query Loop as context parameters
  • Updated – PRO: Render nested ACF oEmbed fields

1.2.5

Release Date – 11 March 2024

  • Updated – Update inline documentation
  • Fixed – When front-end forms are submitted to admin-post.php, nopriv users are redirected to the login page.
  • Added – PRO: Display ACF gallery field
  • Added – PRO: Display ACF File as a video

1.2.4

Release Date – 22 February 2024

  • Added – Add typography and gap settings to prefix and suffix
  • Removed – Remove the redundant blockGap support feature
  • Improved – Remove _acf_changed from the list of suggested names
  • Fixed – Remove the block margin on value, prefix and suffix when the block is used inside a flow-layout block
  • Fixed – PRO: Correct the name for some field types for ACF
  • Added – PRO: Enable the hideEmpty setting for static blocks
  • Improved – PRO: Change the default perPage value for ACF query fields from 100 to 12
  • Added – PRO: Add the linkToPost setting to the ACF image field and ACF URL-as-image field

1.2.3

Release Date – 24 January 2024

  • Added – New dynamic field type to display private fields, support running shortcodes, and see the changes made by the hook meta_field_block_get_block_content both on the front end and the editor.
  • Updated – Change the name of a private hook from ‘_meta_field_block_get_field_value’ to ‘_meta_field_block_get_field_value_other_type’
  • Updated – Change the permission for getting custom endpoints from publish_posts to edit_posts

1.2.2

Release Date – 08 January 2024

  • Updated – Adjust the configuration for freemius

1.2.1

Release Date – 03 January 2024

  • Updated – Support full attributes for SVG and all basic shapes in the allowed HTML tags
  • Added – Add the settings page with guides
  • Added – Integrate with freemius 2.6.2
  • Updated – Add the section tag to the list of HTML tag
  • Updated – Ignore footnotes from the suggested values for the meta field name
  • Updated – Update Requires at least to 6.3

1.2

Release Date – 11 December 2023

  • Added – Allow getting meta fields from terms and users
  • Updated – Add new $object_type parameter to two main hooks meta_field_block_get_acf_field and meta_field_block_get_block_content
  • Added – Add variations for some common ACF field types
  • Updated – Increase the required version of PHP to 7.4
  • Updated – Refactor code for upcoming releases
  • Updated – Move the prefix and suffix to a separate panel

1.1.7

Release Date – 09 September 2023

  • FIX – The block does not show the number 0 if using it as the empty message

1.1.6

Release Date – 13 August 2023

  • DEV – Refactor block.json, update to block API version 3 for better WP 6.3 compatibility
  • FIX – Rename allowed HTML attributes for SVG

1.1.5

Release Date – 15 July 2023

  • DEV – Add a custom hook apply_filters( 'meta_field_block_kses_allowed_html', $allowed_html_tags ) for filtering allowed HTML tags in the value.
  • DEV – Allow displaying iframe, and SVG tag by default.
  • DEV – Force displaying color (text, background, link) attributes for unsupported themes.
  • DEV – Refactor code for React best practice.
  • DOC – Update readme for the hook meta_field_block_get_acf_field

1.1.4

Release Date – 20 May 2023

  • DEV – Change the placeholder text for the block in the site editor.
  • DEV – Add a setting to use the ACF field label as the prefix

1.1.3

Release Date – 31 Mar 2023

  • DEV – Support choice fields: true/false, select, checkbox, radio, button group
  • DEV – Add raw value to the meta_field_block_get_acf_field hook

1.1.2

Release Date – 28 Mar 2023

  • DEV – Refactor both JS and PHP code
  • DEV – Load ACF field value even if we could not load the field object
  • DEV – Separate settings group for WP 6.2

1.1.1

Release Date – 14 Mar 2023

  • DEV – Add a hideEmpty setting to hide the whole block if the value is empty
  • DEV – Add an emptyMessage setting to show a custom text in case the value is empty
  • FIX – The meta field did not show on the archive template

1.1.0

Release Date – 06 Mar 2023

  • DEV – Refactor all the source code for more upcoming features
  • DEV – Make sure the block works with all return formats for the image field, link field
  • DEV – Get all custom rest fields to show on the suggested help
  • DEV – Allow changing the tagName from the block toolbar
  • DEV – Improve performance
  • DEV – Add more core support features
  • DEV – Add more meaningful messages for some use cases
  • FIX – Allow displaying links without text

1.0.10

Release Date – 02 Feb 2023

  • DEV – Support multiple values for ACF User type

1.0.9

Release Date – 15 Sep 2022

  • FIX – Change the textdomain to the plugin slug

1.0.8

Release Date – 10 Sep 2022

  • FIX – Wrong handle for wp_set_script_translations. Thanks to Loïc Antignac (@webaxones)

1.0.7

Release Date – 07 Sep 2022

  • FIX – Add a null check for meta fields value before accessing it’s property

1.0.6

Release Date – 25 Jun 2022

  • DEV – Add an option to show the block’s outline on the Editor

1.0.5

Release Date – 21 Jun 2022

  • DEV – Display the placeholder text on the template context

1.0.4

Release Date – 02 May 2022

  • DEV – Support displaying some field types for ACF such as image, link, page_link, post_object, relationship, taxonomy

1.0.3

Release Date – 30 April 2022

  • DEV – Add supports for borders, and full typography options

1.0.2

Release Date – 28 April 2022

  • DEV – Add the title to block registration in JS
  • REFACTOR source code

1.0.1

Release Date – 23 March 2022

  • FIX – The block does not work in the site editor.

1.0.0

Release Date – 22 February 2022