こちらのシングルブロックプラグインを使用すると、メタフィールドやカスタムフィールドをフロントエンドでブロックとして表示できます。投稿、ターム、およびユーザーのカスタムフィールドに対応しています。Query ブロック や WooCommerce Product Collection など、postId や postType のコンテキストを持つ親ブロック内にネストして使用することも、単体のブロックとして使用することもできます。
コア API で取得できる値を持つフィールド (get_post_meta, get_term_meta, get_user_meta) の値が文字列であるか、文字列に変換できる場合に、フィールドの値を表示できます。ブロックエディターでフィールドの値を表示するには、それが REST API 経由でアクセス可能であるか、またはフィールドタイプが dynamic に設定されている必要があります。
Advanced Custom Fields や Meta Box プラグインで作成されたカスタムフィールドも明示的に表示することができます。すべての ACF のフィールドタイプ および Meta Box のフィールドタイプ のうち、値が文字列であるか文字列に変換できるものに対応しています。また、ACF の複合フィールドタイプ画像、リンク、ページリンク、真 / 偽、チェックボックス、選択、ラジオボタン、ボタングループ、タクソノミー、ユーザー、投稿オブジェクト、リレーションシップや、Meta Box の選択、チェックボックス、ラジオボタン、画像、動画、タクソノミー、ユーザー、投稿などのフィールドタイプにも基本的な形式で対応しています。
当プラグインは、開発者向けにフック API も提供しており、ブロックの出力を簡単にカスタマイズしたり、複雑なデータ型フィールドを表示したり、コンテキストパラメータとして object_id と object_type を使用して任意の種類のコンテンツを表示したりすることができます。
このブロックが本当に役立つエッジケースの1つは、クエリループ内でショートコードを使用する際に post_id を取得する必要がある場合です。その場合はフィールドタイプを dynamic に設定し、フィールド名にショートコードを入力します。ブロックはフロントエンドとエディターの両方で正しく表示されます。また、エディターでショートコードのプレビューのみを表示したい場合は、core/shortcode の改良バージョンとしてもこのブロックを使用できます。
このブロックがカスタムフィールドをどのように表示するかを簡単に学ぶには、WPTuts の Paul Charlton による短いガイド (MFB バージョン1.3.4用) をご覧ください。この動画は Advanced Custom Fields プラグインに焦点を当てていますが、Meta Box などの他のフレームワークのフィールドも同様の方法で表示できます。
リンク
カスタムフィールドの HTML 出力とは ?
カスタムフィールドの HTML 出力は、フィールドのコンテキストに依存します。フィールド値を取得するために、次のいずれかのコアAPI関数が使用されます: get_post_meta, get_term_meta, get_user_meta.
ACF フィールドの HTML 出力とは何ですか ?
-
すべての基本的なフィールドタイプ、文字列を返すか、文字列に変換できるものをサポート – HTML の出力は、
get_field関数により取得できます。 -
リンクタイプ – HTML の出力:
<a href={url} target={target} rel="noreferrer noopener">{title}</a>targetが_blankでない場合、rel属性は存在しません -
画像タイプ – HTML 出力は、wp_get_attachment_image 関数から取得されます。画像サイズはプレビュー サイズ設定から取得されます。
-
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, 5 ); add_filter( 'meta_field_block_true_false_off_text', function ( $off_text, $field_name, $field, $post_id, $value ) { return 'Noop'; }, 10, 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, 5 ); -
ラジオボタン / ボタングループタイプ – HTML の出力は、フィールドの返り値フォーマットに依存しますので
valueまたはlabelです。 -
ページリンクタイプ、投稿オブジェクトタイプ – 単一値フィールドの 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> -
リレーションシップタイプの場合は以下のようになります:
<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> -
タクソノミータイプ – 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> -
ユーザータイプ – 単一値フィールドの 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> -
他の複雑なフィールドタイプに対して、カスタム 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 Box フィールドの HTML 出力とは ?
-
ACF フィールドと同様に、文字列を返すか、関数
rwmb_get_valueで文字列にキャストできるすべての基本フィールドがサポートされています。複製可能な基本フィールドの HTML 出力は次のとおりです :
<span class="value-repeater-item">{item_1_value}</span>, <span class="value-repeater-item">{item_2_value}</span>タグと区切りを変更するには、次のフックを使用します :
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 ) -
個別の画像タイプ – HTML出力はwp_get_attachment_image 関数 から取得されます。画像サイズは
image_size設定から取得されます。 -
画像リストの種類 (画像、画像の詳細、画像のアップロード) – HTML 出力は次のとおり:
<figure class="image-list"> <figure class="image-item"><img /></figure> <figure class="image-item"><img /></figure> </figure> -
チェックボックス / スイッチ タイプ – ACF 真 / 偽 タイプに似ています。
-
複数選択タイプ (選択、高度な選択、ボタングループ、オートコンプリート、画像選択、チェックボックスリスト) – HTML の出力は次のようになります:
<span class="value-item">{item_value}</span>, <span class="value-item">{item_value}</span>値の代わりにラベルを表示するには、次のフックを使用します:
apply_filters( 'meta_field_block_mb_field_choice_item_display_label', false, $field_name, $field, $post_id, $value )区切りを変更するには次のフックを使用します:
apply_filters( 'meta_field_block_mb_field_choice_item_separator', ', ', $file_name, $field, $post_id, $value ) -
ラジオボタン型 – デフォルトではフィールド値が出力されます。ラベルを表示したり、区切り文字を変更したりするには、複数選択型と同じフックを使用します。
-
投稿タイプ – 個別値フィールドの 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> -
タクソノミー、タクソノミーの高度なタイプ – 個別値フィールドの HTML 出力は次のとおりです:
<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> -
ユーザータイプ – ACF ユーザータイプに類似
-
動画タイプ – 個別値フィールドの HTML 出力は次のとおりです:
<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> -
複雑なフィールドタイプを表示したり、フィールドの出力を変更するには
meta_field_block_get_mb_fieldフックを使用、または一般的なフックmeta_field_block_get_block_contentを使用します。
コピー & ペーストのスニペット
meta_field_block_get_block_content フックでブロックコンテンツをカスタマイズする場合は、フィールドタイプとして dynamic を選択することを推奨します。これにより、フロントエンドとエディターの両方に変更内容が表示されます。ACF フィールドを使用している場合は、meta_field_block_get_acf_field フックでフィールドコンテンツを変更することを推奨します。同様に、Meta Box ユーザーは、meta_field_block_get_mb_field フックでコンテンツを変更する必要があります。ACF スニペットは Meta Box フィールドでも使用できますが、正しいフック名を使用し、get_field 関数を rwmb_get_value 関数に置き換える必要があります。
-
ブロックの 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);こちら基本的なコードスニペットは非常に強力です。これを使用して任意の投稿、用語、ユーザー、または設定フィールドから任意のフィールドを表示できます。詳細は、以下の使用例をご覧ください。
-
クエリループ内でブロックを投稿へのリンクでラップする方法は ?
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 インラインタグまたは画像のみを含むブロックでのみ機能します。
-
画像の 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); -
ブロック内で複数のメタフィールドを表示する方法は ? 例えば、ユーザーのフルネームを表示する必要があるときは、
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と入力してください。 -
設定フィールドを表示するには ? 例えば、サイトのフッターテンプレートパートに
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);
MFB PRO で時間を節約しよう
投稿やターム、ユーザーなどシンプルなデータ型フィールドを表示するには、無料版の MFB があればよいです。MFB プロ版 を使うと、ACF 複合フィールドを扱うときに開発時間を 90% 短縮できます。これは、ACF 複合フィールド タイプを、コアのコンテナブロックと同様に機能するコンテナブロックに変換することで実現します。これにより、ACF カスタム ブロックを作成したり、ACF 複合フィールドを表示するためのカスタムコードを記述したりする必要がなくなります。 以下は、MFB プロ版 を使用しコーディングなしで投稿テンプレートを作成する方法の動画チュートリアルです。
以下は、MFB プロ版を使用して複雑なフィールドを表示する方法を示した動画チュートリアルです:
コーディングなしで動的データを表示する投稿テンプレートの構築方法
ACF の繰り返しフィールドをリスト、グリッド、カルーセルとして表示する方法
ACF ギャラリーのフィールドをグリッド、マーソンリー、カルーセルとして表示する方法
MFB プロ版のおもな機能:
- 表示設定フィールド.
- ACF の高度なレイアウトフィールドを表示します: グループ、繰り返し、および柔軟なコンテンツ。
- ACF 繰り返しフィールドをカルーセルのレイアウトで表示します。バナー スライダーを表示する場合に便利です。
- ACF 繰り返しフィールドをアコーディオンのレイアウトで表示します。FAQ ページの表示に役立ちます。
- ACF リレーションシップと投稿オブジェクトフィールドをクエリループとして表示します。
- ACF 画像フィールドをコアの画像ブロックとして表示します。
- グリッド、マーソンリー、またはカルーセルの レイアウトを使用して、ACF ギャラリー フィールドを画像ギャラリーとして表示します。
- ACF ファイルフィールドを動画ブロック、画像ブロック、ボタンブロック、またはリンクとして表示します。
- ACF リンクフィールドをボタンブロックとして表示します。
- ACF URL フィールドを画像ブロック、ボタンブロック、またはリンクとして表示します。
- ACF メールアドレスフィールドをボタンブロックまたはリンクとして表示します。
- ACF Google マップ フィールドを表示します。
- ACF グループフィールドと同様に、Meta Box グループ フィールドを表示。
- Meta Box の Cloneable Group フィールドを繰り返しブロックとして表示。ACF の繰り返しフィールドと同様に行、スタック、グリッド、カルーセルレイアウトをサポートしています。
- Meta Box の投稿フィールドをクエリ ループとして表示します。
- メタボックスの単一画像フィールドを画像ブロックとして表示し、画像リストフィールドをグリッド、マーソンリー、またはカルーセのレイアウトで画像ギャラリーとして表示します。
- Meta Box ファイルの個別力フィールドを動画ブロック、画像ブロック、またはボタンとして表示。
- グループ ィールドを詳細ブロックとして表示し、繰り返しまたは複製されたグループをアコーディオンとして表示します。
- 個別の画像サブフィールド (ACF の画像または Meta Box の画像) をグループフィールドの背景画像として設定。
- 特定の投稿、用語、またはユーザーのカスタムフィールドを表示.
当プラグインが役に立った場合は、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 を使用して構築されています。 MFB は、高速性と軽量性を維持するために、ネイティブの Gutenberg 機能のみを使用して開発されています。 MFB Pro は、カルーセルレイアウトに SwiperJS を使用しています。ただし、カルーセルレイアウトを使用しない場合、スクリプトとスタイルはページに読み込まれません。