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

boyanx5个月前技术教程15

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

相关文章

python下又一款漂亮超炫酷的动态数据可视化工具——可动态交互

python下有很多漂亮的数据可视化库,例如 Matplotlib、Seaborn、Bokeh、Plotly、Pyecharts等等,我们直接使用这些第三方库来进行漂亮的数据可视化操作。虽然这些库都可...

V5验证码最新wss协议逆向分析(web验证码什么原理)

本文章中的所有内容仅供学习交流使用,不得用于任何其他目的。文中不会提供完整的代码、敏感网址、数据接口等信息,均已进行脱敏处理。严禁将本文内容用于商业或非法用途,否则由此产生的任何后果均与作者无关。如有...

微信小程序入门1(微信小程序入门指南)

第一天-------运行第一个小程序一、前言从今天开始小编将带大家一起来学习微信小程序的开发,作为依托于微信的产品,微信小程序的热度的确是不容忽视的,而且推广的话也会有很多优势,毕竟不用像app一样要...

小程序-如何获取用户表单控件中的值

背景在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有:switch,input,checkbox,slider,radio,picker)等,通过触发事...

Qt开源作品5-仪表盘交互(qt 图表控件)

## 一、前言Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不...

Python与数据可视化:Dash框架入门

Dash 是一个用于创建交互式 Web 应用程序的 Python 框架,它非常适合用于数据分析和可视化的项目。Dash 基于 Flask、Plotly.js 和 React.js 构建,因此可以轻松地...

发表评论    

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