README

WP Form UI是一个强大的表单库，旨在简化WordPress插件和主题开发中的表单渲染。该库提供了一种简单直接的方式来创建和管理表单，同时确保灵活性和可扩展性。

安装

您可以使用Composer或从GitHub克隆存储库来安装WP Form UI。

使用Composer

$ composer require shazzad/wp-form-ui

使用Git克隆

$ git clone https://github.com/shazzad/wp-form-ui

基本用法

按照以下步骤将WP Form UI集成到您的插件或主题中

1. 定义相对于包路径的基URL

在您的插件或主题中，添加以下代码

use Shazzad\WpFormUi;

WpFormUi\Provider::setup();

2. 加载CSS & JS

要加载所需的CSS和JS文件，请添加以下代码

use Shazzad\WpFormUi;

add_action('wp_enqueue_scripts', function(){
    WpFormUi\Provider::enqueue_form_scripts();
});

3. 渲染表单

要渲染表单，您需要定义表单字段、它们的值以及其他设置。以下是一个示例

use Shazzad\WpFormUi;

// Field values
$values = [
    'id' => 1234
    'select-field' => 'option-1',
    'text-field' => 'some text',
    'repeater-field' => [
        [
            'type' => 'type-1',
            'name' => 'name-1',
            'address' => 'address-1'
        ],
        [
            'type' => 'type-2',
            'name' => 'name-2',
            'address' => 'address-2'
        ]
    ]
];

// Form fields
$fields = [
    [
        'priority'        => 10,
        'key'             => 'id',
        'name'            => 'id',
        'type'            => 'hidden'
    ],
    [
        'priority'        => 12,
        'key'             => 'select-field',
        'name'            => 'select-field',
        'type'            => 'select',
        'label'           => __('Select field'),
        'choices'         => []
    ],
    [
        'priority'        => 13,
        'key'             => 'text-field',
        'name'            => 'text-field',
        'type'            => 'text',
        'label'           => __('Text field')
    ],
    [
        'priority'        => 14,
        'key'             => 'repeater-field',
        'name'            => 'repeater-field',
        'type'            => 'repeater',
        'label'           => __('Repeater field'),
        'fields'          => [
            [
                'key'            => 'type',
                'name'           => 'type',
                'type'           => 'select',
                'label'          => __('Type'),
                'choices'        => []
            ],
            [
                'key'            => 'name',
                'name'           => 'name',
                'type'           => 'text',
                'label'          => __('Name'),
            ],
            [
                'key'            => 'address',
                'name'           => 'address',
                'type'           => 'textarea',
                'label'          => __('Address'),
            ]
        ],
        'values'          => ! empty($values['repeater-field']) ? $values['repeater-field'] : []
    ]
];

// Form settings
$settings     = [
    'ajax'            => true, // Set to true for AJAX form submission
    'action'          => admin_url('admin-ajax.php?action=do_something'),
    'id'              => 'my-form',
    'button_text'     => __('Update'),
    'loading_text'    => __('Updating'),
    'success_text'    => __('Form saved'),
];

$form = new WpFormUi\Form\Form();
$form->set_settings($settings);
$form->set_values($values);
$form->set_fields($fields);
$form->render();

4. 处理表单提交

add_action('wp_ajax_do_something', function(){
    $data = stripslashes_deep($_POST);

    // Process the form data and update settings, e.g., update_option('my_settings', $data);

    wp_send_json([
        'success' => true,
        'message' => __('Form saved')
    ]);
});

// Handle submission for non-logged-in users
add_action('wp_ajax_nopriv_do_something', function(){
    // ... same as above
});

就这样！您现在已成功将WP Form UI集成到WordPress插件或主题中。根据您的需求自定义表单字段和设置。

贡献

我们欢迎社区的贡献！如果您发现了一个错误，有功能请求或想以其他方式做出贡献，请随时打开一个问题或提交一个pull request。

许可证

本项目使用MIT许可证 - 请参阅LICENSE文件以获取详细信息。