如果你想让你的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，那么你可能不需要它。最后是一包图片，里面是幻灯片展示用到的一些图标。
下载完毕后请把这些文件上传到主题根目录下，比如/wp-content/themes/inove/
第二步：添加代码
一般幻灯片只需要在首页显示，因此我们只需要修改主题的index.php文件（有些主题首页模板可能不是index.php）。
打开index.php文件后，在需要添加幻灯片的地方加上以下代码：
代码说明：
1.以上代码中的
。
2.第一行代码是加载jquery库，如果你的主题中已经加载了jquery，那么你可以将第一行删除。
3.所需要展示的图片最好是尺寸全都一致的。
第三步：修改幻灯片样式
此时幻灯片应该已经成功运行了，你现在需要修改它的大小及其他样式。打开第一步中上传的文件中的orbit-1.2.3.css，其中第二行和第三行就是幻灯片的高度和宽度，如果你懂得CSS，可以在这个文件中修改其他样式。
大功告成！
转载请保留链接：https://ilovetile.sijie.wang/1831/ 感谢您对版权的尊重
58 thoughts on “非插件实现WordPress首页幻灯片”
Comments are closed.
这个不错啊，收藏了，以后用到了试试看。
EinCy 对前端也比较擅长啊
这个不错，以后试试…
你的幻灯片呢？我没看到
@囧啊囧at下载盒子 额我这边没放
我的网站首页不是php的该怎么该啊
以前超级喜欢首页幻灯片，后来淡定了，除非内容需要。
@Hello Beautiful CMS站点比较需要吧
很不错，可以尝试下！
收藏一下以备不是只需
收藏进去了，以后说不定会用到
不只是博客才能用嘛…藏之
有空改造下用到别处~
@whisperer 嗯啊，很多地方都可以用到
不错啊，嘿嘿
好办法，这样可以减轻服务器负担~
@Dick_Wu 哈哈我到没想到这个优点。。
首页幻灯片有的话还是挺好看的，炫
不错啊收藏了
再来看看博主的文章。希望博主更新文章
东篱桃源祝博主感恩节快乐啊
不错哈~一直想找个能用的，以前都是不怎么好整进去….
@蝎紫 嘿嘿
我是懒人 ！！
@vaman 我爱折腾
谢谢博主的分享..
我是直接用一个jquery幻灯代码加上WP的自定义域实现的····
跟你的方法基本一样··
博主对WordPress插件研究的挺透彻,我也正在研究这个呢~~~~“
@nsis error 呵呵，平时没事总爱折腾
现在我首页就是内置的JQ的幻灯片。。。呵呵，，效果还可以，还有3D的。。
好像是不兼容的呢？Note: Works best in Chrome, Safari, FF3.5+ (but is tested for IE7+, FF3.5+, Chrome and Safari)
不错哦！！学习个哈嘿嘿！！！
这两天在wp上用这个的时候碰到问题，就是一直都是停留在loading的样子，图片不加载，不知道怎么回事。查了官网上的doc也没有这方面的说明。以前用easyslider，不过看这个觉得更酷些。没想到搞了半天都没搞懂什么问题。还望赐教。
谢谢
同感。我的也一样，黑色。。一直loading…
我的也是。一直黑色 等待中、找了半天的原因到现在都还没搞定郁闷了。有木有大侠能指教一下！先3Q了！
我也是一直在loading,感觉是图片地址那块出问题了，应该是找不到图片吧。不知道博主能否详细的说一下：
这个地方图片要存在什么路径下才可以被找到
@oliver 任意可以访问的路径
老大，安你的方法做了 只是显示出四个图片 没有幻订效果 怎么搞的啊， ，我也很想要个幻灯片。。嘎嘎 。 。
@阿辉 可能是哪个地方代码弄错了
为什么加入这段代码后，幻灯片效果出来了，但是非常的小，像缩略图一样
额..那个路径在哪儿修改啊？？ 新手求指教
我是本地测试，为什么装上后 一直loading 黑屏缓冲， 我以为是图片问题。换了链接图片地址。一样缓冲
请楼主帮忙啊。我的QQ33372629 谢谢了
我想的是后台要可以换图片的，而不是写死的，还得通过ftp换图片的。如果是手动写的那么什么样的幻灯片都可以做了，客户要能在后台改的！
@[京]飞翔 那你就必须使用插件了，这类插件很多。
不错啊，最近一直在找这样的功能代码。插件虽然好用，不过定制性比较差，还是自己弄的比较好。
@侯永禄 不过定制性的比较麻烦，需要慢慢折腾
LZ，我按照你这个设置了，但是还有点问题。希望指点！能不能加我Q843391633
博主你好 我用的这个方法 不过我加了图片链接之后图片有点重叠 不知道怎么回事 望指导一下 谢谢 我的站www.luuoo.com QQ1446002001.
这是我调用图片的一段代码
现在才看到，你解决了吗
http://www.littlish.com/ 非常好
博主你好，我在本地测试，装上后 一直loading 黑屏缓冲，看到下面有人反馈一样的问题，请博主讲讲解决的办法，多谢~！
你好，具体问题可以发Email联系哦，wangsijie93[at]qq.com