Fotorama是一款响应式jQuery焦点图轮播幻灯片切换插件。Fotorama，支持缩略图播放、全屏查看、支持视频、图片、HTML内容、支持图片延迟加载、支持缩略图显示位置定义、支持自动播放以及循环播放、支持左右方向按键播放。本文将介绍如何将fotorama插件内嵌到wordpress里并使用他作为相册插件使用。
官方传送门：https://fotorama.io/
一、确保你的主题支持文章形式
确保你的主题支持文章形式，具体参见
《wordpress 让主题支持文章形式》
二、制作相册页
1、下载fotorama插件并在主题里引用js和CSS。
JS和CSS的加载，就不细说了，可以参照
《WordPress 加载Javascript和CSS的方法》
2、复制主题single.php页面，并将名称改为single-image.php
3、打开single-image.php将
php
<?php the_content();?>
增加外层DIV标签。像这样
php
<div class="fotorama" data-width="100%" data-ratio="820/600">
<?php the_content();?>
</div>
其中，data-width表示相册图片宽度，data-ratio表示图片高宽比，还可以data-nav="thumbs"来表示使用缩略图。
还有很多其他参数，详见官网
三、发表文章时选择图片样式
在写文章时选择图片样式。参照
《WordPress不同文章形式选择不同的文章模板》
并且确保图片是以链接形式的，像下面这样
html
<a href="/1-lo.jpg"><img src="/1-thumb.jpg"></a>
<a href="/2-lo.jpg"><img src="/2-lo.jpg"></a>
<a href="/3-lo.jpg"><img src="/3-lo.jpg"></a>
<a href="/4-lo.jpg"><img src="/4-lo.jpg"></a>
<a href="/5-lo.jpg"><img src="/5-lo.jpg"></a>
效果演示
