在網(wǎng)上問了一些朋友說要給wordpress添加幻燈片功能一般是使用插件了，如果小編不想使用插件怎么辦呢？下面我來為各位介紹一個例子。

一些常見的網(wǎng)站都會有幻燈片，而且常在首頁展示，這樣網(wǎng)站就會顯得高端大氣很多。

峰尚今天給提供一個使用jQuery插件Orbit給wordpress添加幻燈片效果。

簡介:Orbit是一個設計良好并且容易使用的jQuery 圖片滑動幻燈片插件，它除了支持圖片滾動切換展示外，還支持針對內(nèi)容的滾動。插件的定制性相當高，它提供了多個參數(shù)的設置，通過設置你可以將它打造成完全符合你要求的樣式。 Orbit支持 IE7+, FF3.5+, Chrome、Safari 等瀏覽器，整個插件十分輕巧，僅僅4kb 左右，需要jQuery 1.5.1版本以上。

插件官方主頁

使用方法：

下載地址：官方下載文件

下載解壓后，將文件夾為orbit的放到WordPress 主題目錄下或自定義路徑。

1、主題加載jQuery 庫，注意是要1.5.1 版本以上的。

2、首先將下面的代碼放到主題的header.php中（建議加載方法）：

1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit/orbit-1.2.3.css"> 
2. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script> 
3. <script type="text/javascript"> 
4.     $(window).load(function() { 
5.         $('#featured').orbit(); 
6.     }); 
7. </script> 

3、HTML 部分。幻燈片一般都是在首頁加載的,對于WordPress 主題,可以通過if 語氣判斷是否在首頁來寫入html.

1. <?php if ( is_home() ){ ?> 
2. <div id="featured"> 
3.     <a href=”#”><img src="/banner1.jpg"  /></a> 
4.     <a href=”#”><img src="/banner2.jpg"  /></a> 
5.     <a href=”#”><img src="/banner3.jpg"  /></a> 
6.         <a href=”#”><img src="/banner4.jpg"  /></a> 
7. </div> //Vevb.com 
8. <?php } ?> 

對于上面的代碼,你需要做的很多,比如再添加一個幻燈片、比如鏈接的url、圖片的路徑等等,什么僅僅算是一個演示.

為了適合于你的主題,你可以通過orbit-1.2.3.css 修改相關(guān)代碼自定義樣式,比如寬高神馬的.

而對于幻燈片的相關(guān)參數(shù)設置,你可以去查閱官方文檔自行解決.

折騰這個需要你懂html、CSS,javascript 或者jquery 略懂一點就可以了,Jeff也是這樣水平~jquery 插件就是方便,不一定要你看懂代碼,會用就行.