WordPress 5.5 (2020年8月11日リリース予定) ではブロックエディタが大きく変わり、そのなかで「ブロックパターン」という機能が追加されました。
現段階では WordPressコアが用意したブロックパターンしか使えませんが、自分でブロックパターンを登録・メンテナンスできたらすごく使いやすくなりますよね。
そこで自分でブロックパターンを登録・メンテナンスできるようにするTipsを2つ紹介します。
ユーザーブロックパターン
ブロックパターン登録用のカスタム投稿タイプを作ってWordPressコアのブロックパターンリストに読み込ませます。
コード
以下のコードを my-plugin.php に張り付けてみてください。
/**
* ユーザーブロックパターン
*
* @since 5.5.0
* License: GPLv2 or later
*/
function nendebcom_my_block_patterns(){
//ブロックパターンメンテナンス用 カスタム投稿タイプ
$labels = array(
'menu_name' => 'ブロックパターン', //メニュー名のテキスト
'singular_name' => 'ブロックパターン', //menu
'all_items' => 'ブロックパターン一覧', //menu
'add_new' => '新規ブロックパターン追加', //menu
'name' => 'ブロックパターン',
'add_new_item' => '新規ブロックパターン追加',
'edit_item' => 'ブロックパターンの編集',
);
register_post_type(
'my_block_patterns',
array(
'public' => true, // 管理画面に表示しサイト上にも表示する
'description' => 'ブロックパターンメンテナンス用', //投稿タイプの説明
'hierarchical' => false, //階層構造を許可(親記事を指定できる)
'has_archive' => false, //この投稿タイプのアーカイブを有効にする
'labels' => $labels,
'publicly_queryable' => false, //ドメイン/?post_type=xxxxでアーカイブ表示
'show_ui' => true, //管理画面に表示
'show_in_menu' => true, //管理画面左メニューに表示
'show_in_nav_menus' => false, //管理画面->メニューに表示
'show_in_admin_bar' => false, //管理バー(+新規)に表示
'capability_type' => 'post', //権限設定
'menu_position' => 5,
'query_var' => false, //この投稿に使用する query_var キーの名前または真偽値
'exclude_from_search' => true, //サイト内検索から除外するかどうか true:除外
'publicly_queryable' => false, //フロントエンドで post_type クエリが実行可能かどうか
'supports' => array( //投稿画面用のパーツ
'title',
'editor',
'author',
),
'taxonomies' => array('my_block_patterns'),
'show_in_rest' => true, //Gutenberg 使う
)
);
//ブロックパターンメンテナンス用 ブロックパターンカテゴリ
register_taxonomy(
'my_patterns', //カテゴリ名
'my_block_patterns', //post type名
array(
'hierarchical' => false, //階層化
'update_count_callback' => '_update_post_term_count',
'label' => 'ブロックパターンカテゴリ',
'singular_label' => 'ブロックパターンカテゴリ',
'public' => false, //検索可能
'show_ui' => true,
'show_in_rest' => true, //Gutenberg 使う
'meta_box_cb' => 'post_categories_meta_box',
)
);
//ブロックパターンカテゴリ追加
$builtin_category = array( 'header','text','columns','buttons','gallery' );
$terms = get_terms( array( 'taxonomy' => 'my_patterns', 'get'=>'all' ) );
if( !empty( $terms ) && !is_wp_error( $terms ) ){
foreach( $terms as $term ){
//コアのブロックパターンカテゴリと同じ場合は登録をスキップする
if ( ! in_array( $term->slug, $builtin_category, true ) ){
//ブロックパターンカテゴリ追加
register_block_pattern_category(
$term->slug,
array( 'label' => $term->name )
);
}
}
}
//ブロックパターン追加
$args = array(
'post_type' => array( 'my_block_patterns' ),
'post_status' => array( 'publish' ),
'posts_per_page' => -1,
//'order' => 'DESC',
//'orderby' => 'date',
);
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
$pattern_count = 1;
while ( $the_query->have_posts() ) {
$the_query->the_post();
//ブロックパターンタイトル
$pattern_title = get_the_title();
if( ! $pattern_title ){
$pattern_title = '無題ブロックパターン';
}
//ブロックHTML
$pattern_content = get_the_content();
//ブロックパターンカテゴリ
$pattern_categories = array();
$terms = get_the_terms( 0, 'my_patterns' );
if( !empty( $terms ) && !is_wp_error( $terms ) ){
foreach( $terms as $term ){
$pattern_categories[] = $term->slug;
}
}
//ブロックパターン追加
if( $pattern_content ){
register_block_pattern(
'nendebcom/my-block-pattern' . $pattern_count, //ブロックパターン名
array(
'title' => $pattern_title, //ブロックパターンのタイトル
'content' => $pattern_content, //ブロックHTML
'categories' => $pattern_categories, //ブロックパターンカテゴリ
)
);
$pattern_count ++;
}
}
wp_reset_postdata();
}
}
add_action( 'init', 'nendebcom_my_block_patterns' );
使い方
「ブロックパターン」という投稿タイプができますので、こちらにブロックパターンを1つずつ登録してください。
タイトル部分はブロックパターンのタイトルになります。カテゴリも登録できます。
作ったブロックパターンは投稿画面等のブロックパターンタブ内で選択できるようになります。
スポンサードリンク
再利用ブロック ブロックパターン
再利用ブロックにあるブロックをWordPressコアのブロックパターンリストに読み込ませます。
これにより再利用ブロックに登録したブロックをブロックパターンとして利用できるようになります。
再利用ブロックをブロックパターンから投稿記事に登録(コピー)すると再利用部分は外れていますので変更しても元の再利用ブロックには影響されません。
コード
以下のコードを my-plugin.php に張り付けてみてください。
/**
* 再利用ブロックパターン
*
* @since 5.5.0
* License: GPLv2 or later
*/
function nendebcom_reusable_block_patterns(){
//再利用ブロックパターンカテゴリ追加
register_block_pattern_category(
'reusable_wp_blocks',
array( 'label' => '再利用ブロック' )
);
//再利用ブロックをブロックパターンへ追加
$args = array(
'post_type' => array( 'wp_block' ),
'post_status' => array( 'publish' ),
'posts_per_page' => -1,
//'order' => 'DESC',
//'orderby' => 'date',
);
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
$pattern_count = 1;
while ( $the_query->have_posts() ) {
$the_query->the_post();
//ブロックパターンタイトル
$pattern_title = get_the_title();
if( ! $pattern_title ){
$pattern_title = '無題の再利用ブロック';
}
//再利用ブロックHTML
$pattern_content = get_the_content();
//再利用ブロックパターン追加
if( $pattern_content ){
register_block_pattern(
'nendebcom/wp-block-pattern' . $pattern_count, //ブロックパターン名
array(
'title' => $pattern_title, //ブロックパターンのタイトル
'content' => $pattern_content, //ブロックHTML
'categories' => array( 'reusable_wp_blocks' ), //ブロックパターンカテゴリ
)
);
$pattern_count ++;
}
}
wp_reset_postdata();
}
}
add_action( 'init', 'nendebcom_reusable_block_patterns' );
使い方
登録している再利用ブロックは投稿画面等のブロックパターンタブ内で選択できるようになります。
今回「ユーザーブロックパターン」と「再利用ブロックパターン」を紹介しましたが、どちらかを使ってもいいですし両方同度に使ってもいいですね。
スポンサードリンク
