2022.08.05

Advanced Custom Fields Proで簡単にカスタムブロックを追加する方法

こんにちは
MaromaroのTakaです。

最近WordPressに触れる機会が多くなってきました。
エディタは基本的にGutenbergを使うことが多いのですが、
やはりユーザーに使っていただく際にブロックが使いづらかったり、
欲しいブロックが無かったり、
デザインが制限されてしまうのが難点ですよね。

ブロックを追加したい場合はReactなどを使う必要があったりで、
なかなか気軽に手を出すことが難しいです。

しかしACF Proの機能を使えばテーマファイルを弄る必要はありますが、
手軽にカスタムブロックを追加できるので、
今回はそちらをご紹介します。
※ACF無料版だと対応していません。

対応手順

まず初めにブロック追加の大まかな流れから説明します。

①functions.phpにカスタムブロックを登録
②カスタムフィールドを作成、①と紐づける
③出力されるブロックの内訳をテーマファイル内に作成する（phpファイル）

以上3点のみとなります。
非常に簡単ですね。

順を追って説明したいと思います。

functions.phpにカスタムブロックを登録

例で見出しブロックを作成したいと思います。

まず初めにfunctions.phpに以下のように記載します。

add_action("acf/init", function () {
  if( function_exists("acf_register_block") ) {
    acf_register_block(array(
      "name" => "custom_h",
      "title" => __("見出し"),
      "description" => __("見出し:Hを挿入します"),
      "render_callback" => function (){
        get_template_part("gutenberg-blocks/block-custom_h");
      },
      "category" => "formatting",
      "icon" => "heading",
      "keywords" => array("見出し:H", "custom_h"),
      'mode' => 'auto',
    ));
  }
});

各役割については以下の通りです。

name　役割がよくわかりませんが、下のtitleと同名にしておけば間違いないです。
title　ブロック名です
description　ブロックの説明です。
render_template　ここで指定したファイルでブロックテンプレートを作っていきます。
category　デフォルトのカテゴリか、オリジナルのカテゴリを指定できます。（自作カテゴリを使う場合は、別でfuncions.phpでの記述が必要です。
icon　アイコンを選択します。基本的にDashiconsから選択してください。
keywords　ブロックを検索する際のキーワードを指定します。
mode　デフォルトではインスペクター（サイドバー）に入力エリアが出現しますが、‘mode’ => ‘auto’にすることで編集エリアでそのまま入力できるようになりますので基本指定しておきましょう。

カスタムフィールドを作成、①と紐づける

以下のようにカスタムフィールドを作り、
赤線部分のように制作した登録したブロックと紐づけてください。（ブロックタイトルが表示されます。）

出力されるブロックの内訳をテーマファイル内に作成する（PHPファイル）

1つのブロックでh2~h4を選択できるようにと、
h3から3パターン選べるカスタムブロックを作ります。

以下のように記述します。

//カスタムフィールドから値を取得
$heading_type = get_field("heading_type");//見出しのタイプ
$heading_txt = get_field("heading_txt");//見出しのテキスト

if($heading_type == 'h2'){
  $txt = "<h2>". $heading_txt ."";
}else if($heading_type == 'h3'){
  $txt = "<h3>". $heading_txt ."";
}else if($heading_type == 'h3-2'){
  $txt = "<h3 class='wp_h3_p02'>". $heading_txt ."";
}else if($heading_type == 'h3-3'){
  $txt = "<h3 class='wp_h3_p03'>". $heading_txt ."";
}else if($heading_type == 'h4'){
  $txt = "<h4>". $heading_txt ."";
}

//投稿画面とページに出力します
echo($txt);

セレクトボックスで出力される見出しを変更できるようにしました。
h3の3パターンは別々のクラスを設定しています。

以上でカスタムブロックの登録は完了となります。

実際の投稿画面に行くと以下のようになっています。