ブログ

エンヴィデザインの取り組みやナレッジをお届けします。

ACF Proでカスタムブロックを作成する方法

WordPress

株式会社ENVY DESIGN

フロントエンドエンジニア

お客様のご要望に合わせて固定ページや投稿ページを編集できるようにする時にとっても便利なプラグインAdvanced Custom Fields(以下ACF)

例えばこのように「カード」というフィールドを作成しカード用の画像とテキストを入力すると、サイト上のデザインはそのままで中身だけ簡単に編集できます。

とても便利ですが、編集画面の中で好きな位置に自由にフィールドを追加するというような事は難しいのでもっと自由度を上げたい場合はカスタムブロックの作成がおすすめです。

ブロックとして登録しておくといつでもブロックを呼び出して好きな場所に入れ込む事ができるようになります。

カスタムブロックを作成できるのは有料版のACF Proのみとなります。
この記事では有料版プラグインACF PROを使ってカスタムブロックを作成する手順を紹介していきます。

ブロック作成方法について

ブロックの作成方法は2つあります。

  1. functions.phpに記述する方法
  2. block.jsonを使う方法(バージョン6.0以降推奨)

ACFのバージョン6.0以降はblock.jsonを使った方法が推奨されています。
今回はどちらの方法も詳しく説明していきます。

1.functions.phpに記述する方法

ファイル構成

functions.phpに記述して作成する場合のファイル構成はこのようになります。
テーマファイル/acf-blocks/acf-block/各ブロック用のphp(例)bg-block.phpなど)

ブロックスタイル用のcssは今回テーマファイル/assets/css/acf-block.cssとしていますが、別の場所でもOKです。その場合、後で記述するコード内の読み込むパスを変更します。

functions.phpの内容

以下のコードをfunctions.phpに記述します。

①まずはカスタムブロックが使えるようにするためコード

<?php

/* --------------------------------------------
 * ACFブロックの登録
 * -------------------------------------------- */
if ( function_exists( 'acf_custom_block_add' ) ) {
	add_action( 'acf/init', 'acf_custom_block_add' );
}

②エディタのブロック内にカテゴリを登録するためのコード

/* --------------------------------------------
 * ACFブロックカテゴリーの登録
 * -------------------------------------------- */
add_filter('block_categories_all', function ($categories) {
  $new_category = [
      'slug' => 'acf-block',
      'title' => 'ACFブロック',
  ];
  
  array_splice($categories, 1, 0, [$new_category]);
  
  return $categories;
});

③各ブロック用のコード
以下のコードは「背景色ブロック」「流れブロック」「ボタンセンターブロック」というオリジナルのブロックを3つ作成する場合の記述例です。

/* --------------------------------------------
 * ACFブロックの追加
 * -------------------------------------------- */
function acf_custom_block_add() {

  if ( function_exists( 'acf_register_block_type' ) ) {
    
    /* 背景色ブロック*/
    acf_register_block_type(
      array(
      'name'            => 'bg-block', 
      'title'           => __( '背景色' ), 
      'description'     => __( '背景色がつきます。テキストやリスト等使えます。' ), 
      'render_template' => 'acf-blocks/acf-block/bg-block.php', 
      'category'        => 'acf-block',
      'icon'            => 'media-default', 
      'keywords'        => array( '背景色' ), 
      'enqueue_style'   => get_template_directory_uri() . '/assets/css/acf-block.css',
      'mode'            => 'auto',
      )
    );


    /* 流れブロック*/
    acf_register_block_type(
      array(
      'name'            => 'flow-block', 
      'title'           => __( '流れ' ), 
      'description'     => __( '流れです。' ), 
      'render_template' => 'acf-blocks/acf-block/flow-block.php', 
      'category'        => 'acf-block',
      'icon'            => 'arrow-down-alt', 
      'keywords'        => array( '流れ' ), 
      'enqueue_style'   => get_template_directory_uri() . '/assets/css/acf-block.css',
      'mode'            => 'auto',
      )
    );

    
    /* ボタンセンターブロック*/
    acf_register_block_type(
      array(
      'name'            => 'btn-center-block', 
      'title'           => __( 'ボタン(センター)' ), 
      'description'     => __( 'ボタン(センター)です。' ), 
      'render_template' => 'acf-blocks/acf-block/btn-center-block.php', 
      'category'        => 'acf-block',
      'icon'            => 'button', 
      'keywords'        => array( 'ボタン','ボタンセンター' ), 
      'enqueue_style'   => get_template_directory_uri() . '/assets/css/acf-block.css',
      'mode'            => 'auto',
      )
    );

  }
}

‘enqueue_style’ => get_template_directory_uri() . ‘/assets/css/acf-block.css’,
ここがエディタ内用のcssを読み込む記述なのでcssの場所に合わせてください。

 

‘category’ => ‘custom-layout-category’,
ここは②で作成したカテゴリのスラッグを入れます

 

‘icon’ => ‘media-default’,
これは各ブロックのアイコンを選択します。
こちらのサイトからアイコンが選べます
https://developer.wordpress.org/resource/dashicons/#buddicons-bbpress-logo

