WP添加custimze时候如何设置settings及时预览

wp的customize api十分强大。

先了解下如何设置customize api.

先创建_themename_customize_register函数,添加$wp_customize的object.

function _themename_customize_register($wp_customize) { }

首先像metabox和options 一样,先要添加settings到数据库。

$wp_customize->add_setting(‘_themename_site_info’,array(
‘default’ => ”,
‘sanitize_callback’ => ‘_themename_sanitize_info’,
‘transport’ => “postMessage”
));

其次,要有一个写入的载体,就跟meta field 一样, 要添加name名字为字段名称的input. customize api 里面要添加控制输入的input ,有专门的函数是add_control , 跟settings对应。

$wp_customize->add_control(‘_themename_site_info’,array(
‘type’ => ‘text’,
‘label’ => ‘Site Info’,
‘section’ => ‘_theme_footer_section’

));

如果control没有对应的section, 需添加wp已经存在的section .

默认section参考链接:https://developer.wordpress.org/themes/customize-api/customizer-objects/

add_section() 函数写法:

$wp_customize->add_section(‘_theme_footer_section’,array(
‘title’ => ‘Footer Section Option’,
‘description’ => ‘You can change description here’,
‘priority’ => 30,

));

当添加setting的时候, 如果需要对输入的字段进行过滤,可以添加’sanitize_callback’ 字段为召回函数。

如:’sanitize_callback’ => ‘_themename_sanitize_info’,

召回函数跟options和meta fields的写法都一样,

都过滤input然后return input.

function _themename_sanitize_info($input) {
$allowed = array(‘a’ => array(
‘href’ => array(),
‘title’ => array()
));
return wp_kses( $input, $allowed );

}

如何设置customize 的 settings 编辑时自动刷新?

首先在settings 里面要设置 transport 。

‘transport’ => “postMessage”

如下:

$wp_customize->add_setting(‘_themename_site_info’,array(
‘default’ => ”,
‘sanitize_callback’ => ‘_themename_sanitize_info’,
‘transport’ => “postMessage”
));

设置好之后,就激活了wordpress自带的javascript api. 也就是wp的obeject .

参考链接:https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/

jQuery(document).ready(($) => { console.log(wp) }

然后通过wp对象里面的customize函数进行写入,value是control的input的value的值。通过选取settings的DOM的html来进行写入实现数据的预览:

wp.customize(‘_themename_site_info’,(value) => {
value.bind((to) => {
$(‘.site-info__text’).html(to);
})
});

然后通过php $wp_customize对象的selective_refresh的add_partial方法,来设置选择的setting的部分刷新:

$wp_customize->selective_refresh->add_partial(‘blogname’,array(
//’settings’ => array(‘blogname’), //if there are multiple settings use setting choice if not add setting name to the first ”
‘selector’ => ‘.c-header__blogname’, //the html selector css name or id name with prefix
‘container_inclusive’ => false, //means when we load the partial do we want to replace the content side of the a tag or the whole a tag. 就是要么改变a标签里面的内容或者改变整个a
‘render_callback’ => function() {
bloginfo(‘name’); // write a php function that return what we need to return here so this place is bloginfo(‘name ‘)这个跟数据库进行互动 没有这个无法写入
},
));

add_partial方法首先第一个是partial的名称,也就是可以直接在左侧出现铅笔形状可以点击修改的部分的id, 如果不添加这个就无法出现铅笔形状,无法在左侧页面进行点击修改。第二个是参数数组,首先要选择修改的是什么settings, 跟$wp_customize->add_settings里面相对应。 然后是selector, 就是DOM的选择器,选择这个DOM里面的内容进行修改或者预览,第三个就是是不是只改变内容还是整个选择的DOM一起修改。第四个是回调函数, 可以是匿名函数或者函数, 里面执行的就是要修改部分的内容,比方说你的内容是 bloginfo(‘name’) , 那回调函数里面执行的就是这个。

如果要添加小工具时候的自动刷新,要添加支持:

add_theme_support(‘customize-selective-refresh-widgets’);

添加这个时候只要customize widget时候都会出现铅笔点击就可以修改并单独部分实时刷新

Share :