Question

前一天，我为我最近的WordPress主题开发了一个自定义小部件。在该窗口小部件中，具有带有其他字段的图像上载字段。我做了一切，除了一个问题外，小部件工作得非常好。当我在侧边栏中拖动窗口小部件并提供所有字段所需的信息时，它在前端显示正常。但在此之后，当我尝试从该窗口小部件后端更改图像时，保存按钮仍然保存。图像不会改变。

代码如下：

            class Themeslug_About_Widget extends WP_widget{



               public function __construct(){

                        parent::__construct('author_info', esc_html__( 'About Info Box', 'blogista' ), array(

                        'description' => esc_html__( 'About Info Box contain brief about Author/ Company.', 'blogista' ),

                                ));

                        }

                public function widget( $args, $instance ){


                        echo $args['before_widget'];
                            echo $args['before_title'] . $instance['title'] . $args['after_title'];
                            ?>
                            <img src="<?php echo $instance['author_box_image']; ?>" alt="<?php echo $instance['title']; ?>" />
                            <div class="widget-content">

                                <h3 class="title">
                                    <a href="#"><?php echo $instance['author_name']; ?></a>
                                </h3>




                            </div>
                        <?php           
                        echo $args['after_widget'];



                    }

                public function form( $instance ){

                        $title = '';
                        if( !empty( $instance['title'] ) ) {
                            $title = $instance['title'];
                        }


                        $author_box_image = '';

                        if( ! empty( $instance['author_box_image'] ) ) {
                            $author_box_image = $instance['author_box_image'];
                        }
        ?>

                            <p>
                                <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:', 'blogista' ); ?></label>
                                <input type="text" value="<?php echo esc_attr( $title ); ?>" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" class="widefat">
                            </p>

                            <p>
                                <button class="button button-primary" id="author_info_image"><?php _e( 'Upload Image', 'blogista' ); ?></button>
                                <input type="hidden" name="<?php echo $this->get_field_name('author_box_image'); ?>" id="<?php echo $this->get_field_id('author_box_image'); ?>"  class="image_link"  value="<?php echo esc_url( $author_box_image ); ?>" >
                                <div class="image_show">
                                    <img src="<?php echo $instance['author_box_image']; ?>" width="200" height="auto" alt="">
                                </div>
                            </p>



                        <?php

                    }

                public function update( $new_instance, $old_instance ) {

                    $instance = array();

                    $instance['title']              = ( ! empty( $new_instance['title'] ) ) ? esc_attr( $new_instance['title'] ) : '';
                    $instance['author_box_image']   = ( ! empty( $new_instance['author_box_image'] ) ) ? esc_url( $new_instance['author_box_image'] ) : '';


                    return $instance;

                }



    }





    function themeslug_admin_enqueue_scrits(){

        wp_enqueue_media();

        wp_enqueue_script( 'admin_custom_script', get_theme_file_uri() . '/js/libs/admin_scripts.js', array( 'jquery' ), '1.0', true );



    }

add_action( 'admin_enqueue_scripts', 'themeslug_admin_enqueue_scrits' );

然后添加了以下jQuery代码：

(function($){


    $(document).ready(function(){
        $('button#author_info_image').on("click",function( e ){

            e.preventDefault();




            var imageUploader = wp.media({

                'title' : 'Upload Author Image',
                'button'    : {
                    'text' : 'Set The Image'
                },
                'multiple' : false

            });


            imageUploader.open();


            imageUploader.on("select", function(){
                var image = imageUploader.state().get("selection").first().toJSON();

                var link = image.url;

                $("input.image_link").val( link );

                $(".image_show img").attr('src', link);

            });


        });
    });




}(jQuery))

第一次工作正常但是在尝试更改图像时，Widget保存按钮仍保存。请帮助。

先谢谢。

Answer 1

我建议您按照我的方式使用图片上传系统创建自定义小部件。

a
b
c

表单功能将是：

public function widget( $args, $instance ) {
   // Our variables from the widget settings
   $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Default title', 'text_domain' ) : $instance['title'] );
   $image = ! empty( $instance['image'] ) ? $instance['image'] : '';

   ob_start();
   echo $args['before_widget'];
   if ( ! empty( $instance['title'] ) ) {
      echo $args['before_title'] . $title . $args['after_title'];
   }
   ?>

   <?php if($image): ?>
      <img src="<?php echo esc_url($image); ?>" alt="">
   <?php endif; ?>

   <?php
   echo $args['after_widget'];
   ob_end_flush();
}

这是更新功能：

public function form( $instance ) {
   $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
   $image = ! empty( $instance['image'] ) ? $instance['image'] : '';
   ?>
   <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
   </p>
   <p>
      <label for="<?php echo $this->get_field_id( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" type="text" value="<?php echo esc_url( $image ); ?>" />
      <button class="upload_image_button button button-primary">Upload Image</button>
   </p>
   <?php
}

正如您所看到的，我在图像输入字段下方添加了一个带有“.upload_image_button”类的按钮，但它现在无法正常工作，并且要使其工作，需要添加我们的自定义管理JavaScript。

首先需要创建javascript文件并将其放入主题中，让我们在主题文件夹下的assets / js中创建一个名为our_admin.js的文件。

接下来，您需要注册并排队我们的脚本以使其在管理面板中加载，因此我们在widget类构造函数中添加几行：

public function update( $new_instance, $old_instance ) {
   $instance = array();
   $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
   $instance['image'] = ( ! empty( $new_instance['image'] ) ) ? $new_instance['image'] : '';

   return $instance;
}

然后你需要在我们的widget类中使用“scripts”函数：

function __construct() {

   // Add Widget scripts
   add_action('admin_enqueue_scripts', array($this, 'scripts'));

   parent::__construct(
      'our_widget', // Base ID
      __( 'Our Widget Title', 'text_domain' ), // Name
      array( 'description' => __( 'Our Widget with media files', 'text_domain' ), ) // Args
   );
}

你可以注意到，我添加了wp_enqueue_script（'media-upload'）;和wp_enqueue_media（）;排队媒体库弹出脚本。

最后，这里是js脚本，它将调用WordPress媒体库弹出窗口并将所选图像放入输入字段：

public function scripts()
{
   wp_enqueue_script( 'media-upload' );
   wp_enqueue_media();
   wp_enqueue_script('our_admin', get_template_directory_uri() . '/assets/js/our_admin.js', array('jquery'));
}

现在比较您的代码，您将看到错误。

我建议使用插件来显示作者信息，以节省您的时间。

自定义小部件图像上载问题

1 个答案: