javascript - 带图像选择器的 WordPress 自定义小部件

Question

我希望有人能解决我的问题。问题就在这里。

我正在 WordPress 中构建一个小部件，让管理员从媒体选择器中选择图像，选择图像后，更改不会在网页预览中更新，并且“保存并发布”按钮保持禁用状态。

其他字段工作得很好，我相信这与 javascript 不触发更改有关，这与在文本输入框中手动键入不同。

选择图像确实会更改具有正确图像网址的输入字段的值，但更改不会被识别，因此保存按钮在定制器中保持禁用状态。

引导4。WordPress 4.7.1

这是我的代码。

(function($) {

	$(document).ready( 
		function() {
			console.log("loaded");

			var customUploader = wp.media({
				title: "Select an Image",
				library: { type: "image" },
				button: {
					text: 'Use this Image'
				},
				multiple: false,
			});

			var _this = null;

			//customUploader.open();
			$(document).on('click', '#image-upload-button', function(){
				_this = $(this);
				if(customUploader)
					customUploader.open();
			});

			customUploader.on('select', function(){
				var attachment = customUploader.state().get('selection').first().toJSON();

				_this.siblings('img').attr('src', attachment.url);
				_this.siblings('[id*=-img]').val(attachment.url);
				return true;
		});
	});
})(jQuery);

/*
	Plugin Name: Custom Bootstrap Card
	Plugin URI:
	Description: Test
	Version: 1.0
	Author: Alen Kalac
	License: none

*/
class custom_bs4_card extends WP_Widget {
	function __construct() {
		parent::__construct('ke-menu-stuff', $name = __('Custom Card'));
	}

	function widget( $args, $instance ) {

		var_dump($instance);
		$title = $instance['title'];
		$img = $instance['img'];

		echo $args['before_widget']; ?>
			<div class="card">
				<img class="card-img-top img-fluid" src="<?php  echo $img; ?>"  alt="Card image cap">
				<div class="card-block">
					<?php 
						if ( $title )
							echo $args['before_title'] . $title . $args['after_title'];
					?>
					<p class="card-text">
						Some quick example text to build on the card title and make up the bulk of the card's content.
					</p>
					<div class="card-cta">
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
		<?php echo $args['after_widget']; ?>
	<?php 
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = $new_instance['title'];
		$instance['img'] = $new_instance['img'];
		$instance['url'] = $new_instance['url'];
		return $instance;
	}

	function form( $instance ) {

		$title = 	! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'Promo Title', 'ke_template' );
		$url = 		! empty( $instance['url'] ) ? $instance['url'] : esc_html__( '#', 'ke_template' );
		$img = 		! empty( $instance['img'] ) ? $instance['img'] : esc_html__( '', 'ke_template' );
	?>
		<p>
			<label 
				for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?>
			</label> 
			<input 
				id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" 
				name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" 
				type="text" 
				value="<?php echo esc_attr( $title ); ?>"
			>
		</p>

		<img src="<?php echo esc_attr( $img ); ?>"  id="img-src">

		<input 
			type="text" 
			id="<?php echo esc_attr( $this->get_field_id( 'img' ) ); ?>" 
			name="<?php echo esc_attr( $this->get_field_name( 'img' ) ); ?>"  
			value="<?php echo esc_attr( $img ); ?>"
		>

		<input type="button" id="image-upload-button" value="Upload Image">

		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>"><?php esc_attr_e( 'URL:', 'text_domain' ); ?></label> 
			<input class="btn btn-primary" id="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'url' ) ); ?>" type="text" value="<?php echo esc_attr( $url ); ?>">
		</p>


		<?php

	}
}

function ke_init() {
	register_widget('custom_bs4_card');
	
}

function enqueue_media_uploader()
{
	wp_enqueue_media();
    wp_enqueue_script('wp-upload-box', plugin_dir_url(__FILE__) . "upload-box.js", array('jquery'), '0.1', false);
}

add_action('widgets_init', 'ke_init');
add_action('admin_enqueue_scripts', "enqueue_media_uploader");

Answer 1

针对以下问题:“选择图像确实会更改输入字段的值”JQuery 选择器[id*=-img] 错过了“”。它应该是 [id*="-img"]