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

转载 懿古今  2021-09-01 17:30  阅读 171 次
【阿里云】新老特惠,云服务器0元试用,首购低至0.9元/月起!

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

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

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

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

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

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

2、在Nana主题文件夹中的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、在Nana主题文件夹中的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="Nana主题专题文章——常见问题及个性化修改" href="https://www.yigujin.cn/nanazhuti/" target="_blank">
<img src="https://res.yigujin.cn/tp/2017/160818_nanaztcb.jpg"></a></li>   
 <li><a title="boke112导航发布的WordPress新手入门教程" href="https://www.yigujin.cn/tag/wordpressxinshourumenjiaocheng/" target="_blank">
<img src="https://res.yigujin.cn/tp/2017/160818_wordpress.jpg"></a></li>   
 <li><a title="Three主题和Unite主题常见问题解答及个性化修改" href="https://www.yigujin.cn/461.html" target="_blank"><img src="https://res.yigujin.cn/tp/2017/160818_cjwt.jpg"></a></li>
</ul>
</div>

PS:以上图片及链接地址可修改,如需要显示更多图片请看格式继续添加即可。(此文仅在本主题上操作,有需要的朋友可以借鉴!)

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

本文地址:https://8ik.cn/archives/70
关注我们:请关注一下我们的微信公众号:扫描二维码捌佰科的公众号,公众号:Hey_MrBoss
温馨提示:文章内容系作者个人观点,不代表捌佰科对观点赞同或支持。
版权声明:本文为转载文章,来源于 懿古今 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
【腾讯云】买云服务器,参与礼品兑换、抽奖,最高送价值8000元IPad,还有Bose耳机、千元京东卡等您来!

发表评论


表情