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

boyanx2周前技术教程4

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

标签: slider.js

相关文章

只需5分钟!教你快速上手Weex(只需5分钟!莲都进入换证高峰,赶快试一下这个)

关于Weex的介绍已经毋须多言,今天,我们带给大家的是如何快速上手Weex。我们以实例的方式呈现给大家,使用Weex编写一个简单的列表,这样的列表经常能在电商类移动应用中见到。开始我们先编写一个列表项...

就算你不会 Web 开发,也能让数据“动”起来的开源项目

本文面向有 Python 基础的小伙伴,有 Web 基础的更好作者:HelloGitHub-吱吱这里是 HelloGitHub 推出的《讲解开源项目》系列,今天要向小伙伴们介绍的是一个能够快速地把数据...

微场景快速搭建方案:触景js发布1.3版本

切图触景JS发布,新增了手指触摸的刮刮卡效果组件QietuSwiperMask,放弃了对原生jQuery.mobile改造的swipeup,swipedown函数,采用了开源的触摸插件jquery.t...

基于vue实现可视化拖拽编辑器,页面生成工具,提升前端开发效率

项目介绍基于vue实现的可视化拖拽编辑器,实现页面生成工具,提升前端开发效率。可以基层到移动端项目作为自定义json直接生成UI页面。项目特点功能特点页面管理页面设置组件管理组件设置数据导入导出预览重...

后端接活儿利器:基于Vue,拖拽一键生成UI界面,简洁漂亮已开源

简介基于vue可视化拖拽编辑,页面生成工具。提升前端开发效率,可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。安装教程npm install (安装 node_modules 模块)n...

Photoshop插件-晕影动态-选区-脚本开发-PS插件

PS是一款栅格图像编辑软件,模块众多。提供了脚本,动态连接库等多种扩展机制,本文演示如何通过脚本实现晕影动态和选区相关功能,展示从互联网收集而来的一个小插件,供大家学习交流,请勿用于商业用途。1.插件...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。