【ブロックエディター】ACFで作成するWordPressの自作のブロックのご紹介

投稿日：2023年07月8日

WordPressのブロックエディターは、見出しや段落、リスト等をブロックのように組み立てて記事を作る事ができる事から、記事の見せ方にこだわる事ができます。

ブロックエディターが出た当初は、これまでクラシックエディタに慣れ親しんでるユーザーからの評判はイマイチだったものの、ここ最近では段々と導入されている傾向にあり、ブロックエディタを使用するサイトは増えて生きています。

そんなブロックエディターですが、デフォルトで使えるエディタではなく、独自のデザインをブロックエディターにしたいと思った事はありませんか？

今回はAdvanced Custom Fieldでオリジナルのブロックを自作する方法をご紹介していきます！

～目次～

1 ブロックにするモジュール（HTML）を作成します
2 functions.phpにブロックの呼び出しのコードを記述する
3 Advanced Custom Fieldで管理画面の設定をします
4 table-block.htmlにACFのコードを記述してをテンプレートファイルにしていきます
5 まとめ

ブロックにするモジュール（HTML）を作成します

まずは、ブロックとなるモジュール(HTML)を作っていきます。

今回は表で作成したいと思いますので、以下のhtmlを作成します。

<table>
  <tr>
    <th>表の見出し</th>
  </tr>
  <tr>
    <td>表の本文</td>
  </tr>
</table>

ここまでできましたら、ファイルの保存をします。今回は「table-block.html」というファイル名にします。

functions.phpにブロックの呼び出しのコードを記述する

次に、WordPressの管理画面から自作のブロックを呼び出すために、以下ののコードをfunctions.phpに記述していきます。

function original_block_types() {
  if( function_exists('original_block_types') ) {
    original_block_types(array(
      'name' => 'Original Table',
      'title' => __('オリジナルテーブル'),
      'description' => __('自作のテーブルです'),
      'render_template' => 'table-block.php', // テンプレートに使用するファイルを設定します
      'category' => 'common',
      'icon' => 'wordpress',  // 任意のアイコンでOK
      'keywords' => array( 'original-table' ), // ブロックの検索にかかるキーワードを入れる事ができます
      'mode' => 'auto', // 「auto」に設定しておくと
    ));
  }
}
add_action('acf/init', 'original_block_types');

Advanced Custom Fieldで管理画面の設定をします

次に、管理画面からブロックに入力できる項目の設定をAdvanced Custom Fieldで設定していきます。

まずは、使用できる投稿タイプを選びます。

※今回はブロックの導入までの方法にフォーカスしたいため、ここの項目は割愛いたします…！

table-block.htmlにACFのコードを記述してをテンプレートファイルにしていきます

functions.phpに呼び出しのコードを記述したら、次に最初に作成した「table-block.html」に、Advanced Custom Fieldのコードを組み込み、テンプレートファイルにしていきます。

今回は、テーブルの見出しと本文を増やしたり減らしたりしたいので、リピーターフィールドを使い、組み混んでいきます。

以下のようなコードになります。

<?php if(have_rows('original-table')): ?>
<table>
    <?php while(have_rows('original-table')):  the_row(); ?>
    <tr>
        <th><?php the_sub_field('table-headings'); ?></th>
    </tr>
    <tr>
        <td><?php the_sub_field('table-contants'); ?></td>
    </tr>
    <?php endwhile; ?>
</table>
<?php endif; ?>

ファイルをアップロードして、ブロックを呼び出し、無事に表示できれば完成です。