前言介紹
- 這款 WordPress 外掛「Meta Field Block」是 2022-02-21 上架。
- 目前有 7000 個安裝啟用數。
- 上一次更新是 2025-04-14,距離現在已有 20 天。
- 外掛最低要求 WordPress 6.7 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 49 人給過評分。
- 論壇上目前有 2 個提問,問題解答率 100% ,不低,算是個很有心解決問題的開發者團隊了!
外掛協作開發者
外掛標籤
block | gutenberg | meta field | custom field | ACF custom field |
內容簡介
這個外掛允許開發者/使用者在前端以區塊方式顯示元資料欄位,並支援 ACF 欄位。它可以嵌套在具有 postId、postType 上下文(如 Query Block)的父區塊內,也可以獨立使用。
怎樣使用帶有 ACF Field Types 的區塊:
1. 支援返回字串或可強制轉換為字串的所有基本欄位類型 - 輸出來自 get_field 函數。
2. 連結類型 - 輸出標記是 {title}。如果 target 不是 _blank,則沒有 rel 屬性。
3. 影像類型 - 輸出標記由 wp_get_attachment_image 函數提供。圖像大小從預覽大小設置中取得。
4. 頁面連結類型、文章物件類型 - 單一值欄位的輸出標記是 {title},多值欄位的輸出標記是 {title}。
5. 關聯類型 - 輸出標記是 {title}。
6. 分類法類型 - 輸出標記是 {term_name}。
7. 使用其他複雜欄位類型,您可以經過 hook apply_filters('meta_field_block_get_acf_field', 'field_value', 'post_id', 'field') 或高級使用案例中的通用 hook 來編寫自定義輸出標記。
高級使用案例:
1.如何更改區塊的輸出?
2.如何顯示像依賴於多個元資料欄位的動態欄位等複雜值?
如果這個外掛對你有用,請在 WordPress.org 上快速評論和評分以幫助我們傳播這個消息。我非常感謝您。
如果您感興趣,請查看我的其他外掛:
1. Content Blocks Builder - 一個直接在區塊編輯器上輕鬆創建區塊、模式或變化的工具。
2. Block Enhancements - 一個在區塊上添加更多有用功能的外掛,例如圖示、盒子陰影、變形等。
3. Icon separator - 一個小型區塊,就像核心/分隔符區塊,但可以添加圖示。
4. SVG Block - 一個插入內嵌 SVG 圖像非常容易且安全的區塊。它還包含超過 3000 個圖示和一些常用的非矩形分隔符。
5. Counting Num...(翻譯不完整)
原文外掛簡介
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.
You can display any field whose value can be retrieved by the core API (get_post_meta, get_term_meta, get_user_meta) and is a string or can be converted to a string. To display the field value in the Block Editor, it has to be accessible via the REST API or have the field type set to 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.
This plugin also provides developer-friendly hook APIs that allow you to easily customize the output of the block, display complex data type fields, or use the block as a placeholder to display any kind of content with object_id and object_type as context parameters.
An edge case where this block is really helpful is when you need to get the correct post_id in your shortcode when you use it in a Query Loop. In that case, you can set the field type as dynamic and input your shortcode in the field name. The block will display it correctly on both the front end and the editor. Alternatively, if you only want to see the preview of your shortcode in the editor, you can also use this block as a better version of the core/shortcode.
Links
Website
How it works
MFB PRO
What is the HTML output of a custom field?
The HTML output of a custom field on the front end depends on the context of the field. It uses one of these core API functions to get the field value: get_post_meta, get_term_meta, get_user_meta.
What is the HTML output of ACF fields?
All basic field types that return strings or can cast to strings are supported – The HTML output is from the get_field function.
Link type – The HTML output is:
{title}
There is no rel attribute if the target is not _blank
Image type – The HTML output is from the wp_get_attachment_image function. The image size is from the Preview Size setting.
True / False type – The HML output is Yes if the value is true, and No if the value is false. Below is the code snippet to change these text values:
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 );
Checkbox / Select type – The HTML output is:
{item_value}, {item_value}
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, $field_name, $field, $post_id, $value ) {
return ' | ';
}, 10, 4 );
Radio button / Button group type – The HTML output can be either value or label, depending on the return format of the field.
Page link type, Post object type – The HTML output for a single-value field is:
{title}
For a multiple-value field is:
Relationship type – The HTML output is:
Taxonomy type – The HTML output is:
User type – The HTML output for a single-value field is:
{display_name}
For a multiple-value field is:
For other complex field types, you can generate a custom HTML output by using the hook:
apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value, $object_type )
Or by using the general hook:
apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $object_id, $object_type )
What is the HTML output of Meta Box fields?
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:
{item_1_value}, {item_2_value}
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 )
Single image types – The HTML output is from the wp_get_attachment_image function. The image size is from the image_size setting.
Image list types (Cloneable Single image, Image, Image advanced, Image upload) – The HTML output is:
Checkbox / Switch type – Similar to ACF True / False type.
Multi-choice types (Select, Select advanced, Button group, Autocomplete, Image select, Checkbox list) – The HTML output is:
{item_value}, {item_value}
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 )
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.
Post type – The HTML output for a single-value field is:
{title}
For a multiple-value field is:
Taxonomy, Taxonomy advanced type – The HTML output for a single-value field is:
{term_name}
For a multiple-value field is:
User type – Similar to ACF User type
Video type – The HTML output for a single-value field is:
For a multiple-value field is:
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.
Copy & paste snippets
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.
How to change the HTML output of the block?
Using the meta_field_block_get_block_content hook:
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);
Using the meta_field_block_get_acf_field hook for ACF Fields only:
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);
This basic snippet is very powerful. You can use it to display any fields from any posts, terms, users or setting fields. Please see the details in the below use cases.
How to wrap the block with a link to the post within the Query Loop?
Using the meta_field_block_get_block_content hook:
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('%2$s', get_permalink($post_id), $block_content);
}
return $block_content;
}, 10, 4);
Using the meta_field_block_get_acf_field hook for ACF Fields only:
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('%2$s', get_permalink($post_id), $block_content);
}
return $block_content;
}, 10, 4);
This snippet only works with the block that has only HTML inline tags or an image.
How to display an image URL field as an image tag?
Using the meta_field_block_get_block_content hook:
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('', esc_attr($block_content));
}
return $block_content;
}, 10, 4);
Using the meta_field_block_get_acf_field hook for ACF Fields only:
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('', esc_attr($block_content));
}
return $block_content;
}, 10, 4);
How to display multiple meta fields in a block?
For example, we need to display the full name of a user from two meta fields first_name and last_name.
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);
Choose the field type as dynamic and input the field name as full_name.
How to display a setting field?
For example, we need to display a setting field named footer_credit on the footer template part of the site.
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);
How to use MFB as a placeholder to display any kind of content?
SAVE YOUR TIME WITH 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
The main features of MFB PRO are:
Display settings fields.
Display ACF advanced layout fields: Group, Repeater, and Flexible content.
Display ACF Repeater fields in a carousel layout, which is useful for displaying banner sliders.
Display ACF Relationship and Post Object fields as a Query Loop.
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.
Display custom fields from a specific post, term or user
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.
Please check out my other plugins if you’re interested:
Content Blocks Builder – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.
SVG Block – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.
Block Enhancements – Adds practical features to blocks like icons, box shadows, transforms, etc.
Counting Number Block – A block to display numbers with a counting effect
Better YouTube Embed Block – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.
The plugin is developed using @wordpress/create-block.
各版本下載點
- 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Meta Field Block」來進行安裝。
(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。
1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.0.7 | 1.0.8 | 1.0.9 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.1.5 | 1.1.6 | 1.1.7 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.2.5 | 1.2.6 | 1.2.7 | 1.2.8 | 1.2.9 | 1.3.0 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.4.0 | trunk | 1.0.10 | 1.2.10 | 1.2.11 | 1.2.13 | 1.2.14 |
延伸相關外掛(你可能也想知道)
Smart Custom Fields 》Smart Custom Fields 是一個管理自訂欄位的簡單外掛。, 功能, , 支援自訂欄位群組迴圈。, 支援元資料修訂。, 支援元資料預覽。, , , 欄位類型, , 文字, 文字...。
Meta Box 》一個 meta Box 出現在所有文章和頁面的管理區域中,您可以在其中添加所需要的內容。, 將代碼或短代碼粘貼到網站的任何部分。, 您在 meta box 上鍵入的內容將...。
Blocks for ACF Fields 》總結:Blocks for ACF Fields 是一款 WordPress 外掛,能輕鬆在區塊編輯器中顯示進階自訂欄位,無需編碼。適合開發者和內容創作者使用,簡化新增和顯示自訂欄...。
Post Meta 》外掛首頁 | 使用說明 | 影片教學 | 示意圖, Post Meta 是一個 WordPress 的自訂文章欄位、文章類型和分類管理外掛。它具有用 AJAX 和 jQuery 開發的現代化介...。
Show Post Content Anywhere 》Show post content 是一個輕量級的外掛程式,具有令人印象深刻的功能。它讓使用者可以在任何頁面、文章或小工具中顯示文章的內容!只需使用短碼「[SPCA post_...。