需要帮助链接一个按钮到wordpress主题自定义器的功能
Need help linking a button to a function in wordpress theme customizer
我已经为主题定制器创建了一个自定义控件,它是一个简单的按钮和标签。我将使用它作为一个主题重置按钮,将主题mod设置清除到原来的状态。现在我已经添加了控件并使其显示在定制器上,我不确定应该在哪里添加代码来重置设置。
到目前为止,我只为css和文本更改创建了自定义设置。要删除设置,我将使用删除主题模块功能。 <?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 );
在主题定制器中你可以注册你的自定义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希望有帮助。
使用remove_theme_mods
在Customizer中显示默认值的问题是
- Customizer是一个预览,你可以退出而不需要保存,
- 单独的theme_mod被过滤,但不是整个theme_mod数组
- theme_mods包括菜单和部件。
我也想要一个重置按钮,但我选择创建一个预置控件,其中一个预置是"defaults"。这种方式使用select
,所以没有问题的按钮不工作(因为bind
是值的变化和按钮不改变他们的值)。
技巧是使用ajax检索所选的预设,然后在javascript中循环这些值,将它们分配给设置,以便这些更改将触发预览的刷新。我的代码包括过滤器,以便子主题可以添加更多选项和预设。预设可以是可用选项的子集。
这里是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函数的部分。 然后是一小段Javascript来发出ajax请求。这在/**
* 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' );
'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 );
}
} );
} );
} );
} );
- 如何使用URL筛选wordpress自定义帖子类型
- Wordpress自定义元框多图像上传
- 头中的wordpress自定义js
- 在wordpress自定义主题中集成javascript文件
- Wordpress自定义程序具有页面编辑功能
- 我如何理解WordPress自定义函数
- 如何在javascript映射中使用wordpress自定义字段变量
- WordPress自定义类别页面未加载javasctipt文件并给出404错误
- Wordpress自定义查询分页和Ajax
- Wordpress-自定义页面包括第二个导致函数文件问题的自定义页面
- 在Javascript中使用Wordpress自定义程序
- Wordpress自定义模板中的featherlight.js
- WordPress自定义搜索按钮
- Wordpress自定义字段-Javascript中的CSS
- & # 39;智能# 39;Wordpress自定义帖子类型的历史返回按钮
- 如何从WordPress自定义字段获得坐标来嵌入谷歌地图
- Wordpress自定义字段内容作为弹出
- Wordpress自定义字段单选按钮无法选中
- 如何在我的Algolia搜索页面结果的摘录中显示我的Wordpress自定义字段属性
- Wordpress自定义进度条