WordPress主题制作

  1. 主页
  2. 文档
  3. WordPress主题制作
  4. Theme Options-Customize API -Customizer
  5. Customizer实现

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

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() – 创建顶部背景图片选择器
————————————————
版权声明:本文为CSDN博主「赵蔚冬」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u012809520/article/details/89346491

这篇文章对您有用吗?

我们要如何帮助您?