北屋教程网

WordPress主题大多数都自带有幻灯片功能，不过很少看到有在WordPress侧边栏实现幻灯片功能的。今天，我们就以Nana主题为例说明纯代码如何给WordPress侧边栏小工具添加幻灯片功能。

WordPress侧边栏小工具添加幻灯片功能思路：

根据分析Nana主题首页的幻灯片功能及代码，认为这个幻灯片代码在侧边栏也是能够正常使用的，只需要修改一些小参数即可。

WordPress侧边栏小工具添加幻灯片功能步骤：

1、在Nana主题JS文件夹中找到slides.js文件，在文件最后添加以下代码并上传覆盖：

1. $(document).ready(function() {

2. $("#slider1").responsiveSlides({

3. auto: true,

4. pager: true,

5. speed: 800,

6. maxwidth: 300

7. });

8. });

2、在Nana主题文件夹中的header.php文件找到类似以下代码：

1. <?php if (is_home() ) { ?>

2. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slides.js"></script>

3. <?php } ?>

直接去除那个判断是否为首页的函数，即以上代码改为：

1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slides.js"></script>

3、在Nana主题文件夹中的style.css文件添加以下代码：

1. #sidebar #slideshow1 ul{padding:0;}

2. #sidebar #slideshow1 .rslides_tabs{display:none;}

4、在WordPress后台 > 外观 > 小工具中为相应的侧边栏添加文本小工具，内容填入如下代码：

1. <div id="slideshow1" class="wow fadeInUp" data-wow-delay="0.3s">

2. <ul id="slider1" class="rslides" >

3. <li><a title="Nana主题专题文章——常见问题及个性化修改" href="
   http://yigujin.wang/nanazhuti/" target="_blank"><img src="
   http://tp.yigujin.wang/160818_nanaztcb.jpg"></a></li>

4. <li><a title="boke112导航发布的WordPress新手入门教程" href="
   http://yigujin.wang/tag/wordpressxinshourumenjiaocheng/" target="_blank"><img src="
   http://tp.yigujin.wang/160818_wordpress.jpg"></a></li>

5. <li><a title="Three主题和Unite主题常见问题解答及个性化修改" href="
   http://yigujin.wang/461.html" target="_blank"><img src="
   http://tp.yigujin.wang/160818_cjwt.jpg"></a></li>

6. </ul>

7. </div>

PS：以上图片及链接地址可修改，如需要显示更多图片请看格式继续添加即可。

完成以上四个步骤后刷新网站，即可看到刚才添加的侧边栏图片带有幻灯片功能了，具体效果请看懿古今侧边栏第二个图片显示效果。

温馨提示：

Three主题和Unite主题实现侧边栏幻灯片功能的原理和步骤类似，请大家自行添加折腾。至于其他主题的，请根据主题的幻灯片功能及代码自行添加测试。