云策 WordPress 开发者社区

类文档

WP_Customize_Cropped_Image_Control

查看官方原文 ↗
💡 云策文档标注

概述

WP_Customize_Cropped_Image_Control 是 WordPress 自定义器中的一个控件类，用于处理裁剪图像的上传和设置。它继承自 WP_Customize_Image_Control，提供对图像裁剪尺寸和灵活性的控制。

关键要点

  • 继承自 WP_Customize_Image_Control，专为裁剪图像设计
  • 支持设置建议的裁剪宽度和高度，默认值为 150
  • 提供灵活宽度和高度选项，通过 flex_width 和 flex_height 属性控制
  • 包含 enqueue 方法用于加载相关脚本和样式
  • 包含 to_json 方法用于将参数传递给 JavaScript

代码示例

$wp_customizer->add_control(
    new WP_Customize_Cropped_Image_Control(
        $wp_customizer,
        'demo_image_settings',
        array(
            'label'      => __( 'Upload a File', 'Text Domain' ),
            'section'    => 'customizer section name',
            'height'=>100, // cropper Height
            'width'=>100, // Cropper Width
            'flex_width'=>true, //Flexible Width
            'flex_height'=>true, // Flexible Heiht
        )
    )
);

注意事项

  • 使用 'height' 和 'width' 参数固定裁剪尺寸
  • 设置 'flex_width' 和 'flex_height' 为 true 以实现灵活裁剪
  • 确保正确引用自定义器对象和节名称
📄 原文内容

Customize Cropped Image Control class.

Description

See also

Methods

Name Description
WP_Customize_Cropped_Image_Control::enqueue Enqueue control related scripts/styles.
WP_Customize_Cropped_Image_Control::to_json Refresh the parameters passed to the JavaScript via JSON.

Source

class WP_Customize_Cropped_Image_Control extends WP_Customize_Image_Control {

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

	/**
	 * Suggested width for cropped image.
	 *
	 * @since 4.3.0
	 * @var int
	 */
	public $width = 150;

	/**
	 * Suggested height for cropped image.
	 *
	 * @since 4.3.0
	 * @var int
	 */
	public $height = 150;

	/**
	 * Whether the width is flexible.
	 *
	 * @since 4.3.0
	 * @var bool
	 */
	public $flex_width = false;

	/**
	 * Whether the height is flexible.
	 *
	 * @since 4.3.0
	 * @var bool
	 */
	public $flex_height = false;

	/**
	 * Enqueue control related scripts/styles.
	 *
	 * @since 4.3.0
	 */
	public function enqueue() {
		wp_enqueue_script( 'customize-views' );

		parent::enqueue();
	}

	/**
	 * Refresh the parameters passed to the JavaScript via JSON.
	 *
	 * @since 4.3.0
	 *
	 * @see WP_Customize_Control::to_json()
	 */
	public function to_json() {
		parent::to_json();

		$this->json['width']       = absint( $this->width );
		$this->json['height']      = absint( $this->height );
		$this->json['flex_width']  = absint( $this->flex_width );
		$this->json['flex_height'] = absint( $this->flex_height );
	}
}

View all references View on Trac View on GitHub

Uses Description
WP_Customize_Image_Controlwp-includes/customize/class-wp-customize-image-control.php

Customize Image Control class.
Used by Description
WP_Customize_Site_Icon_Controlwp-includes/customize/class-wp-customize-site-icon-control.php

Customize Site Icon control class.

Changelog

Version Description
4.3.0 Introduced.

User Contributed Notes

  1. Skip to note 2 content


    salam91


    You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

    You can Fixed the Height and width area by using 'height'=>100 and 'width'=>100 respectively. Use flex_width=> true to get flexible width in cropper. you can also use flex_height=>true to get flexible height in cropper. A details examples is shown bellow

    $wp_customizer->add_control(
		new WP_Customize_Cropped_Image_Control(
			$wp_customizer,
			'demo_image_settings',
			array(
				'label'      => __( 'Upload a File', 'Text Domain' ),
				'section'    => 'customizer section name',
				'height'=>100, // cropper Height
				'width'=>100, // Cropper Width
				'flex_width'=>true, //Flexible Width
				'flex_height'=>true, // Flexible Heiht
			)
		)
	);