为Widget创建图像上传器

时间：2013-12-21 作者：keilowe

我找到了这个帖子//

Use Media upload in custom widget on wordpress 3.5

我在这方面没有任何经验，所以我几乎只是将他提供的代码复制到我自己的函数中。php文件。我上传了JS和所有东西。。。

然后，我替换了“sven”在回答中发布的某些代码。

上传程序工作得很好，但当我查看前端时，图像甚至没有显示。。。

这是我函数中的代码。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”提供的更新会有所帮助，但很明显我遗漏了一些东西。请帮忙。

2 个回复
最合适的回答,由SO网友:Sven 整理而成

让我们详细地面对它：注册的侧栏（带有IDleft-sidebar) 有两个参数来包装整个小部件(before_widget 和after_widget) 您可以通过echo $before_widget 和echo $after_widget 在您的小部件中（请参阅下面的我的版本）：

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

// Enqueue additional 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.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\' ); ?>">Image</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="Upload Image" style="margin-top:5px;" />
    </p>

<?php
    }
}
以及上传按钮的JavaScript：

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\');
});
您的小部件现在可以成为每个侧栏（又名小部件区域）的一部分。要输出侧栏，可以使用函数dynamic_sidebar() 在模板中的任何地方都可以使用：

if ( is_active_sidebar(\'left-sidebar\') ) {
    dynamic_sidebar(\'left-sidebar\');
}
2019年1月1日更新：我对代码进行了调整，使其能够与多个小部件和边栏一起工作。

SO网友:jrobertblack

我得到了斯文斯的工作答案，但正如他在最后所说的那样，ID存在问题，如果你在一个页面上有多个上传程序，is将立即更改所有上传程序，当我将其用于页面生成器等小部件时，我开始遇到问题。我通过使用小部件中的唯一id修复了它。

我的表单代码是：

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

});
主要是在我的widget表单中使用了我的唯一id

<?php echo $this->get_field_id( \'image_id\' ); ?>
并在类前面添加，然后在没有#的情况下检索它，

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\' );
希望可以帮助有同样问题的人。

结束
标签： php   images   widgets   uploads   javascript   小码农  

相关推荐

编写一个WordPress插件并尝试包含Facebook PHP SDK

我正在为Wordpress编写一个插件，它需要Facebook PHP SDK。从一年多前我发现的结果来看，我遇到了一个常见的问题。不幸的是，我一直无法找到解决方案。我使用的是Wordpress 3.8和从github获得的Facebook PHP SDK Master，所以这应该是最新版本。实际上，我已经在Wordpress之外运行了相同的代码，它成功地运行了，没有出现任何错误。所以，我上传我的插件并激活它。我转到我构建的面板，该面板要求提供appID和密钥，以及facebook帐户的用户名。插件所要做