先看看这款主题的样子

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. 到仪表盘-> 幻灯片下 创建三篇文章,文章中设置特色图像,特色图像就是幻灯片中显示的图片。保存,大功告成。