東京都府中市、九段下のWEB制作会社Maromaroのブログです

2022.08.05

taka

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パターンは別々のクラスを設定しています。

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

 

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

 

このように簡単にカスタムブロックを追加できました。
出力されるHTMLなどが一つのブロックで自由自在に登録できるので、
デザインの幅が広がり、操作も簡単になるので大変便利です。

以上Takaでした。