php - 自定义 WordPress 小部件，带有媒体上传按钮，在每个小部件上插入相同的图像

Question

我是一个制作自己的自定义小部件的菜鸟，我想制作一个自定义小部件来显示网站的特色服务，包括图像、标题、描述和链接按钮。我在 stackoverflow 上看了很多，最后我发现一些东西几乎可以工作了。问题是媒体按钮可以工作，该字段可以工作，但是当我单击“使用此图像”时，它会在它找到的每个输入上(在小部件桌面内)使用类“image1”放置相同的图像网址，因此每个小部件都有相同的图像。

如果有人能帮我解决这个问题，我将非常感激。提前对西类牙语单词表示抱歉，但它们没有用于与我试图修复的操作相关的任何内容。这是我的functions.php代码:

// START CUSTOM WIDGET
class services_widget extends WP_Widget {

    // Create Widget
    function services_widget() {
        parent::WP_Widget(false, $name = 'Servicios Destacados - Widget', array('description' => 'Widget para mostrar servicios destacados en la página principal'));
    }

    // Widget Content
    function widget($args, $instance) { 
        extract( $args );
        $photo = $instance['photo'];
        $titulo = $instance['titulo'];
        $descripcion = $instance['descripcion'];
        $enlace = strip_tags($instance['enlace']);
        $textoenlace = strip_tags($instance['textoenlace']);

        ?>

            <div class="servicio-destacado <?php echo $this->id; ?>">
                <div class="servicio-imagen" style="background-color:#eaeaea;background-image: url('<?php echo $photo; ?>');"></div>
                <div class="titulo"><?php echo $titulo; ?></div>
                <div class="line"></div>
                <div class="descripcion"><?php echo $descripcion; ?></div>
                <a href="<?php echo $enlace; ?>" class="enlace boton"><?php echo $textoenlace; ?></a>
            </div>

        <?php
     }


    // If widget content needs a form
    function form($instance) {
        //widgetform in backend
        $photo = $instance['photo'];
        $titulo = $instance['titulo'];
        $descripcion = $instance['descripcion'];
        $enlace = strip_tags($instance['enlace']);
        $textoenlace = strip_tags($instance['textoenlace']);
        ?>
        <div class="servicio-widget">
            <p>
                <label for="<?php echo $this->get_field_id('photo'); ?>"><strong>Imagen</strong>: </label>
                <input class="widefat image1" type="text" name="<?php echo $this->get_field_name('photo'); ?>" id="<?php echo $this->get_field_id('photo'); ?>" value="<?php echo attribute_escape($photo) ;?>">
            </p>
            <p>
                <button class="image_upload1">Seleccionar o cambiar imagen</button>
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('titulo'); ?>"><strong>Título</strong>: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('titulo'); ?>" name="<?php echo $this->get_field_name('titulo'); ?>" type="text" value="<?php echo attribute_escape($titulo); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('descripcion'); ?>"><strong>Descripción</strong>: </label>
                <textarea class="widefat" id="<?php echo $this->get_field_id('descripcion'); ?>" name="<?php echo $this->get_field_name('descripcion'); ?>" type="text" value="<?php echo attribute_escape($descripcion); ?>"><?php echo attribute_escape($descripcion); ?></textarea>
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('textoenlace'); ?>"><strong>Texto del botón</strong>: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('textoenlace'); ?>" name="<?php echo $this->get_field_name('textoenlace'); ?>" type="text" value="<?php echo attribute_escape($textoenlace); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('enlace'); ?>"><strong>Enlace</strong>: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('enlace'); ?>" name="<?php echo $this->get_field_name('enlace'); ?>" type="text" value="<?php echo attribute_escape($enlace); ?>" />
            </p>
        </div>

        <?php       
    }

    // Update and save the widget
   public function update( $new_instance, $old_instance ) {
   $instance = array();
   $instance['photo'] = ( ! empty( $new_instance['photo'] ) ) ? $new_instance['photo'] : '';

   return $instance;
}

}
register_widget('services_widget');
/*
photo upload option in widget
*/

function photo_upload_option($hook) {

    if( $hook != 'widgets.php' ) 
        return;

    //enque Javasript Media API
    wp_enqueue_media();

    wp_enqueue_script( 'uploadphoto', get_template_directory_uri() . '/upload_image.js', array('jquery') );

}
add_action('admin_enqueue_scripts', 'photo_upload_option'); 
// END CUSTOM WIDGET

这是upload_image.js的代码:

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      addImgLink = $('.image_upload1'),
      imgIdInput = $('.image1');

  // ADD IMAGE LINK
  addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Image',
      button: {
        text: 'Use this Image'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      //imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment url to our input field
      imgIdInput.val( attachment.url );
    });

    // Finally, open the modal on click
    frame.open();
  });

});

Answer 1

这是在小部件中创建图像 uploader 的完整代码

函数.php

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

查看文件要在哪里显示此文件:

if ( is_active_sidebar('left-sidebar') ) {
    dynamic_sidebar('left-sidebar');
}