纯代码给WordPress侧边栏小工具添加幻灯片功能

yumo6662个月前 (03-16)技术文章11

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. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slides.js"></script>

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

  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后台 > 外观 > 小工具中为相应的侧边栏添加文本小工具,内容填入如下代码:

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

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

温馨提示:

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

相关文章

配色小白必看!这四个超经典的在线色彩网站,每个都好用到爆

如果你是配色小白,那么这篇文章真的对你超级有用!当然了,如果你对颜色的搭配有点研究的话,这篇文章也是对你会有不少帮助的!这里直接分享四个超级好用的在线色彩搭配网站,每一个都是提高你工作效率的绝对利器!...

全栈工程师的百宝箱:黑魔法之文档篇

今天收集Session数据的时候收集到了这样的一条,就是“全栈工程师的工具箱”。星期一又想不到什么可以写的内容,就来这样的一篇好了。以下的内容都是压箱底的,找个地方好好收藏。这篇是文档相关篇,介绍一些...

【AI工具】利用TRAE工具编写在线工具平台

# Trae 在线工具集系统说明文档1. 系统概述Trae是一个综合性的在线工具集系统,集成了多种实用工具,涵盖了日常办公、开发调试、文件处理等多个领域。系统采用前后端分离架构,提供直观的Web界面,...