Creează Uploader de Imagini pentru Widget
Am găsit această postare//
Folosirea încărcării media în widget personalizat pe WordPress 3.5
Nu am experiență în acest domeniu, așa că am copiat codul furnizat în fișierul meu functions.php. Am încărcat și fișierul JS și tot ce era necesar...
Apoi am înlocuit anumite bucăți de cod pe care le-a postat "sven" în răspunsul său.
Uploadarea funcționează perfect, dar când vizualizez în frontend imaginea nu este afișată...
Aici este codul din functions.php//
(include sidebar-urile înregistrate și widget-ul personalizat etc)
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Sidebar Stânga',
'id' => 'left-sidebar',
'description' => 'Zonă Widget',
'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'); ?>">Imagine</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( 'Încarcă Imagine', 'themename' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/>
</p>
<?php } } ?>
Aici este codul 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');
});
Acum întrebarea mea este, ce anume trebuie să repar pentru ca acest uploader de imagini să funcționeze? Am presupus că actualizările furnizate de "sven" ar ajuta, dar evident îmi scapă ceva. Vă rog să mă ajutați.

Să abordăm acest lucru în detaliu: Bara laterală înregistrată (cu ID-ul left-sidebar
) are două argumente pentru a înfășura întregul widget (before_widget
și after_widget
), pe care le puteți afișa prin echo $before_widget
și echo $after_widget
în widget-ul dumneavoastră (vezi versiunea mea de mai jos):
<?php
// Înregistrează bara laterală
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>',
)
);
}
// Înregistrează widget-ul
add_action('widgets_init', 'ctUp_ads_widget');
function ctUp_ads_widget() {
register_widget( 'ctUp_ads' );
}
// Încarcă scripturi suplimentare în admin
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.0', true);
}
// Widget
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) {
echo $before_widget;
?>
<h1><?php echo apply_filters('widget_title', $instance['text'] ); ?></h1>
<img src="<?php echo esc_url($instance['image_uri']); ?>" />
<?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="<?= $this->get_field_id( 'image_uri' ); ?>">Imagine</label>
<img class="<?= $this->id ?>_img" src="<?= (!empty($instance['image_uri'])) ? $instance['image_uri'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
<input type="text" class="widefat <?= $this->id ?>_url" name="<?= $this->get_field_name( 'image_uri' ); ?>" value="<?= $instance['image_uri'] ?? ''; ?>" style="margin-top:5px;" />
<input type="button" id="<?= $this->id ?>" class="button button-primary js_custom_upload_media" value="Încarcă imagine" style="margin-top:5px;" />
</p>
<?php
}
}
Și JavaScript pentru butonul de încărcare:
jQuery(document).ready(function ($) {
function media_upload(button_selector) {
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
$('body').on('click', button_selector, function () {
var button_id = $(this).attr('id');
wp.media.editor.send.attachment = function (props, attachment) {
if (_custom_media) {
$('.' + button_id + '_img').attr('src', attachment.url);
$('.' + button_id + '_url').val(attachment.url);
} else {
return _orig_send_attachment.apply($('#' + button_id), [props, attachment]);
}
}
wp.media.editor.open($('#' + button_id));
return false;
});
}
media_upload('.js_custom_upload_media');
});
Widget-ul dumneavoastră poate face parte din orice bară laterală (zona de widget-uri). Pentru a afișa o bară laterală, puteți folosi funcția dynamic_sidebar()
, care va funcționa oriunde în șabloanele dumneavoastră:
if ( is_active_sidebar('left-sidebar') ) {
dynamic_sidebar('left-sidebar');
}
Actualizare 01/2019: Am ajustat codul pentru a funcționa cu mai multe widget-uri și bare laterale.

Mulțumesc foarte mult pentru ajutor! Funcționează perfect! Apreciez foarte mult bunătatea ta!

Mulțumesc mult, dar în widget-ul meu de încărcare fișier, câmpul se actualizează doar când schimb ceva în input-ul URL sau în alt input. Încărcarea imaginii nu actualizează acest câmp, poți să mă ajuți?

Am reușit să fac soluția lui Svens să funcționeze, dar după cum a menționat el la final, există o problemă cu ID-urile și dacă ai mai multe încărcătoare pe aceeași pagină, toate se vor schimba simultan. Am început să întâmpin probleme când am folosit acest mecanism pentru widget-uri în constructori de pagini și altele asemenea. Am rezolvat problema utilizând ID-ul unic al widget-ului.
Codul meu pentru formular a fost următorul:
<label class="widg-label widg-img-label" for="<?php echo $this->get_field_id( 'image_uri' ); ?>">Imagine</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="Încarcă imagine" class="button custom_media_upload" id="<?php echo $this->get_field_id( 'image_id' ); ?>"/>
</div>
Iar codul meu JavaScript a fost:
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' );
});
Practic, am folosit ID-ul unic din widget-ul meu în formular:
<?php echo $this->get_field_id( 'image_id' ); ?>
și l-am adăugat în fața claselor, apoi l-am extras fără caracterul #:
var button_id_s = jQuery(this).attr( 'id' );
apoi l-am inserat înaintea tuturor claselor, astfel încât să corespundă cu formularul:
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' );
Sper că acest lucru ajută pe cineva care întâmpină aceeași problemă.
