先看看這款主題的樣子

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. 到儀表盤-> 幻燈片下 創建三篇文章,文章中設置特色圖像,特色圖像就是幻燈片中顯示的圖片。保存,大功告成。