先看看這款主題的樣子
如果在網站頭部和菜單之間再加一個幻燈片,就失去了這款主題簡潔的優勢,索性直接將頭部改成幻燈片,讓網站 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 文件。
- 到儀表盤-> 幻燈片下 創建三篇文章,文章中設置特色圖像,特色圖像就是幻燈片中顯示的圖片。保存,大功告成。