WordPress custom widget image upload

wordpress-custom-widget-image-upload

Personalizar un widget con un campo de “Seleccionar imagen”, donde este levante el media de wordpress y poder subir, seleccionar una imagen e insertarla en el campo text del widget.

Paso 1: En el archivo (/wp-includes/default-widgets.php), en la parte final del archivo agregar y debería de quedar como se muestra:

//begin_juliopari
function hrw_enqueue(){
  wp_enqueue_script('hrw', '/wp-content/themes/sanlucas/home/js/upload.js', null, null, true);
}
//end_juliopari

//begin_juliopari
add_action('admin_enqueue_scripts', 'hrw_enqueue');
//end_juliopari

add_action('init', 'wp_widgets_init', 1);

Paso 2: En la funcion form() del widget que estamos creando debería de quedar así:

<p>
    <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br />
    <input type="text" class="img" 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" class="select-img" value="Select Image" />
</p>

Paso 3: el js del upload debería de contener

var image_field;
jQuery(function($){
  $(document).on('click', 'input.select-img', function(evt){
    image_field = $(this).siblings('.img');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
  });
  window.send_to_editor = function(html) {
    imgurl = $('img', html).attr('src');
    image_field.val(imgurl);
    tb_remove();
  }
});
post-author