纯代码实现wordpress小工具幻灯片轮播图片功能

纯代码实现wordpress小工具幻灯片轮播图片功能

wordpress小工具的功能开发一直是被各位主题大佬所忽略的宝地,wordpress的核心重点除了主题和插件外,另一个值得去挖掘的选项就是小工具,小工具的功能可以二次拓展和开发,是不可多得的网站功能拓展项的核心功能运用区域,给大家分享一组可以运用wordpress小工具实现的轮播幻灯片功能,可以任意添加在主题的侧边栏位置,方便调整位置及自定义链接及图片,适合有开发基础的wordpresser使用和尝试,和大多数的功能增强一样,只需要把下面这段代码复制到wordpress主题的funionst.php文件中即可。


class Yu_banner extends WP_Widget { //继承了 WP_Widget 这个类来创建新的小工具(Widget)  
    function Yu_banner() {  
        // 主要内容方法 
        $widget_ops = array(
              'description' => '添加幻灯片'
          );
        $control_ops = array(
          'width' =>400,
          'height' =>300
        );
       parent::WP_Widget(false,$name='Yu幻灯片',$widget_ops,$control_ops);
        //parent::直接使用父类中的方法  
        //$name 这个小工具的名称,  
        //$widget_ops 可以给小工具进行描述等等。  
        //$control_ops 可以对小工具进行简单的样式定义等等。  
    }  
    function form($instance) {  
         // 给小工具(widget) 添加表单内容
         $nav1_link = $instance['nav1_link'];
         $nav1_title = $instance['nav1_title'];
 
         $nav2_link = $instance['nav2_link'];
         $nav2_title = $instance['nav2_title'];
 
         $nav3_link = $instance['nav3_link'];
         $nav3_title = $instance['nav3_title'];
 
         $nav4_link = $instance['nav4_link'];
         $nav4_title = $instance['nav4_title'];
 
         ?>
          <label>
            <h4>幻灯片1</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav1_link'); ?>" name="<?php echo $this->get_field_name('nav1_link'); ?>"
            value="<?php echo esc_attr($nav1_link); ?>"/>
          
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav1_title'); ?>" name="<?php echo $this->get_field_name('nav1_title'); ?>"
            value="<?php echo esc_attr($nav1_title); ?>"/>
            <span>*幻灯片标题</span>
          </label>
 
          <label>
            <h4>幻灯片2</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav2_link'); ?>" name="<?php echo $this->get_field_name('nav2_link'); ?>"
            value="<?php echo esc_attr($nav2_link); ?>"/>
       
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav2_title'); ?>" name="<?php echo $this->get_field_name('nav2_title'); ?>"
            value="<?php echo esc_attr($nav2_title); ?>"/>
            <span>*幻灯片标题</span>
          </label>
 
          <label>
            <h4>幻灯片3</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav3_link'); ?>" name="<?php echo $this->get_field_name('nav3_link'); ?>"
            value="<?php echo esc_attr($nav3_link); ?>"/>
           
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav3_title'); ?>" name="<?php echo $this->get_field_name('nav3_title'); ?>"
            value="<?php echo esc_attr($nav3_title); ?>"/>
          
            <span>*幻灯片标题</span>
          </label>
 
          <label>
            <h4>幻灯片4</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav4_link'); ?>" name="<?php echo $this->get_field_name('nav4_link'); ?>"
            value="<?php echo esc_attr($nav4_link); ?>"/>
            <span>*幻灯片链接</span>
 
            <input type="text" id="<?php echo $this->get_field_id('nav4_title'); ?>" name="<?php echo $this->get_field_name('nav4_title'); ?>"
            value="<?php echo esc_attr($nav4_title); ?>"/>
            <span>*幻灯片标题</span>
          </label>
 
          <?php wp_enqueue_media(); ?>
          <script>   
          jQuery(document).ready(function(){   
          var ashu_upload_frame;   
          var value_id;   
          jQuery('.ashu_upload_button').live('click',function(event){   
              value_id =jQuery( this ).attr('id');       
              event.preventDefault();   
              if( ashu_upload_frame ){   
                  ashu_upload_frame.open();   
                  return;   
              }   
              ashu_upload_frame = wp.media({   
                  title: 'Insert image',   
                  button: {   
                      text: 'Insert',   
                  },   
                  multiple: false   
              });   
              ashu_upload_frame.on('select',function(){   
                  attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
                  //jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');   
                  jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');   
              });   
                 
              ashu_upload_frame.open();   
          });   
          });   
    </script>
 
         <?php
 
 
    }  
    function update($new_instance, $old_instance) {  
         // 进行更新保存  
        $instance = $old_instance;
        $instance[ 'nav1_link' ] = strip_tags( $new_instance[ 'nav1_link' ] );
        $instance[ 'nav1_title' ] = strip_tags( $new_instance[ 'nav1_title' ] );
 
        $instance[ 'nav2_link' ] = strip_tags( $new_instance[ 'nav2_link' ] );
        $instance[ 'nav2_title' ] = strip_tags( $new_instance[ 'nav2_title' ] );
 
        $instance[ 'nav3_link' ] = strip_tags( $new_instance[ 'nav3_link' ] );
        $instance[ 'nav3_title' ] = strip_tags( $new_instance[ 'nav3_title' ] );
 
        $instance[ 'nav4_link' ] = strip_tags( $new_instance[ 'nav4_link' ] );
        $instance[ 'nav4_title' ] = strip_tags( $new_instance[ 'nav4_title' ] );
        return $instance;  
    }
 
    function widget($args, $instance) {  
        // 输出显示在页面上  
         $nav1_link = $instance['nav1_link'];
         $nav1_title = $instance['nav1_title'];
 
         $nav2_link = $instance['nav2_link'];
         $nav2_title = $instance['nav2_title'];
 
         $nav3_link = $instance['nav3_link'];
         $nav3_title = $instance['nav3_title'];
 
         $nav4_link = $instance['nav4_link'];
         $nav4_title = $instance['nav4_title'];
 
        ?>
          <div id="zSlider" >
            <div id="picshow">
    <div id="picshow_img">
        <ul>
<li style="display: list-item;"><a href="/life/361.html" target="_blank">
                <img src="<?php echo $nav1_link;?>" alt="<?php echo $nav1_title;?>"></a></li>
<li style="display: list-item;"><a href="/life/394.html" target="_blank">
                <img src="<?php echo $nav2_link;?>" alt="<?php echo $nav2_title;?>"></a></li>
<li style="display: list-item;"><a href="/life/364.html" target="_blank">
                <img src="<?php echo $nav3_link;?>" alt="<?php echo $nav3_title;?>"></a></li>
<li style="display: list-item;"><a href="/gear/rs/320.html" target="_blank">
                <img src="<?php echo $nav4_link;?>" alt="<?php echo $nav4_title;?>"></a></li>
 
 
 
        </ul>
    </div>
</div>
<div id="select_btn">
    <ul>
        <li class="current"></li><li class=""></li><li class=""></li><li class=""></li>
    </ul>
</div>
            <div class="focus-bg-title"><div id="focus-left" class="arrow-left" onmouseover="IFocuse(this,true)" onmouseout="IFocuse(this,false)"></div>
            <div id="focus-center" class="focus-title">
            <div style="float:left;width:580px;padding-left:10px;font-size:18px;" id="focus-tl-s"></div>
            <div style="float:right;width:200px;"></div>
            </div>
            <div id="focus-right" class="arrow-right"></div></div>
            </div>
        <?php
    }  
}

本文来自wazhuti.com

微信公众号:rizhuti
关注我们,获取更多的全网素材资源,有趣有料!
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