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

大功告成！