ブロックエディターのブロック選択をしやすくする方法(例)

公開日:2026(令和8)年5月16日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

サイトの維持や有用なページの紹介を目的として、このページには各所に広告を表示しています。多数の広告が表示され、閲覧しにくいところがあるかも知れませんが、ご協力いただけますようお願いいたします。

WordPress 5.0から採用されたブロックエディター。いろいろなコンテンツが作れるブロックを追加して、そこに文章を書いたり、画像を入れたり、リストを作ったり、画面を水平方向に分割したりなどいろいろなことが簡単にでき、自由に上下移動ができるので、使い慣れてしまうともう旧来のコードエディターには戻れないと思いますよね。

毎日使っている私はもうすっかり慣れてしまったので便利さを享受しているのですが、旧来のコードエディターや他のサービスで文章や画像の挿入をしている人からすると「使い慣れる」というのには結構時間がかかるようで、できることの一部しか分からずに単純な文章と画像を入れるのが精いっぱいということも多いようです。

中でもネックになっているのが、エディターの「+」ボタンをクリックしてずらっと表示されるブロックの中から、目的のブロックを探すのが大変で、面倒で、だからエンターキーで挿入される段落ブロックだけでダラダラと文章を書いてしまう、しかも段落ブロックにテキストの装飾や位置の指定もできるのに、右寄せにしたいからと空白をたくさん入れたりするなんて人もいます。

慣れた人間からすれば「何で?」と思ってしまうのですが、自身もWordPress 5.0で切り替わった時に、自身も一端旧コードエディターに戻していたなぁとふと気づきました。

そこで今回は、たくさんあるブロックの中から、特によく使うブロックをまとめてエディター左上の「+」ボタンを押した時に先頭表示されるようにする方法と、「よく使うブロック」が生成される仕組み・リセットする方法について、私の分かる範囲で公開していきます。

慣れた方でも自身でよく使うブロックをまとめるとにわかに使いやすくなるのでおすすめですよ!

よく使うブロックをまとめてブロックリストの先頭に表示する

WordPressのブロックエディターでは、本文内の空白をクリックした時に表示される「+」ボタンをクリックした時にポップアップ表示される画面と、画面右上にあるエディターのオプション→ブロックで、「よく使用されるブロックを表示」を有効にした状態で、ポップアップ画面から「すべて表示」をクリックするか、エディター画面左上の「+」をクリックした時に表示されるブロックの一覧に、今までの編集でよく使っているブロックを表示するようになっていて、使えば使うほど「+」をクリックした時に挿入しようと思ったブロックが優先的に表示されるようになっています。

一方、ブロックの一覧は、たくさんのブロックを管理するため。「テキスト」「メディア」「デザイン」などカテゴリー分けして、それぞれのカテゴリーに属するブロックが表示されるようになっているため、例えば「デザイン」カテゴリーの「スペーサー」ブロックを挿入する場合にはマウスで操作すると結構なクリック数とスクロールを使わないと挿入できないため、不都合に感じるかも知れません。

この不都合を解消するには、予め自身でよく使うブロックを「自分用」などといったカテゴリーにまとめるのが一番だろうと思います。

以下が「自分用」というブロックの集まり(カテゴリー)を作り、それをブロック一覧の一番上に表示させ、その中に必要なブロックを表示させるためのコードです。

有効化しているテーマのfunctions.phpへ追加して、必要なブロックを追加するだけで簡単に設定できて便利ですよ。

1.自分用のブロックの集まり(カテゴリー)を作る

まずは以下のコードで自分用のブロックカテゴリーを作り、ブロック一覧の一番上に表示されるようにします。

function pwcn_add_custom_block_categories( $categories ) {
	// 新しいカテゴリーを定義
	$custom_category = array(
		'slug'  => 'my-original-category',
		'title' => '自分用', // インサーターに表示される名前
		'icon'  => 'category', // 必要に応じてDashiconsを指定
	);

	// 配列の先頭に追加
	array_unshift( $categories, $custom_category );

	return $categories;
}
add_filter( 'block_categories_all', 'pwcn_add_custom_block_categories' );

あれ?追加したのにカテゴリーが一覧に表示されないと思った方、正解です(笑)。ブロックのカテゴリーはその中にブロックが存在しない場合は非表示になるようになっているので、これは正常動作です。次の項のコードを追加してブロックを封入すればきちんと表示されるのでご心配なく。

