分享不用插件实现wordpress首页幻灯片效果
来源:易贤网 阅读:955 次 日期:2016-06-21 08:50:19
温馨提示:易贤网小编为您整理了“分享不用插件实现wordpress首页幻灯片效果”,方便广大网友查阅!

如果你想让你的wordpress站点有cms的风格,首页幻灯片肯定是必须的。实现wordpress首页幻灯片的插件有很多,比如d13slideshow就很好用。但幻灯片往往是嵌入到主题中的,因此非插件可能会比较合适。

这篇文章介绍的方法是将orbit幻灯片插件整合到wordpress主题中,orbit是一款基于jquery的轻巧型幻灯片展示工具。本次介绍的方法仅仅是幻灯片,并不能实现自动从wordpress中获取图片,想要添加或修改这个幻灯片的内容,你只能手动修改代码。

这个幻灯片的效果预览请到orbit官网:http://www.zurb.com/playground/jquery_image_slider_plugin

第一步:下载所需文件

我们需要3个文件和一包图片,这三个文件包括orbit的js文件和css,还有一个是jquery-1.5.1.min,如果你的主题中已经调用了jquery,那么你可能不需要它。最后是一包图片,里面是幻灯片展示用到的一些图标。

下载地址:orbit-for-wordpress.zip (23)

下载完毕后请把这些文件上传到主题根目录下,比如/wp-content/themes/inove/

第二步:添加代码

一般幻灯片只需要在首页显示,因此我们只需要修改主题的index.php文件(有些主题首页模板可能不是index.php)。

打开index.php文件后,在需要添加幻灯片的地方加上以下代码:

<link rel=stylesheet href=<?php bloginfo('template_url'); ?>/orbit-1.2.3.css>

<script type=text/javascript src=<?php bloginfo('template_url'); ?>/jquery-1.5.1.min.js></script>

<script type=text/javascript src=<?php bloginfo('template_url'); ?>/jquery.orbit-1.2.3.min.js></script>

<script type=text/javascript>

$(window).load(function() {

$('#featured').orbit();

});

</script>

<div id=featured>

<img src=/1.jpg />

<img src=/2.jpg />

<img src=/3.jpg />

</div>

代码说明:

1.以上代码中的<div id=featured>这句之后的便是要展示的图片,这里假设是url分别为1.jpg、2.jpg、3.jpg的3张图片,请根据需要修改,增加图片只需要另起一行再加个标签即可即可。你也可以加入超链接,比如<a href=#><img src=1.jpg></a>。

2.第一行代码是加载jquery库,如果你的主题中已经加载了jquery,那么你可以将第一行删除。

3.所需要展示的图片最好是尺寸全都一致的。

第三步:修改幻灯片样式

此时幻灯片应该已经成功运行了,你现在需要修改它的大小及其他样式。打开第一步中上传的文件中的orbit-1.2.3.css,其中第二行和第三行就是幻灯片的高度和宽度,如果你懂得css,可以在这个文件中修改其他样式。

大功告成!

更多信息请查看CMS教程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标