先看看這款主題的樣子
如果在網站頭部和選單之間再加一個幻燈片,就失去了這款主題簡潔的優勢,索性直接將頭部改成幻燈片,讓網站 Logo 和搜尋框懸浮在幻燈片上面。
示例主題下載
修改前:TwentyEleven Child Theme 已下載 696 次
增加幻燈片 [完成版]:TwentyEleven With Slideshow 已下載 2015 次
PS. 該主題已經更新為簡化版,移植到自己主題中的簡單步驟見下文引用文字
幻燈片圖片 (1000×165 畫素):幻燈片圖片 1000plus165 畫素 已下載 591 次
這兩個都是 TwentyEleven 的 Child Theme,安裝到後臺啟用主題即可。
如果你需要將幻燈片功能移植到自己的主題中
1. 將壓縮包中的 slideshow 資料夾複製到主題根目錄
2. 在主題的 functions.php 中新增程式碼
include "slideshow/slider-init.php";3. 在需要展示幻燈片的地方,例如 header.php 中,新增程式碼
include 'slideshow/slider.php';That's all!
建立幻燈片
安裝主題後,後臺會出現一個新的選單項叫做 「幻燈片」,點選 「寫文章」 建立一個幻燈片,文章的特色影像就是幻燈片的圖片。每篇文章設定一個幻燈片,假設我們要設定三幅圖片切換,那麼建立三篇 「幻燈片」 型別的文章。
如果操作成功,那麼重新整理首頁就可以看到幻燈片切換效果了。
修改步驟概述
- 在主題的 functions.php 中註冊新的 post type,就起名叫 「幻燈片」,經過這一步,後臺會出現一個選單項叫幻燈片,使用方法與編輯文章類似。
- 幻燈片用 Nivo Slider,之前收集了 17 款 Nivo Slider 皮膚,這下派上用場了,選擇一款皮膚,將要用到的 js 檔案複製到主題的 js 目錄下 (建立一個 js 目錄),將用到的圖片複製到主題的 images 目錄下,將幻燈片的 CSS 複製到主題的 style.css 中。
- 主題目錄下建立一個檔案叫 slider.php,這個檔案產生 Nivo Slider 需要的 HTML 結構,它會讀取使用者建立的幻燈片文章,輸出幻燈片的 HTML 程式碼,並初始化幻燈片。
- 修改主題的 header.php,在適當位置引入 slider.php 檔案。
- 到儀表盤-> 幻燈片下 建立三篇文章,文章中設定特色影像,特色影像就是幻燈片中顯示的圖片。儲存,大功告成。