Intereting Posts
Получать пользовательские значения полей таксономии Получите все условия, в том числе непроверенные, или получите условия вне цикла Позвольте пользователям регистрироваться и показывать им только область (без плагина) Изображения и тексты не отображаются при нажатии кнопки «Предварительный просмотр» API-интерфейс Customizer JS: добавление элемента управления «выпадающих страниц» Автоматическое создание сообщения с последними 10 изображениями в каталоге WordPress Как удалить атрибут размера вложений Добавление текста в ссылки, если нет на главной странице Таможенная таксономия: те же условия, но для разных лет Jetpack бесконечный прокрутки рендеринга – сделать разные в зависимости от типа сообщения? Советы WordPress для скорости и производительности Как передать NULL в том, где массив для $ wpdb-> update Общая функциональность моих собственных плагинов Какой самый простой способ закрыть комментарии к медиа / вложениям? Категории фильтров при обновлении

Создать загрузчик изображений для виджета

Я нашел этот пост //

Использовать загрузку мультимедиа в пользовательский виджет в wordpress 3.5

Я не испытываю никого из этого, поэтому я просто скопировал код, который он предоставил, в мой собственный файл functions.php. Я загрузил JS и все …

Затем я заменил определенный код, который «sven» опубликовал в его ответе.

Загружатель работает отлично, но когда я просматриваю переднюю часть, изображение даже не отображается …

Вот код внутри моих functions.php //

(он включает зарегистрированные боковые панели и пользовательский виджет и т. д.),

if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'Left Sidebar', 'id' => 'left-sidebar', 'description' => 'Widget Area', 'before_widget' => '<div id="one" class="two"><h1>EOTW//</h1>', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>' )); } add_action('widgets_init', 'ctUp_ads_widget'); function ctUp_ads_widget() { register_widget( 'ctUp_ads' ); } function ctUp_wdScript(){ wp_enqueue_media(); wp_enqueue_script('adsScript', get_template_directory_uri() . '/js/ads.js'); } add_action('admin_enqueue_scripts', 'ctUp_wdScript'); class ctUp_ads extends WP_Widget{ function ctUp_ads() { $widget_ops = array( 'classname' => 'ctUp-ads' ); $control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'ctUp-ads-widget' ); $this->WP_Widget( 'ctUp-ads-widget','EOTW', $widget_ops, $control_ops ); } public function widget($args, $instance){ extract( $args ); ?> <a href="#"><img src="<?php echo esc_url($instance['image_uri']); ?>" /></a> <?php } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['text'] = strip_tags( $new_instance['text'] ); $instance['image_uri'] = strip_tags( $new_instance['image_uri'] ); return $instance; } public function form($instance){ ?> <p> <label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text', 'themename'); ?></label><br /> <input type="text" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>" value="<?php echo $instance['text']; ?>" class="widefat" /> </p> <p> <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br /> <img class="custom_media_image" src="<?php if(!empty($instance['image_uri'])){echo $instance['image_uri'];} ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /> <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>"> <input type="button" value="<?php _e( 'Upload Image', 'themename' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/> </p> <?php } } ?> 

Вот JS //

 jQuery(document).ready( function(){ function media_upload( button_class) { var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; jQuery('body').on('click',button_class, function(e) { var button_id ='#'+jQuery(this).attr('id'); /* console.log(button_id); */ var self = jQuery(button_id); var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(button_id); var id = button.attr('id').replace('_button', ''); _custom_media = true; wp.media.editor.send.attachment = function(props, attachment){ if ( _custom_media ) { jQuery('.custom_media_id').val(attachment.id); jQuery('.custom_media_url').val(attachment.url); jQuery('.custom_media_image').attr('src',attachment.url).css('display','block'); } else { return _orig_send_attachment.apply( button_id, [props, attachment] ); } } wp.media.editor.open(button); return false; }); } media_upload( '.custom_media_upload'); }); 

Теперь мой вопрос: что именно мне нужно исправить, чтобы этот загрузчик изображений работал? Я понял, что обновления, предоставленные «sven», помогут, но я явно что-то упускаю. Пожалуйста помоги.

Хорошо, я снова проверил код, и все в порядке! (Извините за мой вводящий в заблуждение комментарий!)

Во время тестирования я немного изменил код, но вы также можете продолжать использовать свою версию.

Но давайте посмотрим правде в глаза: зарегистрированная боковая панель (с left-sidebar before_widget left-sidebar ) имеет два аргумента, чтобы обернуть весь виджет ( before_widget и after_widget ), который вы можете выводить через echo $before_widget и echo $after_widget в свой виджет (см. Мою версию ниже).

Следующие два аргумента ( before_title и after_title ) не определены в вашем виджете, но я добавил фильтр в текстовое поле, чтобы вы могли понять:

 <?php // register sidebar if (function_exists('register_sidebar')) { register_sidebar( array( 'name' => 'Left Sidebar', 'id' => 'left-sidebar', 'description' => 'Widget Area', 'before_widget' => '<div id="one" class="two">', 'after_widget' => '</div>', ) ); } // register widget add_action('widgets_init', 'ctUp_ads_widget'); function ctUp_ads_widget() { register_widget( 'ctUp_ads' ); } // add admin scripts add_action('admin_enqueue_scripts', 'ctup_wdscript'); function ctup_wdscript() { wp_enqueue_media(); wp_enqueue_script('ads_script', get_template_directory_uri() . '/js/widget.js', false, '1.0', true); } // widget class class ctUp_ads extends WP_Widget { function ctUp_ads() { $widget_ops = array('classname' => 'ctUp-ads'); $this->WP_Widget('ctUp-ads-widget', 'EOTW', $widget_ops); } function widget($args, $instance) { extract($args); // widget content echo $before_widget; ?> <h1><?php echo apply_filters('widget_title', $instance['text'] ); ?></h1> <a href="#"> <img src="<?php echo esc_url($instance['image_uri']); ?>" /> </a> <?php echo $after_widget; } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['text'] = strip_tags( $new_instance['text'] ); $instance['image_uri'] = strip_tags( $new_instance['image_uri'] ); return $instance; } function form($instance) { ?> <p> <label for="<?php echo $this->get_field_id('text'); ?>">Text</label><br /> <input type="text" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>" value="<?php echo $instance['text']; ?>" class="widefat" /> </p> <p> <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br /> <?php if ( $instance['image_uri'] != '' ) : echo '<img class="custom_media_image" src="' . $instance['image_uri'] . '" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><br />'; endif; ?> <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" style="margin-top:5px;"> <input type="button" class="button button-primary custom_media_button" id="custom_media_button" name="<?php echo $this->get_field_name('image_uri'); ?>" value="Upload Image" style="margin-top:5px;" /> </p> <?php } } ?> 

