README

使用 Wordplate ACF 和 ACF Flexible Content Field 的 ACF 页面构建器

需求

❗ 注意: 使用此软件包需要 Advanced Custom Fields Pro (Flexible Content Field)

安装

Composer

$ composer require symbioticwp/acf-page-builder

需求

• PHP >= 7.0

设置

通过 composer 自动加载器启用动态类包含（PSR-4 自动加载）。（提示：首先检查您的主题中是否已经有以下代码片段）

<?php
if (file_exists($composer = __DIR__ . '/vendor/autoload.php')) {
    require_once $composer;
}

如何做

创建您希望在页面构建器中使用的自定义 'Blocks'。一个 Block 可以是一个滑动条、图片库或者一个简单的文本块。

添加您的 Blocks：functions.php

<?php

add_action('symbiotic/acf_page_builder/register_page_blocks', function($pageBuilder) {

    // Create Blocks directly with an array
	$pageBuilder->addLayout([
		'label'      => 'Text Block',
		'name'       => 've-text-block',
		'display'    => 'block',
		'sub_fields' => [
			acf_tab(['label' => 'Details']),
			acf_text( [ 'label' => 'Title', 'name' => 've-text-title' ] ),
			acf_wysiwyg( [ 'label' => 'Content', 'name' => 've-text-content' ] ),
		]
	]);

	$pageBuilder->addLayout([
		'label'      => 'Image Block',
		'name'       => 've-image-block',
		'display'    => 'block',
		'sub_fields' => [
			acf_tab(['label' => 'Details']),
			acf_image( [ 'label' => 'Image', 'name' => 've-image-block' ] ),
			acf_text( [ 'label' => 'Aspect Ratio', 'name' => 've-aspect-ratio', 'default_value' => '16:9' ] ),
		]
	]);
});

对于复杂的逻辑或模板，您可以创建一个继承自 AbstractBlock 的自定义 Block 类。您需要实现 registerLayout 和 render 方法。

自定义 Block：app/Blocks/TemplateBlock.php

<?php
namespace App\Blocks;

use Symbiotic\AcfPageBuilder\Blocks\AbstractBlock;

class TemplateBlock extends AbstractBlock {

	protected function registerLayout() {
		return [
			'label'      => 'Template Block',
			'name'       => 've-template-block',
			'display'    => 'block',
			'sub_fields' => [
				acf_tab(['label' => 'Details']),
				acf_text( [ 'label' => 'Path to Template File', 'name' => 've-template-filename' ] ),
			]
		];
	}

	public function render() {
		$this->includeTemplate(field('ve-template-filename'));
	}
}

在页面构建器中注册 TemplateBlock。

<?php

use App\Blocks\TemplateBlock;

add_action('symbiotic/acf_page_builder/register_page_blocks', function($pageBuilder) {

    // Initialize Blocks with a class (for complex logic)
	$pageBuilder->addLayout(new TemplateBlock());
});

您还可以使用挂钩来调整配置。例如，让我们为每个现有的 Block 添加一个设置选项卡。

<?php
/**
 * Add a settings Tab to every Block
 */
 
add_action('symbiotic/acf_page_builder/add_layout_after', function($layoutConfig) {
	if(!isset($layoutConfig['sub_fields'])) {
		var_dump($layoutConfig);
	}
	$layoutConfig['sub_fields'] = array_merge(
		$layoutConfig['sub_fields'],
		addSettingsTab()
	);

	return $layoutConfig;
});

/**
 *
 * @return array
 */
function addSettingsTab() {
	return [
		acf_tab(['label' => 'Settings']),
		acf_text([ 'label' => 'Container Class',
		            'name' => 've-settings-container',
					'instructions' => 'You can define your own container classes which gets included in the Html Block Wrapper'])
	];
}

您可以使用 set_location 挂钩来自定义显示页面构建器的地方。例如，让我们为 portfolio 和 services 帖子类型启用页面构建器。

<?php
add_action('symbiotic/acf_page_builder/set_location', function($location) {
	$location[] = [acf_location('post_type', 'portfolio')];
	$location[] = [acf_location('post_type', 'services')];
	return $location;
});

附加信息

• 'Blocks' 可以与 react 的组件或 Elementor/Wordpress 的小工具相提并论。

路线图

• 完成文档

变更日志

1.0.0

• 初始构建