如果你想讓你的WordPress站點有CMS的風(fēng)格，首頁幻燈片肯定是必須的。實現(xiàn)WordPress首頁幻燈片的插件有很多，比如D13Slideshow就很好用。但幻燈片往往是嵌入到主題中的，因此非插件可能會比較合適。

這篇文章介紹的方法是將Orbit幻燈片插件整合到WordPress主題中，Orbit是一款基于jquery的輕巧型幻燈片展示工具。本次介紹的方法僅僅是幻燈片，并不能實現(xiàn)自動從WordPress中獲取圖片，想要添加或修改這個幻燈片的內(nèi)容，你只能手動修改代碼。

這個幻燈片的效果預(yù)覽請到Orbit官網(wǎng)：http://www.zurb.com/playground/jquery_image_slider_plugin

第一步：下載所需文件

我們需要3個文件和一包圖片，這三個文件包括Orbit的js文件和CSS，還有一個是jquery-1.5.1.min，如果你的主題中已經(jīng)調(diào)用了jquery，那么你可能不需要它。最后是一包圖片，里面是幻燈片展示用到的一些圖標(biāo)。

下載地址：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”>這句之后的便是要展示的圖片，這里假設(shè)是url分別為1.jpg、2.jpg、3.jpg的3張圖片，請根據(jù)需要修改，增加圖片只需要另起一行再加個

標(biāo)簽即可。你也可以加入超鏈接，比如<a? href=”#”><img src=”1.jpg”></a>。

2.第一行代碼是加載jquery庫，如果你的主題中已經(jīng)加載了jquery，那么你可以將第一行刪除。

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

第三步：修改幻燈片樣式

此時幻燈片應(yīng)該已經(jīng)成功運行了，你現(xiàn)在需要修改它的大小及其他樣式。打開第一步中上傳的文件中的orbit-1.2.3.css，其中第二行和第三行就是幻燈片的高度和寬度，如果你懂得CSS，可以在這個文件中修改其他樣式。

大功告成！