使用Advanced Custom Fields插件

第1步：创建ACF块

我建议在 gutenberg 使用ACF块，这是我们的首选，原因如下：

• 使您的主题模块化，
• 易于与默认WP页面生成器一起使用，
• 重用性

那么什么是ACF块？简而言之，将它们视为页面中的部分。您的“关于我们”部分将是一个单独的块，“联系我们”部分将是另一个块，“定价计划”部分将是另一个单独的块，依此类推。用户可以创建新页面或新帖子，并可以向页面/帖子添加块。新块将与默认的段落、标题、列表和其他Wordpress块可用。
了解更多详细信息的好资源：https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/
通过使您的主题模块化，您的客户将能够添加新的部分，删除部分，重新组织现有的部分等。
如何注册一个区块？

add_action('acf/init', 'register_new_acf_blocks' );
function register_new_acf_blocks(): void {
    acf_register_block( array(
        'name'              => 'section-title',
        'title'             => __('Section Title'),
        'description'       => __('A section title with optional sub text.'),
        'render_callback'   => 'render_block',
        'category'          => 'formatting',
        'icon'              => 'admin-comments',
        'keywords'          => array( 'title', 'section', 'heading' ),
    ) );
}

字符串
然后是渲染回调：

function render_block( $block ): void {
    $slug = str_replace('acf/', '', $block['name']);

    ob_get_clean();
    
    require get_theme_file_path("/resources/blocks/content-{$slug}.php");
    
    $content = ob_end_clean();
    
    echo $content;
}

型
所以在我们的主题中，我们必须有..path-to-theme/resources/blocks/content-section-title.php。content-section-title.php文件将作为块的视图，因此您的整个HTML都放在这里。

第2步：在块中添加ACF字段

让我们假设content-section-title.php是一个简单的部分，并使用以下代码。

<h1> Your title </h1>
<p> Your sub-title for the section </p>

型
这将使您的代码成为STATIC（就像现在这样），因为H1和P文本值是硬编码的。为了使它们成为动态的，从而允许您的用户编辑这些块-遵循ACF文档的this part。
假设您创建了名为“section_title”和“section_subtitle”的新ACF字段。您需要将模板视图调整为如下所示：

<h1> <?= get_field('section_title') ?> </h1>
<p> <?= get_field('section_subtitle') ?> </p>

型
现在，每当用户创建一个块，并点击它从WP gutenberg 编辑器，他们会看到2个输入字段的标题和副标题在右侧边栏的编辑器。用户将输入的值，将是一个显示在网站的前端，在那里使用了这个块。