类文档

WP_Customize_Site_Icon_Control

💡 云策文档标注

概述

WP_Customize_Site_Icon_Control 是 WordPress 自定义器中用于管理站点图标的控件类,继承自 WP_Customize_Cropped_Image_Control。它主要用于 JavaScript 中的自定义功能,提供站点图标的设置界面。

关键要点

  • 继承自 WP_Customize_Cropped_Image_Control,专用于站点图标控制。
  • 控制类型为 'site_icon',用于在自定义器中处理站点图标上传和裁剪。
  • 包含 __construct 构造函数和 content_template 方法,用于初始化和渲染 JS 模板。

代码示例

class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control {
    public $type = 'site_icon';
    public function __construct( $manager, $id, $args = array() ) {
        parent::__construct( $manager, $id, $args );
        add_action( 'customize_controls_print_styles', 'wp_site_icon', 99 );
    }
    public function content_template() {
        // JS 模板代码,用于渲染站点图标控制界面
    }
}

📄 原文内容

Customize Site Icon control class.

Description

Used only for custom functionality in JavaScript.

See also

Methods

Name Description
WP_Customize_Site_Icon_Control::__construct Constructor.
WP_Customize_Site_Icon_Control::content_template Renders a JS template for the content of the site icon control.

Source

class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control {

/**
* Control type.
*
* @since 4.3.0
* @var string
*/
public $type = 'site_icon';

/**
* Constructor.
*
* @since 4.3.0
*
* @see WP_Customize_Control::__construct()
*
* @param WP_Customize_Manager $manager Customizer bootstrap instance.
* @param string $id Control ID.
* @param array $args Optional. Arguments to override class property defaults.
* See WP_Customize_Control::__construct() for information
* on accepted arguments. Default empty array.
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
add_action( 'customize_controls_print_styles', 'wp_site_icon', 99 );
}

/**
* Renders a JS template for the content of the site icon control.
*
* @since 4.5.0
*/
public function content_template() {
?>

{{ data.label }}

:root{
--site-icon-url: url( '{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}' );
}

<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="app-icon-preview" alt="{{
data.attachment.alt ?
wp.i18n.sprintf(

,
data.attachment.alt
) :
wp.i18n.sprintf(

,
data.attachment.filename
)
}}" />

<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="browser-icon-preview" alt="{{
data.attachment.alt ?
wp.i18n.sprintf(

,
data.attachment.alt
) :
wp.i18n.sprintf(

,
data.attachment.filename
)
}}" />