WordPress自定义设置实时刷新预览与隐藏部件

2023-06-11 / 238阅

WordPress自定义设置实时刷新预览与隐藏部件

WordPress自定义设置功能非常强大。但是，当您需要实时查看自定义设置的变化时，可能会出现问题。默认情况下，WordPress自定义设置需要您保存设置后才会生效。这意味着您需要不断地保存设置、预览变化，这会浪费您很多的时间。本文将向您展示如何在WordPress自定义设置中实现实时刷新预览和隐藏选项部件。

实时刷新预览

当您对自定义设置进行更改时，您想要立即看到更改的结果。为了实现这一点，您可以使用jQuery的change事件和AJAX。

以下是一个示例代码，它将在打开WordPress自定义设置页时添加一个JS脚本，以便在选择框值更改时刷新预览：

function my_custom_settings_scripts() {
    wp_enqueue_script( 'my-custom-settings', get_stylesheet_directory_uri() . '/js/my-custom-settings.js', array( 'jquery' ), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'my_custom_settings_scripts' );

在上面的代码中，my-custom-settings.js是存储在主题目录下的自定义JS文件的名称。

在my-custom-settings.js中，您需要使用jQuery选择要刷新的元素，并使用AJAX从服务器获取新数据。

以下是一个示例代码，它将在选择框的值更改时使用AJAX从WordPress服务器获取新数据，并用新数据来更新div：

jQuery(document).ready(function($) {
    // 当更改选择框的值时
    $('.my-custom-select').on('change', function() {
        var data = {
            action: 'my_custom_settings_refresh_preview',
            value: $(this).val(),
        };

        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: data,
            success: function(response) {
                $('#my-custom-preview').html(response);
            }
        });
    });
});

在上面的代码中，my-custom-select是选择框的类名，my-custom-preview是要刷新的预览div的ID。在成功的AJAX响应中，您需要更新预览div的内容。

最后，您需要注册一个AJAX处理程序以处理请求。以下是一个示例代码，它将注册一个my_custom_settings_refresh_preview的AJAX处理程序：

function my_custom_settings_refresh_preview() {
    $value = $_POST['value'];
    echo '您选择了' . $value . '选项';
    wp_die();
}
add_action( 'wp_ajax_my_custom_settings_refresh_preview', 'my_custom_settings_refresh_preview' );
add_action( 'wp_ajax_nopriv_my_custom_settings_refresh_preview', 'my_custom_settings_refresh_preview' );

在上面的代码中，my_custom_settings_refresh_preview是AJAX处理程序的函数名称。所有要处理AJAX请求的函数都应该返回一个响应。在这个例子中，我们只是返回一个字符串。

隐藏选项部件

有时候，您可能需要根据某些条件隐藏自定义设置中的某些选项部件。这可以通过使用jQuery的hide()和show()函数来实现。

以下是一个示例代码，它将在选择框的值改变时隐藏一个文本框：

jQuery(document).ready(function($) {
    // 当更改选择框的值时
    $('.my-custom-select').on('change', function() {
        var value = $(this).val();

        if ( value == 'option_1' ) {
            $('#my-custom-textbox').hide();
        } else {
            $('#my-custom-textbox').show();
        }
    });
});

在上面的代码中，my-custom-textbox是要隐藏的文本框的ID。

结束语

在WordPress自定义设置中实现实时刷新预览和隐藏选项部件可能需要一些额外的工作，但是它可以帮助您更快地完成工作。希望这篇文章能够帮助您更好地了解如何实现这些功能。

阅读文章或者观看视频过程中有任何问题，请下方留言或者联系我Q248758228

大家谈论

我的见解

WordPress自定义设置实时刷新预览与隐藏部件