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

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

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

第一步：下載所需文件

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

下載地址：orbit-for-wordpress.zip （23）

下載完畢后請(qǐng)把這些文件上傳到主題根目錄下，比如/wp-content/themes/inove/

第二步：添加代碼

一般幻燈片只需要在首頁(yè)顯示，因此我們只需要修改主題的index.php文件（有些主題首頁(yè)模板可能不是index.php）。

打開(kāi)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>

代碼說(shuō)明：

1.以上代碼中的<div id="featured">這句之后的便是要展示的圖片，這里假設(shè)是url分別為1.jpg、2.jpg、3.jpg的3張圖片，請(qǐng)根據(jù)需要修改，增加圖片只需要另起一行再加個(gè)標(biāo)簽即可即可。你也可以加入超鏈接，比如<a href="#"><img src="1.jpg"></a>。

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

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

第三步：修改幻燈片樣式

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

大功告成！

更多信息請(qǐng)查看IT技術(shù)專欄