如果你想讓你的 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，可以在這個文件中修改其他樣式。

大功告成！