非插件实现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

下载完毕后请把这些文件上传到主题根目录下,比如/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张图片,请根据需要修改,增加图片只需要另起一行再加个<img>标签即可。你也可以加入超链接,比如<a href=”#”><img src=”1.jpg”></a>。

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

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

第三步:修改幻灯片样式

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

大功告成!



58 thoughts on “非插件实现WordPress首页幻灯片

  1. Pingback: satellite service
  2. 博主你好,我在本地测试,装上后 一直loading 黑屏缓冲,看到下面有人反馈一样的问题,请博主讲讲解决的办法,多谢~!

  3. 博主你好 我用的这个方法 不过我加了图片链接之后图片有点重叠 不知道怎么回事 望指导一下 谢谢 我的站www.luuoo.com QQ1446002001.
    这是我调用图片的一段代码


  4. LZ,我按照你这个设置了,但是还有点问题。希望指点!能不能加我Q843391633

  5. 我想的是后台要可以换图片的,而不是写死的,还得通过ftp换图片的。如果是手动写的那么什么样的幻灯片都可以做了,客户要能在后台改的!

  6. 我是本地测试,为什么装上后 一直loading 黑屏缓冲, 我以为是图片问题。换了链接图片地址。一样缓冲
    请楼主帮忙啊。我的QQ33372629 谢谢了

  7. 为什么加入这段代码后,幻灯片效果出来了,但是非常的小,像缩略图一样

  8. 老大,安你的方法做了 只是显示出四个图片 没有幻订效果 怎么搞的啊, ,我也很想要个幻灯片。。嘎嘎 。 。

  9. 这两天在wp上用这个的时候碰到问题,就是一直都是停留在loading的样子,图片不加载,不知道怎么回事。查了官网上的doc也没有这方面的说明。以前用easyslider,不过看这个觉得更酷些。没想到搞了半天都没搞懂什么问题。还望赐教。

    谢谢

    • 我的也是。一直黑色 等待中、找了半天的原因到现在都还没搞定郁闷了。有木有大侠能指教一下!先3Q了!

      • 我也是一直在loading,感觉是图片地址那块出问题了,应该是找不到图片吧。不知道博主能否详细的说一下:

        这个地方图片要存在什么路径下才可以被找到

发表评论

电子邮件地址不会被公开。 必填项已用*标注