如何使用高级自定义字段（ACF）在 WordPress 中创建自定义 Gutenberg CTA 块

利用 高级自定义字段（ACF） 插件，你可以轻松地为 Gutenberg（古腾堡） 创建自定义区块，而无需深入掌握 JavaScript 等高级技术。在这篇文章中，详细介绍如何通过 ACF 创建一个 自定义行动号召（CTA）块，为你的网站增加吸引用户点击的元素。

为什么选择 Gutenberg 和 ACF 创建自定义块？

Gutenberg 编辑器通过“区块”概念，让内容的管理和排版变得更加简便和模块化。通过使用 ACF 插件，可以在 Gutenberg 编辑器中创建完全符合自己需求的自定义区块，而不用编写复杂的 JavaScript 代码。ACF 提供了一种简洁的方式，让开发者和设计师能够通过 WordPress 后台轻松自定义字段，创建出功能强大且外观独特的区块。

步骤

1. 注册自定义块： 在 WordPress 主题的 functions.php 文件中注册自定义区块。
2. 创建 ACF 字段组： 创建包含标题、描述、按钮等的自定义字段。
3. 创建块模板： 使用 PHP 编写一个模板文件来定义区块的前端展示。
4. 添加自定义样式： 通过 CSS 文件设计区块的样式，使其符合你网站的设计风格。
5. 在 Gutenberg 中使用区块： 将创建好的 CTA 区块插入到页面或文章中，开始使用。

步骤 1：在 functions.php 文件中注册自定义块

首先，需要在 WordPress 主题的 functions.php 文件中（底部）注册自定义块。通过 ACF 提供的 acf_register_block_type() 函数，可以非常容易注册一个新的区块。

function register_custom_cta_block() {
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'custom_cta',
            'title'             => __('Custom CTA Block'),
            'description'       => __('A custom call to action block with an image, title, description, and button.'),
            'render_template'   => 'template-parts/blocks/custom-cta.php',
            'category'          => 'common',
            'icon'              => 'megaphone',
            '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');

在这段代码中，做了如下配置：

• name：设置自定义区块的唯一标识符。
• title：区块在 Gutenberg 编辑器中的显示名称。
• description：简短描述区块的功能。
• render_template：指定前端呈现区块内容的 PHP 模板文件路径。
• category：指定区块的分类，决定它将出现在 Gutenberg 编辑器的哪个位置。
• icon：设置区块图标，便于在 Gutenberg 中识别。
• keywords：设置关键字，方便用户搜索到该区块。
• enqueue_style：指定区块的样式表路径，以便加载样式。

步骤 2：为区块创建 ACF 字段组

接下来，需要创建 ACF 字段组，首先安装ACF插件。这样你就可以在 Gutenberg 编辑器中填写必要的信息，如标题、描述、按钮文本、图片等。

1. 登录 WordPress 后台，转到 ACF > 字段组。

2. 点击 添加新字段组，创建一个名为“自定义 CTA 块字段”的字段组。

3. 在该字段组中添加以下字段：
   • 标题（Text）：为 CTA 块添加一个字段，用于填写标题。
   • 描述（Text Area）：为 CTA 块添加一个文本区域字段，用于描述。
   • 图像（Image）：为 CTA 块添加一个图片字段。
   • 按钮文本（Text）：为 CTA 块添加一个按钮文本字段。
   • 按钮 URL（URL）：为 CTA 块添加一个按钮链接字段。
   • 背景颜色（Color Picker）：为 CTA 块添加一个颜色选择器字段，用于设置背景颜色。

4. 在 位置规则 中设置条件，将规则设置为 “块等于自定义 CTA 块”，此处需要使用ACF Pro版。这样只有在使用该自定义区块时，ACF 字段才会显示出来。

步骤 3：创建区块模板

现在已经注册了自定义块并创建了相应的字段，接下来我们需要创建一个模板文件来呈现区块的内容。

1. 在你的主题目录中，导航到 template-parts/blocks/ 文件夹。如果没有该文件夹，需要创建一个。
2. 在该文件夹中创建一个新文件，命名为 custom-cta.php。
3. 在 custom-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-color: <?php echo esc_attr($background_color); ?>">
    <?php if ($image): ?>
        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="cta-image" />
    <?php endif; ?>

    <div class="cta-content">
        <?php if ($title): ?>
            <h3 class="cta-title"><?php echo esc_html($title); ?></h3>
        <?php endif; ?>

        <?php if ($description): ?>
            <p class="cta-description"><?php echo esc_html($description); ?></p>
        <?php endif; ?>

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

步骤 4：为 CTA 块创建 CSS 样式

为了让自定义 CTA 块看起来更美观，可以添加一些 CSS 样式。在 template-parts/blocks/ 文件夹中创建一个名为 custom-cta.css 的文件，并添加以下样式：

.custom-cta-block {
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    max-width: 700px;
    margin: 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.custom-cta-block:hover {
    transform: translateY(-5px);
}

.cta-image {
    max-width: 120px;
    margin-bottom: 20px;
    border-radius: 50%;
    border: 4px solid #fff;
}

.cta-title {
    font-size: 28px;
    margin: 15px 0;
    font-weight: 700;
}

.cta-description {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cta-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #ff6b6b;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #e05656;
}

步骤 5：在 Gutenberg 编辑器中使用自定义块

最后，可以在 Gutenberg 编辑器中使用你创建的自定义 CTA 块。

1. 打开一个帖子或页面。
2. 点击 + 按钮以添加一个新块。

3. 搜索 自定义 CTA 块 并将其插入到内容中。

4. 在编辑器中填写标题、描述、图片、按钮文本、按钮 URL 和背景颜色等字段。
5. 发布或预览帖子，查看你创建的自定义 CTA 块的效果。

总结

通过使用 ACF 插件，可以轻松为 Gutenberg 编辑器创建自定义的行动号召（CTA）块，而无需编写复杂的 JavaScript 代码。该教程详细介绍了如何在 WordPress 中注册自定义区块、创建 ACF 字段、设计前端模板、添加样式并在 Gutenberg 中使用这些自定义区块。