1
Я надеюсь, что у кого-то может быть решение моей проблемы. Вот проблема.Wordpress Custom Widget With Image chooser
Я создаю виджет в WordPress, который позволяет администратору выбирать изображение из выбранного медиабраузера, когда изображение выбрано, изменение не обновляется в предварительном просмотре веб-страницы, а кнопка «Сохранить & publish» остается отключенной.
Другие поля работают нормально, я считаю, что это как-то связано с тем, что javascript не запускает изменения, в отличие от ввода вручную текстового поля ввода.
Выбор изображения изменяет значение поля ввода с правильным URL-адресом изображения, но изменения не распознаются, поэтому кнопка сохранения остается в настройке.
Bootstrap 4. WordPress 4.7.1
вот мой код.
(function($) {
\t $(document).ready(
\t \t function() {
\t \t \t console.log("loaded");
\t \t \t var customUploader = wp.media({
\t \t \t \t title: "Select an Image",
\t \t \t \t library: { type: "image" },
\t \t \t \t button: {
\t \t \t \t \t text: 'Use this Image'
\t \t \t \t },
\t \t \t \t multiple: false,
\t \t \t });
\t \t \t var _this = null;
\t \t \t //customUploader.open();
\t \t \t $(document).on('click', '#image-upload-button', function(){
\t \t \t \t _this = $(this);
\t \t \t \t if(customUploader)
\t \t \t \t \t customUploader.open();
\t \t \t });
\t \t \t customUploader.on('select', function(){
\t \t \t \t var attachment = customUploader.state().get('selection').first().toJSON();
\t \t \t \t _this.siblings('img').attr('src', attachment.url);
\t \t \t \t _this.siblings('[id*=-img]').val(attachment.url);
\t \t \t \t return true;
\t \t });
\t });
})(jQuery);/*
\t Plugin Name: Custom Bootstrap Card
\t Plugin URI:
\t Description: Test
\t Version: 1.0
\t Author: Alen Kalac
\t License: none
*/
class custom_bs4_card extends WP_Widget {
\t function __construct() {
\t \t parent::__construct('ke-menu-stuff', $name = __('Custom Card'));
\t }
\t function widget($args, $instance) {
\t \t var_dump($instance);
\t \t $title = $instance['title'];
\t \t $img = $instance['img'];
\t \t echo $args['before_widget']; ?>
\t \t \t <div class="card">
\t \t \t \t <img class="card-img-top img-fluid" src="<?php echo $img; ?>" alt="Card image cap">
\t \t \t \t <div class="card-block">
\t \t \t \t \t <?php
\t \t \t \t \t \t if ($title)
\t \t \t \t \t \t \t echo $args['before_title'] . $title . $args['after_title'];
\t \t \t \t \t ?>
\t \t \t \t \t <p class="card-text">
\t \t \t \t \t \t Some quick example text to build on the card title and make up the bulk of the card's content.
\t \t \t \t \t </p>
\t \t \t \t \t <div class="card-cta">
\t \t \t \t \t \t <a href="#" class="btn btn-primary">Go somewhere</a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t <?php echo $args['after_widget']; ?>
\t <?php
\t }
\t function update($new_instance, $old_instance) {
\t \t $instance = $old_instance;
\t \t $instance['title'] = $new_instance['title'];
\t \t $instance['img'] = $new_instance['img'];
\t \t $instance['url'] = $new_instance['url'];
\t \t return $instance;
\t }
\t function form($instance) {
\t \t $title = \t ! empty($instance['title']) ? $instance['title'] : esc_html__('Promo Title', 'ke_template');
\t \t $url = \t \t ! empty($instance['url']) ? $instance['url'] : esc_html__('#', 'ke_template');
\t \t $img = \t \t ! empty($instance['img']) ? $instance['img'] : esc_html__('', 'ke_template');
\t ?>
\t \t <p>
\t \t \t <label
\t \t \t \t for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title:', 'text_domain'); ?>
\t \t \t </label>
\t \t \t <input
\t \t \t \t id="<?php echo esc_attr($this->get_field_id('title')); ?>"
\t \t \t \t name="<?php echo esc_attr($this->get_field_name('title')); ?>"
\t \t \t \t type="text"
\t \t \t \t value="<?php echo esc_attr($title); ?>"
\t \t \t >
\t \t </p>
\t \t <img src="<?php echo esc_attr($img); ?>" id="img-src">
\t \t <input
\t \t \t type="text"
\t \t \t id="<?php echo esc_attr($this->get_field_id('img')); ?>"
\t \t \t name="<?php echo esc_attr($this->get_field_name('img')); ?>"
\t \t \t value="<?php echo esc_attr($img); ?>"
\t \t >
\t \t <input type="button" id="image-upload-button" value="Upload Image">
\t \t <p>
\t \t \t <label for="<?php echo esc_attr($this->get_field_id('url')); ?>"><?php esc_attr_e('URL:', 'text_domain'); ?></label>
\t \t \t <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); ?>">
\t \t </p>
\t \t <?php
\t }
}
function ke_init() {
\t register_widget('custom_bs4_card');
\t
}
function enqueue_media_uploader()
{
\t 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");