WordPress记录———自定义小工具自定义图片

        如上图，我在WordPress中前台自定义中的小工具里设置轮播图，根据自己需求增加图片数量，添加图片时js有点问题，点击上传，选择图片之后确实显示了，但是却没有触发隐藏input的change事件，搞了好久才发现这个问题，jQuery("input[name='"+button_id+"']").trigger('change');//只有触发change事件才会更新。

        自己创建的添加轮播图小工具。原本想在模板中增加的，结果技术不够，实现不了TT。下面记录下这个轮播图代码form()中的:

    function form($instance){
        $instance = wp_parse_args((array)$instance,array('lunbo_image_url'=>'','lunbo_image_link'=>''));//默认值
        $lunbo_image_url = htmlspecialchars($instance['lunbo_image_url']);
        $lunbo_image_link = htmlspecialchars($instance['lunbo_image_link']);

        wp_enqueue_media();
        ?>

        <div class="custom-img-container" id="<?php echo $this->get_field_name('lunbo_image_url'); ?>">
            <?php if ( !empty($lunbo_image_url) ) : ?>
                <img src="<?php echo $lunbo_image_url ?>" alt="" style="max-100%;" />
            <?php endif; ?>
        </div>

        <p style="text-align:left;"><label for="<?php echo $this->get_field_name('lunbo_image_link'); ?>">轮播图链接：<input id="<?php echo $this->get_field_id('lunbo_image_link'); ?>" class="lunbo-image-link" name="<?php echo $this->get_field_name('lunbo_image_link'); ?>" type="text" value="<?php echo esc_attr($lunbo_image_link); ?>" /></label></p>

        <input type="hidden" value="<?php echo esc_attr($lunbo_image_url); ?>" name="<?php echo $this->get_field_name('lunbo_image_url'); ?>" class="lunbo-image-url" id="<?php echo $this->get_field_id('lunbo_image_url'); ?>"/>
        <p style="text-align:left;"><label for="<?php echo $this->get_field_name('lunbo_image_url'); ?>"><a id="<?php echo $this->get_field_name('lunbo_image_url'); ?>" class="upload-custom-img button" href="#">上传</a></label></p>
        <p>
        <?php $admin_url=admin_url( 'admin-ajax.php' ); ?>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                var lunbo_image_frame;
                var button_id;
                jQuery('.upload-custom-img').on('click',function(event){
                    button_id =jQuery( this ).attr('id');
                    jQuery("input[name='"+button_id+"']").val('');
                    jQuery("div[id='"+button_id+"']").empty();
                    event.preventDefault();
                    if( lunbo_image_frame ){
                        lunbo_image_frame.open();
                        return;
                    }
                    lunbo_image_frame = wp.media({
                        title: '添加轮播图',
                        button: {
                            text: '添加',
                        },
                        multiple: false
                    });

                    lunbo_image_frame.on('select',function(){
                        attachment = lunbo_image_frame.state().get('selection').first().toJSON();
                        jQuery("input[name='"+button_id+"']").val(attachment.url);
                        jQuery("div[id='"+button_id+"']").append( '<img src="'+attachment.url+'" alt="" style="max-100%;"/>' );
                        jQuery("input[name='"+button_id+"']").trigger('change');//只有触发change事件才会更新
                        lunbo_image_frame.close();
                    });
                    lunbo_image_frame.open();
                });   
            }); 
        </script>
        <?php

    }

         另附加上自定义小工具学习链接：http://www.ashuwp.com/courses/noplugin/148.html  地址2：http://yangjunwei.com/a/856.html