教你纯代码实现wordpress主题幻灯片轮播图片功能小工具
wordpress小工具的功能开发一直是被各位主题大佬所忽略的宝地，wordpress的核心重点除了主题和插件外，另一个值得去挖掘的选项就是小工具，小工具的功能可以二次拓展和开发，是不可多得的网站功能拓展项的核心功能运用区域，今天测速网给大家分享一组可以运用wordpress小工具实现的轮播幻灯片功能，可以任意添加在主题的侧边栏位置，方便调整位置及自定义链接及图片，适合有开发基础的wordpresser使用和尝试，和大多数的功能增强一样，只需要把下面这段代码复制到wordpress主题的funionst.php文件中即可。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178class 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 ><a href="/life/361.html" target="_blank"><img src="<?php%20echo%20$nav1_link;?>" alt="<?php echo $nav1_title;?>"></a></li><li ><a href="/life/394.html" target="_blank"><img src="<?php%20echo%20$nav2_link;?>" alt="<?php echo $nav2_title;?>"></a></li><li ><a href="/life/364.html" target="_blank"><img src="<?php%20echo%20$nav3_link;?>" alt="<?php echo $nav3_title;?>"></a></li><li ><a href="/gear/rs/320.html" target="_blank"><img src="<?php%20echo%20$nav4_link;?>" alt="<?php echo $nav4_title;?>"></a></li> </ul></div></div><div id="select_btn"><ul><li ></li><li ></li><li ></li><li ></li></ul></div><div ><div id="focus-left" onmouseover="IFocuse(this,true)" onmouseout="IFocuse(this,false)"></div><div id="focus-center" ><div id="focus-tl-s"></div><div ></div></div><div id="focus-right" ></div></div></div><?php}}上一篇：如何删除wordpress新窗口打开链接中的rel=”noopener” 属性
wordpress主题
声卡驱动正常但是没有声音如何办？声卡驱动正常没声音的解决方法
英伟达显卡驱动如何退回到原来版本？英伟达显卡驱动退回到原来版
重装系统，电脑只有一个C盘如何创建分区
Defender提示错误应用程序MsMpEng.exe无法启动
电脑无法启动或仍在加载如何办？电脑无法启动或仍在加载的解决方
打印机驱动如何卸载删除？卸载打印机驱动干净的教程
电脑没网如何安装网卡驱动？教你没网如何安装网卡驱动的方法
系统32位和62位如何选择：详解它们之间的差异
电脑文件删不掉如何办？四种方法解决
任务管理器快捷键有哪些？任务管理器快捷键大全