利用 高級自定義字段（ACF） 插件，你可以輕松地為 Gutenberg（古騰堡） 創(chuàng)建自定義區(qū)塊，而無需深入掌握 JavaScript 等高級技術(shù)。在這篇文章中，詳細(xì)介紹如何通過 ACF 創(chuàng)建一個 自定義行動號召（CTA）塊，為你的網(wǎng)站增加吸引用戶點擊的元素。

為什么選擇 Gutenberg 和 ACF 創(chuàng)建自定義塊？

Gutenberg 編輯器通過“區(qū)塊”概念，讓內(nèi)容的管理和排版變得更加簡便和模塊化。通過使用 ACF 插件，可以在 Gutenberg 編輯器中創(chuàng)建完全符合自己需求的自定義區(qū)塊，而不用編寫復(fù)雜的 JavaScript 代碼。ACF 提供了一種簡潔的方式，讓開發(fā)者和設(shè)計師能夠通過 WordPress 后臺輕松自定義字段，創(chuàng)建出功能強大且外觀獨特的區(qū)塊。

步驟

1. 注冊自定義塊： 在 WordPress 主題的 functions.php 文件中注冊自定義區(qū)塊。
2. 創(chuàng)建 ACF 字段組： 創(chuàng)建包含標(biāo)題、描述、按鈕等的自定義字段。
3. 創(chuàng)建塊模板： 使用 PHP 編寫一個模板文件來定義區(qū)塊的前端展示。
4. 添加自定義樣式： 通過 CSS 文件設(shè)計區(qū)塊的樣式，使其符合你網(wǎng)站的設(shè)計風(fēng)格。
5. 在 Gutenberg 中使用區(qū)塊： 將創(chuàng)建好的 CTA 區(qū)塊插入到頁面或文章中，開始使用。

步驟 1：在 functions.php 文件中注冊自定義塊

首先，需要在 WordPress 主題的 functions.php 文件中（底部）注冊自定義塊。通過 ACF 提供的 acf_register_block_type() 函數(shù)，可以非常容易注冊一個新的區(qū)塊。

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：設(shè)置自定義區(qū)塊的唯一標(biāo)識符。
• title：區(qū)塊在 Gutenberg 編輯器中的顯示名稱。
• description：簡短描述區(qū)塊的功能。
• render_template：指定前端呈現(xiàn)區(qū)塊內(nèi)容的 PHP 模板文件路徑。
• category：指定區(qū)塊的分類，決定它將出現(xiàn)在 Gutenberg 編輯器的哪個位置。
• icon：設(shè)置區(qū)塊圖標(biāo)，便于在 Gutenberg 中識別。
• keywords：設(shè)置關(guān)鍵字，方便用戶搜索到該區(qū)塊。
• enqueue_style：指定區(qū)塊的樣式表路徑，以便加載樣式。

步驟 2：為區(qū)塊創(chuàng)建 ACF 字段組

接下來，需要創(chuàng)建 ACF 字段組，首先安裝ACF插件。這樣你就可以在 Gutenberg 編輯器中填寫必要的信息，如標(biāo)題、描述、按鈕文本、圖片等。

1. 登錄 WordPress 后臺，轉(zhuǎn)到 ACF > 字段組。

2. 點擊 添加新字段組，創(chuàng)建一個名為“自定義 CTA 塊字段”的字段組。

3. 在該字段組中添加以下字段：
   • 標(biāo)題（Text）：為 CTA 塊添加一個字段，用于填寫標(biāo)題。
   • 描述（Text Area）：為 CTA 塊添加一個文本區(qū)域字段，用于描述。
   • 圖像（Image）：為 CTA 塊添加一個圖片字段。
   • 按鈕文本（Text）：為 CTA 塊添加一個按鈕文本字段。
   • 按鈕 URL（URL）：為 CTA 塊添加一個按鈕鏈接字段。
   • 背景顏色（Color Picker）：為 CTA 塊添加一個顏色選擇器字段，用于設(shè)置背景顏色。

4. 在 位置規(guī)則 中設(shè)置條件，將規(guī)則設(shè)置為 “塊等于自定義 CTA 塊”，此處需要使用ACF Pro版。這樣只有在使用該自定義區(qū)塊時，ACF 字段才會顯示出來。

步驟 3：創(chuàng)建區(qū)塊模板

現(xiàn)在已經(jīng)注冊了自定義塊并創(chuàng)建了相應(yīng)的字段，接下來我們需要創(chuàng)建一個模板文件來呈現(xiàn)區(qū)塊的內(nèi)容。

1. 在你的主題目錄中，導(dǎo)航到 template-parts/blocks/ 文件夾。如果沒有該文件夾，需要創(chuàng)建一個。
2. 在該文件夾中創(chuàng)建一個新文件，命名為 custom-cta.php。
3. 在 custom-cta.php 文件中，使用以下代碼來輸出字段內(nèi)容：

<?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 塊創(chuàng)建 CSS 樣式

為了讓自定義 CTA 塊看起來更美觀，可以添加一些 CSS 樣式。在 template-parts/blocks/ 文件夾中創(chuàng)建一個名為 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 編輯器中使用你創(chuàng)建的自定義 CTA 塊。

1. 打開一個帖子或頁面。
2. 點擊 + 按鈕以添加一個新塊。

3. 搜索 自定義 CTA 塊 并將其插入到內(nèi)容中。

4. 在編輯器中填寫標(biāo)題、描述、圖片、按鈕文本、按鈕 URL 和背景顏色等字段。
5. 發(fā)布或預(yù)覽帖子，查看你創(chuàng)建的自定義 CTA 塊的效果。

總結(jié)

通過使用 ACF 插件，可以輕松為 Gutenberg 編輯器創(chuàng)建自定義的行動號召（CTA）塊，而無需編寫復(fù)雜的 JavaScript 代碼。該教程詳細(xì)介紹了如何在 WordPress 中注冊自定義區(qū)塊、創(chuàng)建 ACF 字段、設(shè)計前端模板、添加樣式并在 Gutenberg 中使用這些自定義區(qū)塊。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息