1
Ich hoffe, dass jemand eine Lösung für mein Problem haben könnte. Hier ist das Problem.Wordpress Custom Widget mit Bildauswahl
Ich baue ein Widget in WordPress, das ein Administrator ein Bild aus der Medienauswahl auswählen kann, wenn ein Bild ausgewählt wird, wird die Änderung in der Webseitenvorschau nicht aktualisiert und die Schaltfläche "Speichern & veröffentlichen" bleibt deaktiviert.
Andere Felder funktionieren gut, ich glaube, es ist etwas mit Javascript zu tun, nicht die Änderung im Gegensatz zu manuell in einem Texteingabefeld eingeben.
Die Auswahl eines Bildes ändert den Wert des Eingabefeldes mit der korrekten Bild-URL, aber die Änderungen werden nicht erkannt, daher bleibt die Schaltfläche Speichern im Customizer deaktiviert.
Bootstrap 4. Wordpress 4.7.1
hier ist mein Code.
(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");