oberonlai/wp-metabox

为 WordPress 文章类型添加自定义字段。

v1.0.7 2023-10-18 09:01 UTC

This package is auto-updated.

Last update: 2024-09-18 11:01:42 UTC


README

Simple WordPress Class for metabox forks from wp-metabox-constructor-class

要求

安装

使用 composer 安装

在您的终端中运行以下命令以使用 Composer 安装。

$ composer require oberonlai/wp-metabox

WP Metabox PSR-4 自动加载,并可与 Composer 的自动加载器一起使用。以下是一个基本示例,但您的配置可能因您的 Composer 使用方式而有所不同。

require __DIR__ . '/vendor/autoload.php';

use ODS\Metabox;

$options = array( ... );

$books = new Metabox( $options );

有关使用 Composer 和自动加载的详细信息,请参阅 Composer 的 基本使用 指南。

基本使用

以下是一个设置简单自定义过滤器的示例,该过滤器具有一个文章元字段。

// Require the Composer autoloader.
require __DIR__ . '/vendor/autoload.php';

// Import PostTypes.
use ODS\Metabox;

使用方法

要创建一个元框,首先实例化一个 Metabox 的实例。该类接受一个参数,即一个关联数组。数组的键类似于提供给 add_meta_box WordPress 函数的参数;然而,您不提供 callbackcallback_args

$metabox = new Metabox(array(
	'id' => 'metabox_id',
	'title' => 'My awesome metabox',
	'screen' => 'post', // post type
	'context' => 'advanced', // Options normal, side, advanced.
	'priority' => 'default'
));

请添加对 WooCommerce 订单元框的检测,以检查 HPOS 是否已启用。

use Automattic\WooCommerce\Internal\DataStores\Orders\CustomOrdersTableController;

$screen = wc_get_container()->get( CustomOrdersTableController::class )->custom_orders_table_usage_is_enabled()
		? wc_get_page_screen_id( 'shop-order' )
		: 'shop_order';

$metabox = new Metabox(
	array(
		'id'       => 'metabox_id',
		'title'    => 'My awesome metabox for WooCommerce order',
		'screen'   => $screen,
		'context'  => 'side',
		'priority' => 'high',
	)
);

可用字段

在实例化上述元框后,向其中添加一些字段。以下是可用字段的列表。

文本

一个简单的文本输入。没有什么特别的。

$metabox->addText(array(
	'id' => 'metabox_text_field',
	'label' => 'Text',
	'desc' => 'An example description paragraph that appears below the label.'
));

文本区域

文本区域用于存储一段文本。对于更丰富的 HTML 体验,请参阅 WYSIWYG 编辑器。

$metabox->addTextArea(array(
	'id' => 'metabox_textarea_field',
	'label' => 'Textarea',
	'desc' => 'An example description paragraph that appears below the label.'
));

复选框

复选框是方便条件逻辑的好方法。

$metabox->addCheckbox(array(
	'id' => 'metabox_checkbox_field',
	'label' => 'Checkbox',
	'desc' => 'An example description paragraph that appears below the label.'
));

单选按钮

单选按钮字段是选择一系列选项的好方法。

$metabox->addRadio(
	array(
		'id' => 'metabox_radio_field',
		'label' => 'Radio',
		'desc' => 'An example description paragraph that appears below the label.',
	),
	array(
		'key1' => 'Value One',
		'key2' => 'Value Two'
	)
);

选择

选择字段是选择一系列选项的好方法。

$metabox->addSelect(
	array(
		'id' => 'metabox_select_field',
		'label' => 'Select',
		'desc' => 'An example description paragraph that appears below the label.',
	),
	array(
		'key1' => 'Value One',
		'key2' => 'Value Two'
	)
);

HTML

添加 HTML 标记来显示信息。

$metabox->addHtml(
	array(
		'id' => 'metabox_html_field',
		'label' => 'html',
		'html' => '<h1>Hello World</h1>',
	),
);

图片上传

使用此功能允许用户在元框内上传图片。提示:使用此功能与 repeater 动态管理相册或幻灯片中的一组照片。

$metabox->addImage(array(
	'id' => 'metabox_image_field',
	'label' => 'Image Upload',
	'desc' => 'An example description paragraph that appears below the label.'
));

WYSIWYG 编辑器

您可以使用 WYSIWYG 编辑器来方便地管理 HTML 内容。

$metabox->addEditor(array(
	'id' => 'metabox_editor_field',
	'label' => 'Editor',
	'desc' => 'An example description paragraph that appears below the label.'
));

重复

您可以将所有上述字段添加到重复器中,以存储具有动态长度的内容数组。以下是一个包含三个字段(文本、文本区域和图片上传)的重复器块示例。

注意:true 是重复器字段的第二个参数。这是必需的。另外,存储重复器块字段的变量 $metabox_repeater_block_fields[],其变量名末尾有一个对括号 []。这是必需的。

$metabox_repeater_block_fields[] = $metabox->addText(array(
	'id' => 'metabox_repeater_text_field',
	'label' => 'Photo Title'
), true);

$metabox_repeater_block_fields[] = $metabox->addTextArea(array(
	'id' => 'metabox_repeater_textarea_field',
	'label' => 'Photo Description'
), true);

$metabox_repeater_block_fields[] = $metabox->addImage(array(
	'id' => 'metabox_repeater_image_field',
	'label' => 'Upload Photo'
), true);

$metabox->addRepeaterBlock(array(
	'id' => 'metabox_repeater_block',
	'label' => 'Photo Gallery',
	'fields' => $metabox_repeater_block_fields,
	'desc' => 'Photos in a photo gallery.',
	'single_label' => 'Photo'
));