Twenty Nineteen（2019主题）: Customizer实现（草稿）
作者：互联网
概述：
Customize API (Customizer)
类：WP_Customize_Manager
对象：$wp_customize
四个Customizer objects：
Panels：面板
Sections：部件
Settings：设置项
Controls：控件
functions.php：
/** * Customizer additions. */ require get_template_directory() . '/inc/customizer.php';
inc/customizer.php
说明：
核心类：WP_Customize_Manager
核心对象：Theme Customizer object---$wp_customize
在customizer.php文件中有如下几个函数：
function twentynineteen_customize_register( $wp_customize ) add_action( 'customize_register', 'twentynineteen_customize_register' ); //功能： function twentynineteen_customize_partial_blogname()
function twentynineteen_customize_partial_blogdescription() function twentynineteen_customize_preview_js() add_action( 'customize_preview_init', 'twentynineteen_customize_preview_js' ); function twentynineteen_panels_js() add_action( 'customize_controls_enqueue_scripts', 'twentynineteen_panels_js' ); function twentynineteen_sanitize_color_option( $choice )
//净化
用到三个钩子：
customize_register：
customize_preview_init：
customize_controls_enqueue_scripts：
WordPress默认的Section
title_tagline – Site Title & Tagline （网站标题和描述）
colors – Colors（颜色）
header_image – Header Image （顶部图片）
background_image – Background Image （背景图片）
nav – Navigation （导航菜单）
static_front_page – Static Front Page （静态首页）
注意几个id和type
Setting ID
setting->type：
theme_mod（默认）和options
关于setting的‘transport’：
refresh：
postMessage：JS allows a custom JavaScript to handle live changes
关于selective_refresh
/** * Methods and properties dealing with selective refresh in the Customizer preview. * * @since 4.5.0 * @var WP_Customize_Selective_Refresh */ public $selective_refresh;
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-selective-refresh.php' ); $this->selective_refresh = new WP_Customize_Selective_Refresh( $this );
$selective_refresh 是类“WP_Customize_Selective_Refresh”对象，包括一个重要的方法：add_partial
https://developer.wordpress.org/reference/classes/WP_Customize_Selective_Refresh/
Core Customizer class for implementing selective refresh. 核心Customizer类，执行
参考：
wordpress开发Customizer UI改进用户体验的工具
http://www.wazhuti.com/1827.html
$this->selective_refresh->add_partial( 'custom_logo', array( 'settings' => array( 'custom_logo' ), 'selector' => '.custom-logo-link', 'render_callback' => array( $this, '_render_custom_logo_partial' ), 'container_inclusive' => true, ) );
$this->selective_refresh->add_partial(
'custom_header',
array(
'selector' => '#wp-custom-header',
'render_callback' => 'the_custom_header_markup',
'settings' => array( 'header_video', 'external_header_video', 'header_image' ), // The image is used as a video fallback here.
'container_inclusive' => true,
)
);
add_partial
/**
* Retrieves the registered partials.
*
* @since 4.5.0
*
* @return array Partials.
*/
public function partials() {
return $this->partials;
}
/**
* Adds a partial.
*
* @since 4.5.0
*
* @param WP_Customize_Partial|string $id Customize Partial object, or Panel ID.
* @param array $args {
* Optional. Array of properties for the new Partials object. Default empty array.
*
* @type string $type Type of the partial to be created.
* @type string $selector The jQuery selector to find the container element for the partial, that is, a partial's placement.
* @type array $settings IDs for settings tied to the partial.
* @type string $primary_setting The ID for the setting that this partial is primarily responsible for
* rendering. If not supplied, it will default to the ID of the first setting.
* @type string $capability Capability required to edit this partial.
* Normally this is empty and the capability is derived from the capabilities
* of the associated `$settings`.
* @type callable $render_callback Render callback.
* Callback is called with one argument, the instance of WP_Customize_Partial.
* The callback can either echo the partial or return the partial as a string,
* or return false if error.
* @type bool $container_inclusive Whether the container element is included in the partial, or if only
* the contents are rendered.
* @type bool $fallback_refresh Whether to refresh the entire preview in case a partial cannot be refreshed.
* A partial render is considered a failure if the render_callback returns
* false.
* }
* @return WP_Customize_Partial The instance of the panel that was added.
*/
public function add_partial( $id, $args = array() ) {
if ( $id instanceof WP_Customize_Partial ) {
$partial = $id;
} else {
$class = 'WP_Customize_Partial';
/** This filter is documented in wp-includes/customize/class-wp-customize-selective-refresh.php */
$args = apply_filters( 'customize_dynamic_partial_args', $args, $id );
/** This filter is documented in wp-includes/customize/class-wp-customize-selective-refresh.php */
$class = apply_filters( 'customize_dynamic_partial_class', $class, $id, $args );
$partial = new $class( $this, $id, $args );
}
$this->partials[ $partial->id ] = $partial;
return $partial;
}
add_setting( WP_Customize_Setting|string $id, array $args = array() )
Controller Class
WP_Customize_Control() – 创建一个允许用户输入纯文本的控制器，也是下面要介绍的class的parent class
WP_Customize_Color_Control() – 创建一个允许用户从色轮中选择颜色的颜色选择器
WP_Customize_Upload_Control() – 创建允许用户上传媒体文件的控制器
WP_Customize_Image_Control() – 创建上传图片或从媒体库中选择图片的控制器
WP_Customize_Background_Image_Control() – 创建背景图片选择器
WP_Customize_Header_Image_Control() – 创建顶部背景图片选择器
标签：partial,customize,Twenty,refresh,Customize,2019,WP,array,Customizer 来源： https://www.cnblogs.com/zhaoweidong/p/10484233.html