ACF管理画面でブロック用のフィールド作成

ここまで記述するとACFの管理画面の設定でブロックを選択すると、右側に登録したブロックが表示されているはずです。

今回はボタン(センター)をフィールドを作ってみます。以下画像内の
1でボタン(センター)を選択します。
2でボタン用のフィールドを作成します。

作成したボタンセンターブロックの出力コードをacf-blocks/acf-block/btn-center-block.phpに記述します。

<?php if (get_field('btn-center-text')) { ?>
  <div class="u-btn-wrap u-btn-center">
    <a href="<?php the_field('btn-center-link'); ?>" class="c-btn">
      <?php the_field('btn-center-text'); ?>
    </a>
  </div>
<?php } ?>

あとはサイト表示用のcssとエディタ表示用のcssにブロックのデザインに合わせたcssでスタイルを当てて完成です。

エディタの左側のブロック欄に作成した「ACFカテゴリ」とその中にブロックが入っていると思います。例えば1でボタン(センター)ブロックを選ぶと2のようにACFで作成したフィールド入力欄が表示されるので中身を入力。

サイト上ではcssでスタイルを当てたボタンが表示されます。

2.block.jsonを使う方法

ACFのバージョン6.0以降はblock.jsonでブロック作成ができるようになり、6.0以降はblock.jsonを利用する方法が推奨されるそうです。

ファイル構成

テーマファイル/acf-blocks/各ブロック用のフォルダ/
の中に各ブロック用のphpとblock.jsonを入れます。

functions.phpの内容

今回も3つブロックを作成する場合の記述方法です。

①カスタムブロックが使えるようにするためコード
register_block_type( DIR . ‘/acf-blocks/bg’ );
ここにblock.jsonが入っている各ディレクトリまでのパスを記述します。

/* --------------------------------------------
 * カスタムブロックの登録
 * -------------------------------------------- */
add_action( 'init', 'register_acf_blocks' );
function register_acf_blocks() {
  register_block_type( __DIR__ . '/acf-blocks/bg' );
  register_block_type( __DIR__ . '/acf-blocks/btn-center' );
  register_block_type( __DIR__ . '/acf-blocks/flow' );
}

②エディタのブロック内にカテゴリを登録する

/* --------------------------------------------
 * ACFブロックカテゴリーの登録
 * -------------------------------------------- */
add_filter('block_categories_all', function ($categories) {
  $new_category = [
      'slug' => 'acf-block',
      'title' => 'ACFブロック',
  ];
  
  array_splice($categories, 1, 0, [$new_category]);
  
  return $categories;
});

③テーマファイル/acf-blocks/各ブロック用のフォルダ/
に入っているblock.jsonに該当ブロック用のコードを記述します。

テーマファイル/acf-blocks/bg/block.jsonの場合

{
  "name": "bg-block",
  "title": "背景色ブロック",
  "description": "背景色がつきます。テキストやリスト等使えます。",
  "style": [ "file:../../assets/css/acf-block.css" ],
  "category": "acf-block",
  "icon": "media-default",
  "keywords": ["背景色"],
  "acf": {
      "mode": "auto",
      "renderTemplate": "./acf-blocks/bg/bg-block.php"
  },
  "align": "full"
}

テーマファイル/acf-blocks/btn-center/block.jsonの場合

{
  "name": "btn-center",
  "title": "ボタン(センター)",
  "description": "ボタン(センター)",
  "style": [ "file:../acf-block.css" ],
  "category": "acf-block",
  "icon": "button",
  "keywords": ["ボタン"],
  "acf": {
      "mode": "auto",
      "renderTemplate": "./acf-blocks/btn-center/btn-center-block.php"
  },
  "align": "full"
}

テーマファイル/acf-blocks/flow/block.jsonの場合

{
  "name": "flow",
  "title": "流れ",
  "description": "流れの時に使います",
  "style": [ "file:../acf-block.css" ],
  "category": "acf-block",
  "icon": "arrow-down-alt",
  "keywords": ["流れ"],
  "acf": {
      "mode": "auto",
      "renderTemplate": "./acf-blocks/flow/flow-block.php"
  },
  "align": "full"
}

このように1つのブロックに対して1つのでフォルダを作成、その中にそのブロック用のblock.jsonとphpファイルを用意します。

あとの手順は同じです。

お客様のご要望に合わせて柔軟にオリジナルのブロックを手軽に作成できるのでとても便利です。

株式会社ENVY DESIGN

フロントエンドエンジニア

株式会社ENVY DESIGNフロントエンドエンジニア。コーディングとCMS構築を主に担当。フリーランス出身、色々なサイト制作に携わった経験を元に、実装中の気付きや技術的な情報を発信してきます。

よくある質問

オンラインでの集客を強化し、
ビジネスを成長へと導きます。

資料ダウンロード

Web制作に関する資料と会社紹介をダウンロードできます。

お問い合わせ・ご相談

Webサイト制作後や制作後の運用などでお悩みの方はお気軽にご相談ください。

お電話でのお問い合わせ

お電話でのお問い合わせをご希望の方は、こちらからお気軽にご連絡ください。

平日9:30-18:30

03-6883-8292