概要
acf_register_block_type 関数は、Gutenberg エディターにカスタム ブロック タイプを登録します。この関数を用いることで、WordPress の投稿やページの編集画面に独自のカスタムブロックを追加し、ユーザーがそのブロックを簡単に利用できるようにします。
この関数は以下の機能を実装する際によく使われます。
1. 特定のコンテンツを視覚的に強調するブロックの作成
2. ユーザーのニーズに合わせたカスタムオプションの提供
3. 設計上の要件を満たすための独自レイアウトの作成
4. 繰り返し使用するコンポーネントの管理を簡素化する
5. 他のプラグインやテーマと統合を促進する
6. スタンダードなブロックに追加機能を追加する
構文
acf_register_block_type( $args );
パラメータ
$args(配列): ブロックの設定情報。以下のオプションを含む。name(文字列): ブロックの名前 (例:my-plugin/my-custom-block)title(文字列): ブロックの表示名render_template(文字列): ブロックが表示される際のテンプレートファイルcategory(文字列): ブロックが属するカテゴリーicon(文字列): ブロックのアイコンkeywords(配列): ブロックの検索キーワードsupports(配列): サポートされる機能 (例:align,anchorなど)
戻り値
この関数は戻り値を持たず、登録されたブロックは WordPress のビジュアルエディターで直接利用可能になります。
互換性
- Advanced Custom Fields (ACF) バージョン: 5.0.0 以降
- WordPress バージョン: 5.0 以降
この関数のアクションでの使用可能性
| アクション | 使用可能性 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | 〇 |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | 〇 |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head |
サンプルコード
サンプルコード 1: シンプルなテキストブロックの登録
このサンプルは、シンプルなテキストを表示するカスタムブロックを登録します。
add_action('acf/init', 'my_acf_block_init');
function my_acf_block_init() {
acf_register_block_type(array(
'name' => 'simple-text',
'title' => __('Simple Text'),
'render_template' => 'template-parts/blocks/simple-text.php',
'category' => 'common',
'icon' => 'editor-alignleft',
'keywords' => array('text', 'simple'),
));
}
引用元: https://www.advancedcustomfields.com/resources/acf_register_block_type/
サンプルコード 2: 画像を表示するカスタムブロック
このサンプルは、画像をアップロードして表示できるカスタムブロックを登録します。
add_action('acf/init', 'register_image_block');
function register_image_block() {
acf_register_block_type(array(
'name' => 'image-block',
'title' => __('Image Block'),
'render_template' => 'template-parts/blocks/image-block.php',
'category' => 'media',
'icon' => 'format-image',
'keywords' => array('image'),
));
}
引用元: https://www.advancedcustomfields.com/resources/acf_register_block_type/
サンプルコード 3: カスタムオプションがあるブロックの登録
このサンプルは、ユーザーがオプションとして色を選択できるカスタムブロックを登録します。
add_action('acf/init', 'custom_color_block');
function custom_color_block() {
acf_register_block_type(array(
'name' => 'color-block',
'title' => __('Color Block'),
'render_template' => 'template-parts/blocks/color-block.php',
'category' => 'design',
'icon' => 'art',
'keywords' => array('color', 'custom'),
));
}
引用元: https://www.advancedcustomfields.com/resources/acf_register_block_type/
サンプルコード 4: 複数のフィールドを持つブロックの登録
このサンプルは、タイトルと説明を持つカスタムブロックを登録します。
add_action('acf/init', 'register_title_description_block');
function register_title_description_block() {
acf_register_block_type(array(
'name' => 'title-description-block',
'title' => __('Title and Description'),
'render_template' => 'template-parts/blocks/title-description-block.php',
'category' => 'layout',
'icon' => 'info',
'keywords' => array('title', 'description'),
));
}
引用元: https://www.advancedcustomfields.com/resources/acf_register_block_type/
サンプルコード 5: グリッドレイアウトのブロック登録
このサンプルは、複数のカラムを持つグリッドレイアウトのカスタムブロックを登録します。
add_action('acf/init', 'register_grid_block');
function register_grid_block() {
acf_register_block_type(array(
'name' => 'grid-block',
'title' => __('Grid Block'),
'render_template' => 'template-parts/blocks/grid-block.php',
'category' => 'layout',
'icon' => 'grid-view',
'keywords' => array('grid'),
));
}
引用元: https://www.advancedcustomfields.com/resources/acf_register_block_type/