云策 WordPress 开发者社区

类文档

WP_Widget_Media_Gallery

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

概述

WP_Widget_Media_Gallery 是 WordPress 核心类，用于实现一个图库小部件，继承自 WP_Widget_Media。它提供了在前端显示图片画廊的功能，并包含管理脚本加载、实例属性定义和媒体渲染等方法。

关键要点

  • 继承自 WP_Widget_Media，专门用于处理图片画廊小部件。
  • 构造函数定义了小部件的基本属性，如 ID、标题和 MIME 类型，并设置了本地化字符串。
  • get_instance_schema 方法返回小部件实例属性的模式，包括标题、图片 ID、列数、尺寸、链接类型和随机排序等。
  • render_media 方法负责在前端渲染画廊，通过调用 gallery_shortcode 实现。
  • enqueue_admin_scripts 方法加载媒体管理器和媒体小部件所需的脚本，并注入模式数据。
  • render_control_template_scripts 方法渲染表单模板脚本。

代码示例

public function __construct() {
    parent::__construct(
        'media_gallery',
        __( 'Gallery' ),
        array(
            'description' => __( 'Displays an image gallery.' ),
            'mime_type'   => 'image',
        )
    );

    $this->l10n = array_merge(
        $this->l10n,
        array(
            'no_media_selected' => __( 'No images selected' ),
            'add_media'         => _x( 'Add Images', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),
            'replace_media'     => '',
            'edit_media'        => _x( 'Edit Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),
        )
    );
}

注意事项

  • 该类自 WordPress 4.9.0 版本引入，使用时需确保版本兼容性。
  • get_instance_schema 方法中的属性模式可通过 filter 进行自定义，例如使用 widget_media_gallery_instance_schema。
  • render_media 方法依赖于 gallery_shortcode 函数来生成画廊输出，确保该函数可用。
  • enqueue_admin_scripts 方法中使用了 wp.mediaWidgets 对象，需确保相关脚本已正确加载。
📄 原文内容

Core class that implements a gallery widget.

Description

See also

Methods

Name Description
WP_Widget_Media_Gallery::__construct Constructor.
WP_Widget_Media_Gallery::enqueue_admin_scripts Loads the required media files for the media manager and scripts for media widgets.
WP_Widget_Media_Gallery::get_instance_schema Get schema for properties of a widget instance (item).
WP_Widget_Media_Gallery::has_content Whether the widget has content to show.
WP_Widget_Media_Gallery::render_control_template_scripts Render form template scripts.
WP_Widget_Media_Gallery::render_media Render the media on the frontend.

Source

class WP_Widget_Media_Gallery extends WP_Widget_Media {


	/**

	 * Constructor.

	 *

	 * @since 4.9.0

	 */

	public function __construct() {

		parent::__construct(

			'media_gallery',

			__( 'Gallery' ),

			array(

				'description' => __( 'Displays an image gallery.' ),

				'mime_type'   => 'image',

			)

		);


		$this->l10n = array_merge(

			$this->l10n,

			array(

				'no_media_selected' => __( 'No images selected' ),

				'add_media'         => _x( 'Add Images', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),

				'replace_media'     => '',

				'edit_media'        => _x( 'Edit Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ),

			)

		);

	}


	/**

	 * Get schema for properties of a widget instance (item).

	 *

	 * @since 4.9.0

	 *

	 * @see WP_REST_Controller::get_item_schema()

	 * @see WP_REST_Controller::get_additional_fields()

	 * @link https://core.trac.wordpress.org/ticket/35574

	 *

	 * @return array Schema for properties.

	 */

	public function get_instance_schema() {

		$schema = array(

			'title'          => array(

				'type'                  => 'string',

				'default'               => '',

				'sanitize_callback'     => 'sanitize_text_field',

				'description'           => __( 'Title for the widget' ),

				'should_preview_update' => false,

			),

			'ids'            => array(

				'type'              => 'array',

				'items'             => array(

					'type' => 'integer',

				),

				'default'           => array(),

				'sanitize_callback' => 'wp_parse_id_list',

			),

			'columns'        => array(

				'type'    => 'integer',

				'default' => 3,

				'minimum' => 1,

				'maximum' => 9,

			),

			'size'           => array(

				'type'    => 'string',

				'enum'    => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ),

				'default' => 'thumbnail',

			),

			'link_type'      => array(

				'type'                  => 'string',

				'enum'                  => array( 'post', 'file', 'none' ),

				'default'               => 'post',

				'media_prop'            => 'link',

				'should_preview_update' => false,

			),

			'orderby_random' => array(

				'type'                  => 'boolean',

				'default'               => false,

				'media_prop'            => '_orderbyRandom',

				'should_preview_update' => false,

			),

		);


		/** This filter is documented in wp-includes/widgets/class-wp-widget-media.php */

		$schema = apply_filters( "widget_{$this->id_base}_instance_schema", $schema, $this );


		return $schema;

	}


	/**

	 * Render the media on the frontend.

	 *

	 * @since 4.9.0

	 *

	 * @param array $instance Widget instance props.

	 */

	public function render_media( $instance ) {

		$instance = array_merge( wp_list_pluck( $this->get_instance_schema(), 'default' ), $instance );


		$shortcode_atts = array_merge(

			$instance,

			array(

				'link' => $instance['link_type'],

			)

		);


		// @codeCoverageIgnoreStart

		if ( $instance['orderby_random'] ) {

			$shortcode_atts['orderby'] = 'rand';

		}


		// @codeCoverageIgnoreEnd

		echo gallery_shortcode( $shortcode_atts );

	}


	/**

	 * Loads the required media files for the media manager and scripts for media widgets.

	 *

	 * @since 4.9.0

	 */

	public function enqueue_admin_scripts() {

		parent::enqueue_admin_scripts();


		$handle = 'media-gallery-widget';

		wp_enqueue_script( $handle );


		$exported_schema = array();

		foreach ( $this->get_instance_schema() as $field => $field_schema ) {

			$exported_schema[ $field ] = wp_array_slice_assoc( $field_schema, array( 'type', 'default', 'enum', 'minimum', 'format', 'media_prop', 'should_preview_update', 'items' ) );

		}

		wp_add_inline_script(

			$handle,

			sprintf(

				'wp.mediaWidgets.modelConstructors[ %s ].prototype.schema = %s;',

				wp_json_encode( $this->id_base, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ),

				wp_json_encode( $exported_schema, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )

			)

		);


		wp_add_inline_script(

			$handle,

			sprintf(

				'

					wp.mediaWidgets.controlConstructors[ %1$s ].prototype.mime_type = %2$s;

					_.extend( wp.mediaWidgets.controlConstructors[ %1$s ].prototype.l10n, %3$s );

				',

				wp_json_encode( $this->id_base, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ),

				wp_json_encode( $this->widget_options['mime_type'], JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ),

				wp_json_encode( $this->l10n, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )

			)

		);

	}


	/**

	 * Render form template scripts.

	 *

	 * @since 4.9.0

	 */

	public function render_control_template_scripts() {

		parent::render_control_template_scripts();

		?>

		<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">

			<#

			var ids = _.filter( data.ids, function( id ) {

				return ( id in data.attachments );

			} );

			#>

			<# if ( ids.length ) { #>

				<ul class="gallery media-widget-gallery-preview" role="list">

					<# _.each( ids, function( id, index ) { #>

						<# var attachment = data.attachments[ id ]; #>

						<# if ( index < 6 ) { #>

							<li class="gallery-item">

								<div class="gallery-icon">

									<img alt="{{ attachment.alt }}"

										<# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>

										<# if ( attachment.sizes.thumbnail ) { #>

											src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"

										<# } else { #>

											src="{{ attachment.url }}"

										<# } #>

										<# if ( ! attachment.alt && attachment.filename ) { #>

											aria-label="

											<?php

											echo esc_attr(

												sprintf(

													/* translators: %s: The image file name. */

													__( 'The current image has no alternative text. The file name is: %s' ),

													'{{ attachment.filename }}'

												)

											);

											?>

											"

										<# } #>

									/>

									<# if ( index === 5 && data.ids.length > 6 ) { #>

									<div class="gallery-icon-placeholder">

										<p class="gallery-icon-placeholder-text" aria-label="

										<?php

											printf(

												/* translators: %s: The amount of additional, not visible images in the gallery widget preview. */

												__( 'Additional images added to this gallery: %s' ),

												'{{ data.ids.length - 5 }}'

											);

										?>

										">+{{ data.ids.length - 5 }}</p>

									</div>

									<# } #>

								</div>

							</li>

						<# } #>

					<# } ); #>

				</ul>

			<# } else { #>

				<div class="attachment-media-view">

					<button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>

				</div>

			<# } #>

		</script>

		</pre><p class="wporg-dot-link-list"><a href="https://developer.wordpress.org/reference/files/wp-includes/widgets/class-wp-widget-media-gallery.php/">View all references</a> <a href="https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/widgets/class-wp-widget-media-gallery.php#L18">View on Trac</a> <a href="https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/widgets/class-wp-widget-media-gallery.php#L18-L261">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_widget_media/">WP_Widget_Media</a><code>wp-includes/widgets/class-wp-widget-media.php


Core class that implements a media widget.

Changelog

Version Description
4.9.0 Introduced.