如果你想讓你的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 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">這句之后的便是要展示的圖片，這里假設是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，可以在這個文件中修改其他樣式。

大功告成！

更多信息請查看IT技術專欄