如果你想让你的 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%20bloginfo('template_url');%20?>/orbit-1.2.3.css">
<script type="text/javascript" src="<?php%20bloginfo('template_url');%20?>/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<?php%20bloginfo('template_url');%20?>/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，可以在这个文件中修改其他样式。

大功告成！