2.自分用のカテゴリーの中に自身がよく使うブロックを指定する

以下のコードで前項で作成したカテゴリーの中に含めるブロックを追加します。

function pwcn_reorder_existing_blocks( $args, $name ) {
	/* https://developer.wordpress.org/block-editor/reference-guides/core-blocks/ */
	// 移動させたいブロックを指定
	$blocks_to_move = [
		'core/paragraph', // 段落
		'core/gallery',   // ギャラリー
		'core/heading',   // 見出し
	];

	if ( in_array( $name, $blocks_to_move ) ) {
		$args['category'] = 'pwcn-original-category'; //pwcn-original-categoryへブロックを移動させる
	}

	return $args;
}
add_filter( 'register_block_type_args', 'pwcn_reorder_existing_blocks', 10, 2 );

両方のコードを追加したら、投稿編集画面を開いて、ブロックの一覧を表示してみてください。

「自分用」というカテゴリーが先頭に表示され、その中に「段落」「ギャラリー」「見出し」のブロックが表示されていると思います。

コード内で段落ブロック=’core/paragraph’と定義していますが、これはWordPress本体のブロック識別子なので、こちらの公式ページで識別子を調べて必要なものを追加してみてください。

よく使うブロックの候補をリセットする方法

ブロックエディターで本文内の「+」をクリックした時に表示されるブロックの候補は、今まで使用頻度が高かったもののうちの6つが表示されるようになっています。

これは、使用頻度の高いブロックができるだけ簡単に挿入できるようにというWordPressの便利機能なのですが、時にはこれをリセットしたいこともあるでしょう。

使用頻度に関するデータは、私が確認した限りでは、WordPressのデータが保存されているデータベースではなく、今操作しているパソコンで、今開いているブラウザのローカルストレージというところに保存されているデータを参照して、使用されればそのブロックの使用カウント数をアップさせて順位を決定するということをしています。

つまりこれをクリアすれば、そのパソコンのそのブラウザで表示されるブロックの候補が、これから使用していくものの順になり、ブロックの挿入がしやすくなっていきます。

デベロッパーツールなどで直接このデータを削除することもできますが、できれば他の部分には触れず、ブロックの候補を担っている部分だけを消したいので、以下の手順で行うといいでしょう。

このリセット操作は他の部分に影響を与えるかも知れませんので、実行するかどうかは自己責任でお願いします

まずは以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_reset_block_usage_refined() {
	if ( isset( $_GET['reset_blocks'] ) && $_GET['reset_blocks'] == '1' ) {
		// 現在のログインユーザーIDを取得
		$user_id = get_current_user_id();
		?>
		<script>
		(function() {
			// ユーザーIDに基づいたキー名を指定
			const dataKey = "WP_DATA_USER_<?php echo $user_id; ?>";
            
			if (localStorage.getItem(dataKey)) {
				localStorage.removeItem(dataKey);
				console.log(dataKey + ' を削除しました。');
                
				// 再読み込みして反映
				const url = new URL(window.location.href);
				url.searchParams.delete('reset_blocks');
				 window.location.href = url.toString();
			} else {
				alert('対象のデータが見つかりませんでした。');
			}
		})();
		</script>
		<?php
	}
}
add_action( 'admin_footer', 'pwcn_reset_block_usage_refined' );

そして、ブロックの使用履歴をリセットしたいユーザーでログインし、投稿編集画面を開き、URLの末尾に以下を追加して「Enter」を押してください。

&reset_blocks=1

画面がリロードされますので、投稿編集画面本文内の余白をクリックした時に表示される「+」をクリックして、今までの候補と変化していることが確認できればリセットは成功です。

前述していますが、「データをリセットしたいパソコン」で「リセットしたいブラウザ」で「リセットしたいユーザー」でログインして、投稿編集画面を開いた場合のみリセットされる点に留意しましょう

現在で確認したところでは。リセットを行うと、「段落」「画像」「見出し」が表示され、その下にテーマやプラグインで追加されたブロックやブロックスタイルなどのうちの読み込み順の新しいものが表示されるようです。

, , , , , , ,
Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
標準ギャラリーのライトボックスを拡張して、ギャラリー内の画像を切り替え表示させる方法