アドバンスドカスタムフィールド（ACF）を使ってWordPressでカスタムGutenberg CTAブロックを作成する方法

用いる 高度なカスタムフィールド(ACF) プラグインを使えば、Gutenberg用のカスタムブロックを簡単に作成できます。 ジャバスクリプト などの高度なテクニックがあります。この記事では、以下の方法でACFを作成する方法について詳しく説明します。 行動喚起のカスタマイズ(CTA）ブロックあなたのウェブサイトに、ユーザーをクリックスルーさせる要素を追加してください。

なぜグーテンベルクと ACFの創設カスタムブロック？

Gutenbergエディタは"こっかい「をコンセプトに、コンテンツ管理とレイアウトをより簡単に、よりモジュール化しました。また ACF 複雑なJavaScriptコードを記述することなく、ニーズにぴったり合ったカスタムブロックをGutenbergエディタで作成できるプラグインです。 ACFは、開発者やデザイナーがWordPressのバックエンドを通じてフィールドを簡単にカスタマイズし、パワフルでユニークな外観のブロックを作成できるクリーンな方法を提供します。

動く

1. カスタムブロックを登録します： WordPressテーマの functions.php ファイルにカスタムブロックを登録します。
2. ACF フィールドグループを作成します： タイトル、説明、ボタンなどを含むカスタムフィールドを作成します。
3. ブロックテンプレートを作成します： ブロックのフロントエンドのプレゼンテーションを定義するために、PHPを使用してテンプレートファイルを記述します。
4. カスタムスタイルの追加 あなたのウェブサイトのデザインスタイルに合わせてCSSファイルでブロックをスタイルします。
5. Gutenbergでブロックを使う 作成したCTAブロックをページまたは投稿に挿入して開始します。

ステップ1 functions.php カスタムブロックのファイル登録

まず functions.php カスタムブロックをファイル（下）に登録します。カスタムブロックは、ACFが提供するファイル（下）に acf_register_block_type() 関数を使えば、新しいブロックを登録するのはとても簡単です。

ファンクション register_custom_cta_block() { {
    if (function_exists('acf_register_block_type')) {.
        acf_register_block_type(array(
            'name' => 'custom_cta'、
            'title' => __('カスタムCTAブロック')、
            'description' => __('A custom call to action block with image, title, description, and button.')、
            'render_template' => 'template-parts/blocks/custom-cta.php'、
            'category' => 'common'、
            'icon' => 'メガホン'、
            'keywords' => array('cta', 'call to action', 'button')、
            'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/custom-cta.css'、
        ));
    }
}
add_action('acf/init', 'register_custom_cta_block')；

このコードでは、次のような設定を行っています：

• 名称カスタムブロックの一意な識別子を設定します。
• タイトル: Gutenbergエディタでのブロックの表示名。
• 記述ブロックの機能についての簡単な説明。
• レンダーテンプレート: フロントエンドでブロックの内容をレンダリングする PHP テンプレートファイルのパスを指定します。
• カテゴリー: ブロックの分類を指定し、Gutenbergエディタ内のどこに表示されるかを決定します。
• アイコン: Gutenbergで識別しやすいようにブロックアイコンを設定します。
• キーワード: ユーザーがブロックを検索しやすいようにキーワードを設定します。
• enqueue_styleスタイルを読み込むためのブロックのスタイルシートへのパスを指定します。

ステップ2：ブロックのACFフィールドグループの作成

次に、まずACFプラグインをインストールして、ACFフィールドグループを作成する必要があります。これにより、Gutenbergエディタで必要な情報を入力できるようになります。キャプションそして説明そしてボタンテキストそして写真その他

1. WordPressのバックエンドにログインし、以下のページに移動します。 ACF > フィールドグループ.

2. 打点 新しいフィールドグループの追加という名前のファイルを作成します。カスタムCTAブロックフィールド"をフィールドグループに追加します。

3. このフィールドグループに以下のフィールドを追加します：
   • タイトル（テキスト）CTAブロックのタイトルのフィールドを追加します。
   • 説明（テキストエリア）: CTAブロックに説明用のテキストエリアフィールドを追加します。
   • 画像CTAブロックに画像フィールドを追加します。
   • ボタンテキスト（テキスト）CTAブロックにボタンテキストフィールドを追加します。
   • ボタンのURL (URL)CTAブロックにボタンリンクフィールドを追加します。
   • 背景色（カラーピッカー）: CTAブロックに背景色を設定するためのカラーピッカーフィールドを追加します。

4. ある ポジショニング・ルール ルールの条件を次のように設定します。 "ブロックはカスタムCTAブロックに等しい"カスタムブロックを使用する場合、ACF Proバージョンを使用する必要があります。こうすることで、ACFフィールドはこのカスタムブロックが使用されている場合のみ表示されます。

ステップ3：ブロックテンプレートの作成

カスタムブロックが登録され、適切なフィールドが作成されたので、次にブロックの内容をレンダリングするためのテンプレートファイルを作成する必要があります。

1. テーマディレクトリの テンプレート・パーツ/ブロック フォルダ。フォルダが存在しない場合は、作成する必要があります。
2. このフォルダに カスタムcta.php.
3. ある カスタムcta.php ファイルでは、以下のコードを使ってフィールドの内容を出力してください：

<?php
$title = get_field('title')；
$description = get_field('description')；
$image = get_field('image')；
$button_text = get_field('button_text')；
$button_url = get_field('button_url')；
$background_color = get_field('background_color')；
?>

<div class="custom-cta-block" style="background-colour: ">
    <?php if ($image): ?>
        <img src="" alt="" class="cta-image" />
    <?php endif; ?>

    
.
        <?php if ($title): ?>
            

        <?php endif; ?>

        <?php if ($description): ?>
            
</p
        <?php endif; ?>

        <?php if ($button_text && $button_url): ?>
            <a href="" class="cta-button">
                <?php echo esc_html($button_text); ?>
            
        <?php endif; ?>