先看看这款主题的样子
如果在网站头部和菜单之间再加一个幻灯片,就失去了这款主题简洁的优势,索性直接将头部改成幻灯片,让网站 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 文件。
- 到仪表盘-> 幻灯片下 创建三篇文章,文章中设置特色图像,特色图像就是幻灯片中显示的图片。保存,大功告成。