WP_Customize_Header_Image_Control
概述
WP_Customize_Header_Image_Control 是 WordPress 自定义器中用于管理头部图像的自定义控件类，继承自 WP_Customize_Image_Control。它提供了上传、选择和预览头部图像的功能。
关键要点
- 继承自 WP_Customize_Image_Control，专用于头部图像管理。
- 包含构造函数、enqueue、prepare_control、print_header_image_template、render_content 等方法。
- 支持上传和默认头部图像的处理，通过 JavaScript 本地化传递数据。
- 控件类型为 'header'，设置包括 header_image 和 header_image_data。
代码示例
public function __construct( $manager ) {
parent::__construct(
$manager,
'header_image',
array(
'label' => __( 'Header Image' ),
'settings' => array(
'default' => 'header_image',
'data' => 'header_image_data',
),
'section' => 'header_image',
'removed' => 'remove-header',
'get_url' => 'get_header_image',
)
);
}Customize Header Image Control class.
Description
See also
Methods
Source
class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {/**
* Customize control type.
*
* @since 4.2.0
* @var string
*/
public $type = 'header';/**
* Uploaded header images.
*
* @since 3.9.0
* @var string
*/
public $uploaded_headers;/**
* Default header images.
*
* @since 3.9.0
* @var string
*/
public $default_headers;/**
* Constructor.
*
* @since 3.4.0
*
* @param WP_Customize_Manager $manager Customizer bootstrap instance.
*/
public function __construct( $manager ) {
parent::__construct(
$manager,
'header_image',
array(
'label' => __( 'Header Image' ),
'settings' => array(
'default' => 'header_image',
'data' => 'header_image_data',
),
'section' => 'header_image',
'removed' => 'remove-header',
'get_url' => 'get_header_image',
)
);
}/**
*/
public function enqueue() {
wp_enqueue_media();
wp_enqueue_script( 'customize-views' );$this->prepare_control();
wp_localize_script(
'customize-views',
'_wpCustomizeHeader',
array(
'data' => array(
'width' => absint( get_theme_support( 'custom-header', 'width' ) ),
'height' => absint( get_theme_support( 'custom-header', 'height' ) ),
'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
'currentImgSrc' => $this->get_current_image_src(),
),
'nonces' => array(
'add' => wp_create_nonce( 'header-add' ),
'remove' => wp_create_nonce( 'header-remove' ),
),
'uploads' => $this->uploaded_headers,
'defaults' => $this->default_headers,
)
);parent::enqueue();
}/**
* @global Custom_Image_Header $custom_image_header
*/
public function prepare_control() {
global $custom_image_header;
if ( empty( $custom_image_header ) ) {
return;
}add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) );
// Process default headers and uploaded headers.
$custom_image_header->process_default_headers();
$this->default_headers = $custom_image_header->get_default_header_images();
$this->uploaded_headers = $custom_image_header->get_uploaded_header_images();
}/**
*/
public function print_header_image_template() {
?>
<script type="text/template" id="tmpl-header-choice">
<# if (data.random) { #>
<button type="button" class="button display-options random">
<span class="dashicons dashicons-randomize dice"></span>
<# if ( data.type === 'uploaded' ) { #>
<?php _e( 'Randomize uploaded headers' ); ?>
<# } else if ( data.type === 'default' ) { #>
<?php _e( 'Randomize suggested headers' ); ?>
<# } #>
</button><# } else { #>
<button type="button" class="choice thumbnail"
data-customize-image-value="{{data.header.url}}"
data-customize-header-image-data="{{JSON.stringify(data.header)}}">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Set image' );
?>
</span>
<img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />
</button><# if ( data.type === 'uploaded' ) { #>
<button type="button" class="dashicons dashicons-no close">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Remove image' );
?>
</span>
</button>
<# } #><# } #>
</script><script type="text/template" id="tmpl-header-current">
<# if (data.choice) { #>
<# if (data.random) { #><div class="placeholder">
<span class="dashicons dashicons-randomize dice"></span>
<# if ( data.type === 'uploaded' ) { #>
<?php _e( 'Randomizing uploaded headers' ); ?>
<# } else if ( data.type === 'default' ) { #>
<?php _e( 'Randomizing suggested headers' ); ?>
<# } #>
</div><# } else { #>
<img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />
<# } #>
<# } #>
</script>
value();
if ( isset( $this->get_url ) ) {
$src = call_user_func( $this->get_url, $src );
return $src;
}
}/**
*/
public function render_content() {
$visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
$width = absint( get_theme_support( 'custom-header', 'width' ) );
$height = absint( get_theme_support( 'custom-header', 'height' ) );
?>
<div class="customize-control-content">
' . $this->label . '</span>';
}
?>
<div class="customize-control-notifications-container"></div>
<p class="customizer-section-intro customize-control-description">
%s × %s</strong>', $width, $height )
);
} elseif ( $width ) {
printf(
/* translators: %s: Header width in pixels. */
__( 'Click “Add Image” to upload an image file from your computer. Your theme works best with an image with a header width of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ),
sprintf( '<strong>%s</strong>', $width )
);
} else {
printf(
/* translators: %s: Header height in pixels. */
__( 'Click “Add Image” to upload an image file from your computer. Your theme works best with an image with a header height of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ),
sprintf( '<strong>%s</strong>', $height )
);
}
?>
</p>
<div class="current">
<label for="header_image-button">
<span class="customize-control-title"></span>
</label>
<div class="container">
</div>
</div>
<div class="actions"><button type="button"<?php echo $visibility; ?> class="button remove" aria-label=""></button>
<button type="button" class="button new <?php echo ! $this->get_current_image_src() ? '' : 'customize-header-image-not-selected'; ?>" id="header_image-button" aria-label="<?php esc_attr_e( 'Add Header Image' ); ?>"></button></div>
<div class="choices">
<span class="customize-control-title header-previously-uploaded"></span>
<div class="uploaded">
<div class="list">
</div>
</div>
<span class="customize-control-title header-default"></span>
<div class="default">
<div class="list">
</div>
</div>
</div>
</div>
</pre><p class="wporg-dot-link-list"><a href="https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-header-image-control.php/">View all references</a> <a href="https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/customize/class-wp-customize-header-image-control.php#L17">View on Trac</a> <a href="https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/customize/class-wp-customize-header-image-control.php#L17-L265">View on GitHub</a></p></section><section class="wp-block-wporg-code-reference-related" data-nosnippet="true"><h2 id="related" class="is-toc-heading wp-block-heading has-heading-5-font-size" tabindex="-1" ><a href="#related">Related</a></h2> <section style="margin-top:var(--wp--preset--spacing--20)" class="wp-block-wporg-code-table" id="uses"><figure class="wp-block-table "><table><thead><tr><th scope="col">Uses</th><th scope="col">Description</th></tr></thead><tbody><tr class=""><td><a href="https://developer.wordpress.org/reference/classes/wp_customize_image_control/">WP_Customize_Image_Control</a><code>wp-includes/customize/class-wp-customize-image-control.php
Customize Image Control class.
Changelog
| Version | Description |
|---|---|
| 3.4.0 | Introduced. |