WP的customize Api知识点(一)


Updated on: September 29, 2020 in Wordpress by

Customize Api分四个部分,panel、section、setting和control, panel是setion的集合面板,setting用来写入数据库数据,control用来上传数据。

首先创建customizer.php(或自定义名字)文件,然后在functions.php文件里面引入,

include get_theme_file_path( ‘/inc/customizer.php’ );

添加钩子来注册customize, add_action(‘customize_register’,’ju_theme_customizer’);

然后创建自定义函数:function ju_theme_customizer($wp_customize) { };

在函数里添加panels:

$wp_customize->add_panel('你的panel的id’, array(
'title' => _('your panel','text-domain'),
'description'
  => esc_html__('your description','text-domain'),
'priority'
  => 30,  //越小越上、  其他不必须,都是默认选项
));

然后再添加sections, 隶属于上面的panel.

$wp_customize->add_section('你的section的id’, array(
'title' => _('your section','text-domain'),
'description'
  => esc_html__('your description','text-domain'),
'panel' => '你的panel的id',
'priority'
  => 30,  //越小越上、  其他不必须,都是默认选项
));

然后添加settings和control, control又分多种,一般text之类的都只需用默认的control就行,setting一般都用默认的即可:

$wp_customize->add_setting(
    'header_ads_set',array(
        'default'  => ''
    )
);
$wp_customize->add_control(
			'set_ft_ads',array(
				'label'  => __( 'Footer Ad', 'webagency' ),
				'description'  => __( 'Add footer text ad here', 'webagency' ),
				'section'  => __( 'sec_footer_misc', 'webagency' ),
				'type'  => 'text'
			)
		);

如果用到image上传的话,要用到image control,

$wp_customize->add_control(
	       new WP_Customize_Image_Control(
	           $wp_customize,
	           'testimonial_bgi_control',
	           array(
	               'label'      => __( 'Upload the testimonial background image', 'webagency' ),
	               'section'    => 'sec_page_mis',
	               'settings'   => 'set_testimonial_bgi'
	               
	           		)
	       		)
	   		);

image control输出的是图片的url,无法使用wp_get_attachment_image来获取不同尺寸的图片地址,这时我们需要使用WP_Customize_Media_Control来控制形式,代码如下:

$wp_customize->add_control(
		new WP_Customize_Media_Control(
	           $wp_customize,
	           'header_ads_set',
	           array(
	           	'mime_type'  => 'image',
	               'label'      => __( 'Upload the header ads image', 'udemy' ),
	               'description'  => __( 'mEDIA CONTROL of image', 'udemy' ),
	               'section'    => 'header_ads_sec',
	               
	               
	           		)
	       		)
	);

在前台用法是:echo wp_get_attachment_image(get_theme_mod(‘header_ads-set’),’pageBanner’)

其他几种control形式下次再详解。因为现在已经太晚了还有其他事情要做。