И сценарий:

 jQuery(document).ready( function($) { function media_upload(button_class) { var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; $('body').on('click', button_class, function(e) { var button_id ='#'+$(this).attr('id'); var self = $(button_id); var send_attachment_bkp = wp.media.editor.send.attachment; var button = $(button_id); var id = button.attr('id').replace('_button', ''); _custom_media = true; wp.media.editor.send.attachment = function(props, attachment){ if ( _custom_media ) { $('.custom_media_id').val(attachment.id); $('.custom_media_url').val(attachment.url); $('.custom_media_image').attr('src',attachment.url).css('display','block'); } else { return _orig_send_attachment.apply( button_id, [props, attachment] ); } } wp.media.editor.open(button); return false; }); } media_upload('.custom_media_button.button'); }); 

Теперь ваш виджет может быть частью каждой боковой панели (например, области виджета). Чтобы вывести боковую панель, вы можете использовать функцию dynamic_sidebar() которая будет работать повсюду в вашем шаблоне:

 <?php if ( is_active_sidebar( 'left-sidebar' ) ) : dynamic_sidebar('left-sidebar'); endif; ?> 

Примечание. Может возникнуть небольшая проблема, если вы используете этот виджет в нескольких боковых панелях! (… потому что каждый виджет будет иметь тот же ID, который заставит скрипт обновлять каждое изображение.) К счастью, это не так плохо, как кажется, потому что, если вы нажмете на кнопку безопасности, только текущий будет сохранен в базе данных 🙂

Я получил Svens ответ на работу, но, как он сказал в конце, есть проблема с идентификаторами, и если у вас есть несколько загрузчиков на одной странице, это сразу изменит их все, я начал сталкиваться с проблемами, когда я использовал это для виджетов в композиторах страниц и т. д. Я исправил его, используя уникальный идентификатор из виджета.

Мой код формы:

 <label class="widg-label widg-img-label" for="<?php echo $this->get_field_id( 'image_uri' ); ?>">Image</label> <div class="widg-img" > <img class="<?php echo $this->get_field_id( 'image_id' ); ?>_media_image custom_media_image" src="<?php if( !empty( $instance['image_uri'] ) ){echo $instance['image_uri'];} ?>" /> <input input type="hidden" type="text" class="<?php echo $this->get_field_id( 'image_id' ); ?>_media_id custom_media_id" name="<?php echo $this->get_field_name( 'image_id' ); ?>" id="<?php echo $this->get_field_id( 'image_id' ); ?>" value="<?php echo $instance['image_id']; ?>" /> <input type="text" class="<?php echo $this->get_field_id( 'image_id' ); ?>_media_url custom_media_url" name="<?php echo $this->get_field_name( 'image_uri' ); ?>" id="<?php echo $this->get_field_id( 'image_uri' ); ?>" value="<?php echo $instance['image_uri']; ?>" > <input type="button" value="Upload Image" class="button custom_media_upload" id="<?php echo $this->get_field_id( 'image_id' ); ?>"/> </div> 

и мой js был:

 jQuery(document ).ready( function(){ function media_upload( button_class ) { var _custom_media = true, _orig_send_attachment = wp.media.editor.send.attachment; jQuery('body').on('click','.custom_media_upload',function(e) { var button_id ='#'+jQuery(this).attr( 'id' ); var button_id_s = jQuery(this).attr( 'id' ); console.log(button_id); var self = jQuery(button_id); var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(button_id); var id = button.attr( 'id' ).replace( '_button', '' ); _custom_media = true; wp.media.editor.send.attachment = function(props, attachment ){ if ( _custom_media ) { jQuery( '.' + button_id_s + '_media_id' ).val(attachment.id); jQuery( '.' + button_id_s + '_media_url' ).val(attachment.url); jQuery( '.' + button_id_s + '_media_image' ).attr( 'src',attachment.url).css( 'display','block' ); } else { return _orig_send_attachment.apply( button_id, [props, attachment] ); } } wp.media.editor.open(button); return false; }); } media_upload( '.custom_media_upload' ); }); 

в основном использовал мой уникальный идентификатор в моей форме виджетов

 <?php echo $this->get_field_id( 'image_id' ); ?> 

и добавил, что infront классов, а затем восстановил его без #,

 var button_id_s = jQuery(this).attr( 'id' ); 

затем вставил его перед всеми классами, чтобы они соответствовали форме

  jQuery( '.' + button_id_s + '_media_id' ).val(attachment.id); jQuery( '.' + button_id_s + '_media_url' ).val(attachment.url); jQuery( '.' + button_id_s + '_media_image' ).attr( 'src',attachment.url).css( 'display','block' ); 

Надежда помогает кому-то, кто имеет эту же проблему.