需要帮助将按钮链接到 wordpress 主题定制器中的功能

Question

我为主题定制器创建了一个自定义控件，它是一个简单的按钮和标签。我将把它用作主题重置按钮，将主题 mod 设置清除为其原始状态。现在我已经添加了控件并让它显示在定制器上，我不确定应该在哪里添加代码来重置设置。

到目前为止，我只为 CSS 和文本更改创建了定制器设置。要删除设置，我将使用 remove theme mods function.

 <?php remove_theme_mods() ?>

所以我的问题是如何使用这个按钮来执行上面看到的 remove_mods 函数？该函数的文档非常少。

如果有其他方法可以将主题 mod 设置重置为默认值并且这不是正确的方法，请加入。

这是我创建自定义按钮的代码。

function newtheme_customize_reset_control($wp_customize) {
    /**
     * Reset Control
     *
     */
    class newtheme_Customize_reset_Control extends WP_Customize_Control {
        public $type = 'button';

        public function render_content() {
    ?>
        <label>
                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                                <div>
                                    <a href="#" class="button-secondary upload"><?php _e( 'Reset Settings' ); ?></a>

                            </div>
                    </label>
    <?php
        }
    } 
}
add_action( 'customize_register', 'newtheme_customize_reset_control', 1, 1 );

Answer 1

在主题定制器中，您可以将自定义 javascript 注册到 wordpress 主题定制器

add_action('customize_preview_init', 'your_live_preview_function');

public static function your_live_preview_function() {
        wp_enqueue_script(
                'your-theme_customizer', //Give the script an ID
                get_template_directory_uri() . '/js/your-customizer-javascript-file.js', //Define it's JS file
                array('jquery', 'customize-preview'), //Define dependencies
                rand(1, 1000), //Define a version (optional) (but I use it for development as random so don't have to worry about cache etc.
                true //Specify whether to put in footer (leave this true)
        );

}

在你的javascript文件中你可以做这样的事情

( function( $ ) {
wp.customize(
        'your_reset_button_control_id',
        function( value ) {
            value.bind(
                function( to ) {
                    jQuery.post( ajax_url, 
                    { 
                        action: 'your_ajax_action_for_calling_reset',
                        reset_value: to
                    },
                    function( response ) {
                        jQuery( '.reset-info' ).html( response );
                    }
                    );
                }
                );
        }
        );
} )( jQuery );

在 ajax 中你可以做这样的事情

add_action('wp_ajax_your_ajax_action_for_calling_reset', 'your_ajax_action_for_calling_reset_callback_function');

function your_ajax_action_for_calling_reset_callback_function(){
$reset_value = esc_attr($_POST['reset_value']);

if($reset_value){
remove_theme_mods() ;
}
}

Haaaaaa 希望对您有所帮助。

Answer 2

使用remove_theme_mods 在定制器中显示默认值的问题是

• 定制器是一个预览，您可以在不保存的情况下退出，
• 单独的 theme_mod 被过滤，但不是整个 theme_mod 数组
• theme_mods 包括菜单和小部件。

我还想要一个重置按钮，但我选择创建一个预设控件，其中一个预设是“默认值”。这种方式使用了select，所以按钮不工作没有问题（因为bind是用来改变值的，按钮不会改变它们的值）。

诀窍是使用 ajax 检索所选预设，然后循环遍历 javascript 中的值，将它们分配给设置，以便这些更改将触发预览的刷新。我的代码包含过滤器，以便子主题可以添加更多选项和预设。预设可以是可用选项的子集。

这里是 用于 Preset 控件的 PHP（只是一个普通的 select，但没有设置控件）：

$wp_customize->add_control( 'option_presets', array(
    'label'    => __( 'Use preset theme options', 'mytheme' ),
    'description' => __( 'Theme options will be set to the preset values.', 'mytheme' ),
    'section'  => 'mytheme_section',
    'settings' => array(),
    'type'     => 'select',
    'capability' => 'edit_theme_options',
    'choices'  => mytheme_option_presets_choices(),
) );

这里是其余的 PHP 函数。

/**
 * Supply list of choices for option presets.
 */
function mytheme_option_presets_choices() {
    return apply_filters( 'mytheme_option_presets_choices', array(
        'none' => __( 'Select preset', 'mytheme' ),
        'defaults' => __( 'Defaults', 'mytheme' ),
        'dark' => __( 'Dark', 'mytheme' ),
    ) );
}

/**
 * Sanitize an option preset choice.
 */
function mytheme_sanitize_option_presets_choice( $input ) {
    $valid = mytheme_option_presets_choices();
    return array_key_exists( $input, $valid ) ? $input : 'none';
}

/**
 * Get the preset values for the chosen option preset.
 */
function mytheme_option_preset( $which ) {
    $values = array();
    if ( 'defaults' === $which ) {
        $values = mytheme_default_values();
    }
    if ( 'dark' === $which ) {
        $values = array(
            'body_textcolor' => '#f9f7f7',
            'background_color' => '#444244',
            'header_textcolor' => '#bf9a07',
            'area_classes' => array(
                'sidebar' => 'semi-black',
                'widgets' => 'box',
                ),
        );
    }
    return apply_filters( 'mytheme_option_preset', $values, $which );
}

/**
 * Add a nonce for Customizer for option presets.
 */
function mytheme_refresh_nonces( $nonces ) {
    $nonces['mytheme-customize-presets'] = wp_create_nonce( 'mytheme-customize-presets' );
    return $nonces;
}
add_filter( 'customize_refresh_nonces', 'mytheme_refresh_nonces' );

/**
 * Ajax handler for supplying option preset values.
 */
function mytheme_ajax_option_preset_values() {
    check_ajax_referer( 'mytheme-customize-presets', 'option_presets_nonce' );
    if ( ! current_user_can( 'edit_theme_options' ) ) {
        wp_die( -1 );
    }

    if ( empty( $_POST['option_preset'] ) ) {
        wp_send_json_error( 'mytheme_missing_preset_parameter' );
    }
    $preset = sanitize_text_field( wp_unslash( $_POST['option_preset'] ) );
    $values = mytheme_option_preset( $preset );
    if ( empty( $values ) ) {
        wp_send_json_error( array( 'message' => __( 'No preset found.', 'mytheme' ) ) );
    }
    else {   // Flatten the array.
        foreach ($values as $key => $avalue) {
            if ( is_array( $avalue ) ) {
                unset( $values[$key] );
                foreach ($avalue as $subkey => $subvalue) {
                    $values[$key . '[' . $subkey . ']'] = $subvalue;
                }
            }
        }
        wp_send_json_success( array( 'values' => $values ) );
    }
}
add_action( 'wp_ajax_mytheme_option_preset', 'mytheme_ajax_option_preset_values' );

然后只需一点点 Javascript 即可发出 ajax 请求。这在'customize_controls_enqueue_scripts' 操作中排队。 （我忽略了错误消息的显示。）

wp.customize.control( 'option_presets', function( control ) {
    control.element = new wp.customize.Element( control.container.find( 'select' ) );
    control.element.bind( function( preset ) {
        var request = wp.ajax.post( 'mytheme_option_preset', {
            option_presets_nonce: wp.customize.settings.nonce['mytheme-customize-presets'],
            wp_customize: 'on',
            customize_theme: wp.customize.settings.theme.stylesheet,
            option_preset: preset
        } );
        request.done( function( response ) {
            _.each( response.values, function( value, id ) {
                var setting = wp.customize( id );
                if ( setting ) {
                    setting.set( value );
                }
            } );
        } );
    } );
} );