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() – 创建顶部背景图片选择器

 

上一篇:adoquery.refresh和adoquery.query的区别


下一篇:Python+Selenium练习篇之10-刷新当前页面