時間も場所もお金も自由な生活を手に入れる人生を目指し中

【WordPress】カスタムブロック用のカテゴリーを追加する

前回、ブロックエディターの開発環境構築をしたので、カスタムブロックの開発に入っていきます。

カスタムブロックはWordPressデフォルトのブロックのカテゴリーとは分けて、独自のカテゴリーにしておいたほうが分かりやすいと思うので、まずはブロックを作る前にカスタムブロック用にカテゴリーを新たに追加します。
(既存のカテゴリーにしたい場合は飛ばしてOK)

目次

block_categoriesでカテゴリーを追加

プラグイン用のファイルcustom-block.phpを開きます。

一番下にadd_action( 'init', 'create_block_custom_block_block_init' );という記載があるので、その下に以下を追加します。

//ブロックカテゴリーの追加
function add_block_categories( $categories ) {
	$add_categories = [
		[
			'slug' => 'custom-block-category',  //スラッグ名
			'title' => 'カスタムブロック',  //表示名
			'icon' => 'edit',  //アイコン(なしでもOK)
		],
	];
	$categories = array_merge( $categories, $add_categories );
	return $categories;
}
add_filter( 'block_categories', 'add_block_categories' );

今回は、スラッグ名がcustom-block-category、タイトルがカスタムブロックというカテゴリーを追加するようにしました。

アイコンはなくてもいいですが、入れる場合はダッシュアイコンが使えます。
今回はこちらのEditアイコンを表示させてみました。

ブロックに追加したカテゴリーを設定する

新しく「カスタムブロック」というカテゴリーが追加されたので、このカテゴリーをブロックに設定してみます。

srcの中にあるindex.jsを開きます。
category: 'widgets'となっているところがカテゴリーの設定なので、ここの’widgets’を先ほど追加したカテゴリーのスラッグ'custom-block-category'に置き換えます。

registerBlockType( 'create-block/custom-block', {
	apiVersion: 2,
	title: __( 'Custom Block', 'custom-block' ),
	description: __(
		'Example block written with ESNext standard and JSX support – build step required.',
		'custom-block'
	),
	category: 'custom-block-category',  //'widgets'から変更
	icon: 'smiley',
	supports: {
		html: false,
	},
	edit: Edit,
	save,
} );

投稿画面を見ると、ブロックの一覧の一番下に追加した「カスタムブロック 」カテゴリーがあり、最初ウィジェットカテゴリーにあったブロックがこちらに設定されているのが確認できました。

これでブロック用のカテゴリーの追加は完了です!
以降はこの追加した「カスタムブロック」カテゴリーにブロックを追加していきます。


目次
閉じる