先看看這款主題的樣子

Twentyeleven修改後的樣子

如果在網站頭部和選單之間再加一個幻燈片,就失去了這款主題簡潔的優勢,索性直接將頭部改成幻燈片,讓網站 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!

建立幻燈片

安裝主題後,後臺會出現一個新的選單項叫做 「幻燈片」,點選 「寫文章」 建立一個幻燈片,文章的特色影像就是幻燈片的圖片。每篇文章設定一個幻燈片,假設我們要設定三幅圖片切換,那麼建立三篇 「幻燈片」 型別的文章。

建立幻燈片

如果操作成功,那麼重新整理首頁就可以看到幻燈片切換效果了。

幻燈片切換

修改步驟概述

  1. 在主題的 functions.php 中註冊新的 post type,就起名叫 「幻燈片」,經過這一步,後臺會出現一個選單項叫幻燈片,使用方法與編輯文章類似。
  2. 幻燈片用 Nivo Slider,之前收集了 17 款 Nivo Slider 皮膚,這下派上用場了,選擇一款皮膚,將要用到的 js 檔案複製到主題的 js 目錄下 (建立一個 js 目錄),將用到的圖片複製到主題的 images 目錄下,將幻燈片的 CSS 複製到主題的 style.css 中。
  3. 主題目錄下建立一個檔案叫 slider.php,這個檔案產生 Nivo Slider 需要的 HTML 結構,它會讀取使用者建立的幻燈片文章,輸出幻燈片的 HTML 程式碼,並初始化幻燈片。
  4. 修改主題的 header.php,在適當位置引入 slider.php 檔案。
  5. 到儀表盤-> 幻燈片下 建立三篇文章,文章中設定特色影像,特色影像就是幻燈片中顯示的圖片。儲存,大功告成。