お問い合わせはコチラから

【ACF block】どうすれば使えるのか?ポイント解説

サイト運営

ACFは制作する側からみると便利なのですが、ブロックエディタに切り替わってからは、カスタムフィールドの入力欄がブロックエディタとは別れてしまう点が利用者にとっては直感的ではなくなってきていると感じていました。

ACF proにはACF BlockというGutenbergのブロックを作れる機能があります。

ACF | ACF Blocks
Introduction ACF Blocks are customizable, dynamic, and integrate deeply with custom fields. A premium feature found in A...

ACF Blockを使うと、カスタムフィールド入力欄がGutenberg blockに組み込まれます。ユーザーから見ると使いやすくなると思いました。

早速使ってみたらACF block結構分かりにくかったので、まとめておこうかと思います。

ACF Blockを使う手順

基本、本家のACF Blockの説明通りに行えば同じことはできます。

迷ってしまうところを補足して説明していきます。

手順1:Blockを登録します

ブロックエディタで呼び出すBlockを定義します。この定義だけでブロックエディタからBlockを追加することができます。

使うのはacf_register_block_typeです。

ACF | acf_register_block_type()
Registers a custom block type in the Gutenberg editor.

本家にあるacf_register_block_typeの記述例でわかりにくいポイントは4つあります。

  • name
    日本はNG。
    最初、日本語で書いていたらブロックが一覧に表示されず、原因がわからなくてかなりまいった。
  • title
    ブロックエディタで呼び出すときのブロック名になる。
    日本語OK。
  • render_template
    子テーマ内に配置するのが一般的?
    functions.phpに書かず、code snippetsに書く場合も子テーマからの相対パスで大丈夫。
  • icon
    “dashicons-admin-comments”の“dashicons-“部分はいらない
    使用できるアイコン一覧は、こちらから確認。
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'testimonial', // 日本語NG
            'title'             => __('Testimonial'),//ブロックの名前 日本語OK
            'description'       => __('A custom testimonial block.'),
            'render_template'   => 'template-parts/blocks/testimonial/testimonial.php', // 子テーマからの相対パスでOK
            'category'          => 'formatting',
            'icon'              => 'admin-comments', // アイコン名は注意
            'keywords'          => array( 'testimonial', 'quote' ),
        ));
    }
}

手順2:カスタムフィールドを作成します

普通にACFでカスタムフィールドを作る手順で大丈夫です。

ただし、通常と異なるのは『位置』のルールです。

このフィールドグループを表示する条件:

  • ブロック
  • 等しい
  • ブロック名(acf_register_block_typeのtitleで登録した名前)

この指定をしなくても、ブロックエディタでブロックを呼び出してエディタに配置できますが、ブロックの中身が何も表示されません。

なので、もし忘れていると中々気が付きにくいポイントです。

手順3:Blockの表示テンプレートを作成します

手順1で定義したrender_templateの中身をphpファイルで作成します。

先頭のコメント部分が重要で、このテンプレート内部で参照できるパラメータの説明があります。この部分はどのブロックも共通で使える部分だと思います。

カスタムフィールドの入力部分はテンプレートに定義する必要はありません。あくまでサイトで表示される部分のみです。

カスタムフィールドの定義で『位置』が正しく設定されていれば、ブロックを配置するとサイドバーエリアやブロック内に入力欄が自動的に表示されます。

<?php
//------------------ ここから共通 ----------------------------

/**
 * ACF Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'testimonial';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

//------------------ ここまで共通 ----------------------------

//---------- カスタムフィールドの読み込みとデフォルト値 ---------
// Load values and assign defaults.
$text = get_field('testimonial') ?: 'Your testimonial here...';
$author = get_field('author') ?: 'Author name';
$role = get_field('role') ?: 'Author role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');

//---------- カスタムフィールドの読み込みとデフォルト値 ---------

//---------- ここからHTML表示部分 ----------
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
    <blockquote class="testimonial-blockquote">
        <span class="testimonial-text"><?php echo $text; ?></span>
        <span class="testimonial-author"><?php echo $author; ?></span>
        <span class="testimonial-role"><?php echo $role; ?></span>
    </blockquote>
    <div class="testimonial-image">
        <?php echo wp_get_attachment_image( $image, 'full' ); ?>
    </div>
    <style type="text/css">
        #<?php echo $id; ?> {
            background: <?php echo $background_color; ?>;
            color: <?php echo $text_color; ?>;
        }
    </style>
</div>

ACF Blockを使うメリットはあるか?

クライアントワークなどではカスタムフィールドを意識しなくてよくなるので便利だと思います。

リッチリザルト対応させたいものなど、ブロックのテンプレートに埋め込んでしまえば簡単に対応できるようになるので、便利だとおもいます。

ブロックとして一ページ内に複数のブロックを置けてしまうので、テンプレート外からのカスタムフィールド管理は複雑になると思います。CSVなどで流し込む用途には従来の方法の方が良いと思います。

まとめ

ACF Blockは公式の例をそのまま使えば表示できます。公式の例を一度なぞっていれば成功体験があるのでそれほど苦労せずに行けると思います。私の場合は、公式の例をまじめに見ずにいきなり自分で書き始めたのでトラブルシュートが結構大変でした。

一度表示できるようになってしまうと迷う部分はほとんどないので、公式の例をなぞっておくことをお勧めします。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました