WooCommerce 开发：添加自定义设置选项卡

开发 WooCommerce 插件时，我们需要向 WordPress 后端添加一些自定义设置，WooCommerce 设置页面是一个好地方，我们可以向 WooCommerce 设置页面添加自定义设置选项卡。

WooCommerce 自定义设置选项卡示例代码

在下面的示例代码中，我们将向 WooCommerce 设置页面添加一个名为 Riskified 的选项卡。此选项卡有一个riskified_api_key 字段。

class Settings
{

    public function __construct()
    {
        add_filter('woocommerce_settings_tabs_array', [$this, 'add_settings_tab'], 50);

        add_action('woocommerce_settings_tabs_riskified', [$this, 'add_settings']);

        add_action('woocommerce_update_options_riskified', [$this, 'update_settings']);

    }


    function add_settings_tab($settings_tabs)
    {
        $settings_tabs[ 'riskified' ] = __('Riskified', 'woocommerce');

        return $settings_tabs;
    }


    function add_settings(): void
    {
        woocommerce_admin_fields($this->get_settings());
    }


    public function update_settings(): void
    {
        woocommerce_update_options($this->get_settings());
    }


    public function get_settings(): array
    {
        return [
            'section_title' => [
                'name' => __('Section Title', 'woocommerce-settings-tab-demo'),
                'type' => 'title',
                'desc' => '',
                'id'   => 'wc_settings_tab_riskified_section_title',
            ],
            [
                'name' => __('API Key', 'woocommerce'),
                'desc' => __('Riskified API Key', 'woocommerce'),
                'id'   => 'riskified_api_key',
                'type' => 'text',
                'css'  => 'min-width:350px;',
            ],
            'section_end'   => [
                'type' => 'sectionend',
                'id'   => 'wc_settings_tab_riskified_section_end',
            ],
        ];
    }

}

获取选项值

要查找这些设置的值，只需使用 WordPress 功能get_option。例如：

$api_key = get_option('riskified_api_key');

总结

虽然我们也可以使用一些设置框架来添加自定义设置，但是使用本文介绍的方法不需要采用设置框架，代码和界面更简单，并且与 WooCommerce 集成比较容易就好。