Cria Uploader Imagem para Widget

2

Eu encontrei este post //

Use o upload de mídia no widget personalizado em wordpress 3.5

Não tenho experiência em nada disso, então copiei o código que ele forneceu no meu próprio arquivo functions.php. Eu enviei o JS e tudo ...

Então, substituí certo código que "sven" postou em sua resposta.

O uploader funciona perfeitamente, mas quando vejo o front end, a imagem não é exibida ...

Aqui está o código dentro do meu functions.php //

(inclui as barras laterais registradas e o widget personalizado, etc.)

 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 } }  ?>

Aqui está o 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');
});

Agora, minha pergunta é: o que exatamente devo corrigir para que esse carregador de imagens funcione? Eu percebi que as atualizações "sven" fornecidas ajudariam, mas claramente estou perdendo alguma coisa. Por favor, ajude.

    
por keilowe 21.12.2013 / 22:51

2 respostas

3

Ok, verifiquei novamente o código e está tudo bem! (Desculpe pelo meu comentário enganoso!)

Durante o teste, alterei o código um pouco, mas você também pode continuar usando sua versão.

Mas vamos encarar isso em detalhes: a barra lateral registrada (com o ID left-sidebar ) tem dois argumentos para agrupar o widget inteiro ( before_widget e after_widget ) que você pode gerar via echo $before_widget e echo $after_widget no seu widget (veja minha versão abaixo).

Os próximos dois argumentos ( before_title e after_title ) não estão definidos no seu widget, mas eu adicionei o filtro ao campo de texto para que você possa ter a idéia:

<?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
    }
}
?>

E o script:

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');
});

Seu widget agora pode fazer parte de cada barra lateral (também conhecida como área de widget). Para gerar uma barra lateral, você pode usar a função dynamic_sidebar() que funcionará em todos os lugares do seu modelo:

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

Nota: pode haver um pequeno problema se você estiver usando este widget em mais de uma barra lateral! (... porque cada widget terá o mesmo ID que fará com que o script atualize cada imagem.) Felizmente isso não é tão ruim quanto parece, porque se você apertar o botão de segurança apenas o atual um será protegido para o banco de dados:)

    
por Sven 22.12.2013 / 05:24
4

Eu consegui uma resposta do Svens para o trabalho, mas como ele disse no final, há um problema com ids e se você tiver vários uploaders em uma página, eles irão mudar todos de uma vez, eu comecei a ter problemas quando eu estava isso para widgets em compositores de página e tal. Eu consertei usando o id único do widget.

Meu código de formulário era este:

<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>

e meu js foi:

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' );

});

principalmente usei meu id exclusivo no formulário de widget

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

e acrescentou que na frente das classes, em seguida, retribuiu sem o #,

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

em seguida, inseriu-o antes de todas as classes para que elas correspondessem ao formulário

   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' );

Hope ajuda alguém que está tendo esse mesmo problema.

    
por jrobertblack 10.05.2017 / 19:10