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

這篇文章介紹的方法是將orbit幻燈片插件整合到wordpress主題中，orbit是一款基于jquery的輕巧型幻燈片展示工具。本次介紹的方法僅僅是幻燈片，并不能實(shí)現(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 bloginfo('template_url'); ?>/orbit-1.2.3.css>

<script type=text/javascript src=<?php bloginfo('template_url'); ?>/jquery-1.5.1.min.js></script>

<script type=text/javascript src=<?php bloginfo('template_url'); ?>/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)成功運(yùn)行了，你現(xiàn)在需要修改它的大小及其他樣式。打開第一步中上傳的文件中的orbit-1.2.3.css，其中第二行和第三行就是幻燈片的高度和寬度，如果你懂得css，可以在這個文件中修改其他樣式。

大功告成！