WordPress网站侧边栏添加幻灯片功能教程（纯代码版）

地球人都知道，很多WordPress主题网站，在头部都有图片轮播的幻灯片功能，在上一篇讲解到在网站的文章页也可以设置图片轮播的幻灯片功能，详情：WordPress网站文章页中添加幻灯片功能的使用教程（带演示）

其实WordPress网站侧边栏也是可以实现幻灯片功能的。是不是很少见？少见就是特色，学会了就是你的特色。本文明月SEO将以本网站主题为例详细说明WordPress网站侧边栏怎么添加幻灯片功能（纯代码版）

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

博客网站主题首页的幻灯片功能及代码做一些修改后能否直接迁移到侧边栏呢？答案是肯定的，也确实需要修改一些小参数。

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

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

$(document).ready(function() {     $("#slider1").responsiveSlides({         auto: true,         pager: true,         speed: 800,         maxwidth: 300     }); });

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

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

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

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

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

#sidebar #slideshow1 ul{padding:0;} #sidebar #slideshow1 .rslides_tabs{display:none;}

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

<div id="slideshow1" class="wow fadeInUp" data-wow-delay="0.3s"> <ul id="slider1" class="rslides" >     <li><a title="人人都会SEO——明月SEO【著】" href="https://www.rrdsyy.com/iwillseo/" target="_blank"><img src="https://www.rrdsyy.com/wp-content/uploads/2017/02/brightmoonseo.png"></a></li>     <li><a title="明月SEO原创SEO基础系统教程" href="https://www.rrdsyy.com/basic" target="_blank"><img src="https://www.rrdsyy.com/wp-content/uploads/2017/02/brightmoonseo.png"></a></li>     <li><a title="你看不到精品SEO教程" href="https://www.rrdsyy.com/advanced" target="_blank"><img src="https://www.rrdsyy.com/wp-content/uploads/2017/02/brightmoonseo.png"></a></li> </ul> </div>

TIPS：

1.图片大小多少最合适？宽：300PX，高：250PX

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

3.完成以上四个步骤后刷新网站，即可看到刚才添加的侧边栏图片带有幻灯片功能了，具体效果请看明月SEO侧边栏图片轮播显示效果。

至此，我们完成了网站文章页的轮播图功能和网站侧边栏的轮播图功能，让网站更具特色，更美观，更具有表现力。

其实根据明月SEO经验，让网站更美观，还有其他的方法，比如每个网站栏目名的前面都搭配有一个对应的个性图标，是不是看起来更专业，更美观？详情请移步：WordPress网站导航的个性化栏目图标设置使用教程