【WordPress】独自のブロックエディターの作り方

WordPressのブロックエディターは、コンテンツを簡単に編集することができるツールです。しかし、WordPressには標準で用意されたブロックしかありません。本稿では、WordPressに独自のブロックエディターを作成する方法について解説します。

参考URL：https://liginc.co.jp/560854

1. ブロックエディターのについて

ブロックエディターは、WordPressの投稿画面で使用することができます。投稿画面には、各ブロックの内容を編集するためのエディターが表示されます。各ブロックは、HTMLやCSSによってカスタマイズすることができます。

2. ブロックエディターの作成方法

独自のブロックエディターを作成するには、以下の手順に従ってください。

1. ブロックに使うテンプレート(phpファイル)を用意
2. fucntions.phpにブロックの登録用コードを入力
3. ブロック用テンプレートに出力のテンプレートタグを記述

1：ブロックに使うテンプレート(phpファイル)を用意

まずは、以下のようなブロックとして使いたいモジュールになるファイルを用意します。 今回は、独自のテーブルを、管理画面から複製できるブロックを作りたいので、以下のようなファイルを用意ます。 また、今回はファイル名を「theme-box.php」とします。(任意の名前でOK)

<div class="is_flex">
  <div class="flex-item">
    <h2 class="theme-title">テーブル見出し</h2>
    <div class="theme-text">テーブル本文</div>
  </div>
</div>

2：fucntions.phpにブロックの登録用コードを入力

独自に作成したブロックの登録及び呼び出しができるように、fucntions.phpに以下のコードを記述します。

// theme-box
add_action('acf/init', 'my_acf_init_block_types');
	function my_acf_init_block_types() {
		if( function_exists('acf_register_block_type') ) {
			acf_register_block_type(array(
				'name'              => 'theme-box',
				'title'             => __('テーマボックス'),
				'description'       => __('テーマボックスカスタムブロックです。'),
				'render_template'   => 'theme_box.php',  // ファイル名を入れます
				'category'          => 'formatting',
				'icon'              => 'wordpress',
				'keywords'          => array( 'theme', 'box' ),
				'mode' => 'auto',
			));
		}
	}

3：ブロック用テンプレートに出力のテンプレートタグを記述

今回はACFでテーブルの見出しと本文の増減も実現したいので、手順1で作成したファイルに、以下のテンプレートタグを記述します。

<?php if(have_rows('theme-box')): ?> 
<div class="is_flex">
    <?php while(have_rows('theme-box')): the_row(); ?>
    <div class="flex-item">
        <h2 class="theme-title">
          <?php the_sub_field('theme-title'); ?> // テーブル見出し
        </h2>
        <div class="theme-text">
          <?php the_sub_field('theme-text'); ?> // テーブル本文
        </div>
    </div>
    <?php endwhile; ?>
</div>
<?php endif; ?>

上記のファイルの用意とfuncitons.phpの記述が終わりましたら、FTPでファイルをアップロードし、管理画面でブロックが確認できたら無事完成です！