七牛镜像存储 WordPress 插件使用说明
七牛镜像存储WordPress插件是我基于七牛镜像存储功能做的一个WordPress 插件,它可以把你网站上的所有静态资源同步到七牛云存储上面,设置包括文章中的远程图片等,让你的网站实现一键加速。
在七牛设置云存储空间如果你还没有账号,请点击链接申请七牛的账号(http://wpjam.com/go/qiniu)。申请好之后,点击创建空间,假设我们的空间名为wptest:
空间类型选择“公开空间”,点击提交。
点击配置空间,七牛就会跳转到“空间设置”>“基本设置”页面:
在上面的页面中,我们知道我们的域名是wptest.qiniudn.com,当然我们也可
以申请绑定自己的域名(但是需要备案)。最后点击一键加速网站:
镜像源输入你博客的域名,然后点击确认即可。
七牛镜像云存储WordPress 插件设置
在七牛设置好之后,就可以安装和使用七牛镜像云存储的WordPress 插件了,
首先点击链接下载七牛镜像云存储的WordPress 插件
(http://downloads.wordpress.org/plugin/wpjam-‐qiniu.zip),并上传激活。
七牛设置
在WordPress 后台,点击“七牛云存储”>“基本设置”:
七牛绑定的域名:就是我们上面获取的:http://wptest.qiniudn.com。
*注意:如果博客安装的是在子目录下,比如
http://www.xxx.com/blog,这里
也需要带上子目录
/blog。比如:http://wptest.qiniudn.com/blog
七牛空间名:设置为我们一开始设置的wptest
ACCESS
KEY 和SCRET
KEY:可以在七牛后台>账户设置>密钥页面获取。
本地设置基本参考每个字段的说明即可,其中要解释下的:
静态文件域名:默认情况下这里就是你博客的首页地址,一般情况下你也不需
要改动。只有你图片的静态域名存储的域名和博客不同,需要通过该字段设置。
*使用该字段设置静态域名之后,请确保
JS
和
CSS
等文件也在该域名下,否则
将不会加速。
缩略图设置
*启动高级缩略图功能之后,文章获取缩略图的顺序为:
特色图片>标签缩略图>第一张图片>分类缩略图>默认缩略图。
启用高级缩略图,可以设置分类和标签缩略图:
还可以设置如果日志没有特色图片,没有第一张图片,也没用高级缩略图的情况
下所用的缩略图。可以填本地或者七牛的地址。
远程图片设置
由于用户博客内容中会引用其他远程的图片,根据镜像存储的规则,这部
分图片是不会缓存的,这个功能就是自动将远程图片镜像到七牛
*该功能需要你的博客支持固定链接。
*如果设置了静态文件域名,该功能可能会出错。
水印设置
我们可以使用七牛数据处理功能给博客文章内容中的图片设置水印。
更新文件
如果你希望在WordPress后台直接更新镜像到七牛的文件,只要在上面的七牛设置中输入七牛的
ACEESS KEY 和SECRETKEY,以及绑定的空间名。然后就可以在WordPress后台直接更新文件了:
注意这里更新文件,是在七牛删除文件,然后用户下次访问的时候再次镜像过去。
所以上面显示清理成功,就是更新成功,显示发生错误:nosuch file or directory,
意思是气牛没有该文件了,所以你无须再次清除。
如果你更新的时网站的CSS 和JS 文件,这里更新之后,可能再次打开你的博客
可能无法看到效果,这是因为你浏览器缓存了旧的CSS 和JS 文件,你需要清理
下浏览器的缓存,也可尝试点击下上面的“刷新本地JS 和CSS 浏览器缓存”
按钮。
使用七牛缩略图功能
我们知道七牛有很强大的缩略图功能,我爱水煮鱼首页和分类页的缩略图就是使用七牛的缩略图功能实现的。
虽然 WordPress 也有缩略图功能,但是相比之下,七牛强太多了,并且生成的缩略图都是尺寸适应的,并且都是在七牛云存储上面。
日志缩略图
所以我在七牛镜像云存储插件中也新增了 wpjam_post_thumbnail 函数帮你通过使用七牛的缩略图 API 直接生成缩略图,下面是使用方法:
1 2 3 4 5 |
<span class="token deliminator"><?php</span> <span class="token keyword">if</span><span class="token punctuation">(</span>wpjam_has_post_thumbnail<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token deliminator">?></span><span class="token markup"> <span class="token markup"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>"entry-thumb"</span><span class="token punctuation">></span></span> <span class="token operator"><</span>a href<span class="token operator">=</span>"</span><span class="token deliminator"><?php</span> the_permalink<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token deliminator">?></span><span class="token markup"><span class="token string">" title="</span></span><span class="token deliminator"><?php</span> the_title_attribute<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token deliminator">?></span><span class="token markup">"<span class="token operator">></span></span><span class="token deliminator"><?php</span> wpjam_post_thumbnail<span class="token punctuation">(</span><span class="token keyword">array</span><span class="token punctuation">(</span><span class="token number">150</span><span class="token punctuation">,</span><span class="token number">150</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token variable">$crop</span><span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token deliminator">?></span><span class="token markup"><span class="token markup"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token markup"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </span><span class="token deliminator"><?php</span> <span class="token punctuation">}</span> <span class="token deliminator">?></span> |
这个函数有两个参数:
- $size:设置缩略图的大小,它是一个数组,比如上面例子中就是设置缩略图大小为:宽是 150px,高也是 150px。
- $crop:设置是否裁剪缩略图,1为裁剪,如果为0,则只是按照最大边进行缩放,不进行裁剪。
另外这个函数相比 WordPress 默认的 the_post_thumbnail
函数相比还有一个强大的地方是,如果没有设置缩略图,它将自动获取第一张图片作为缩略图。
至于上面代码放到什么地方,我只能说你主题原来the_post_thumbnail()函数是在放到哪里,这个函数就放到哪里。
日志列表缩略图
相关日志:
1 |
wpjam_related_posts<span class="token punctuation">(</span><span class="token variable">$number</span><span class="token operator">=</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token variable">$args</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
在需要显示相关日志的地方插入以上模板函数,其中:
- $number:相关日志显示数量。
- $arg:相关日志显示的参数。
$arg 参数默认为:
1 2 3 4 5 6 7 8 |
<span class="token keyword">array</span><span class="token punctuation">(</span> <span class="token string">'class'</span><span class="token operator">=></span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">//外层ul的class。 </span><span class="token string">'thumb'</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">//是否带缩略图,默认带 </span><span class="token string">'size'</span> <span class="token operator">=></span> <span class="token string">'thumbnail'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">//缩略图大小 </span><span class="token string">'crop'</span><span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">//缩略图是否裁剪 </span><span class="token string">'thumb_class'</span><span class="token operator">=></span><span class="token string">'wp-post-image'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">//缩略图的class </span><span class="token string">'number_per_row'</span><span class="token operator">=></span><span class="token number">5</span> <span class="token comment" spellcheck="true">//如果设置为缩略图为横排,每行个数 </span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
最新日志:
1 |
wpjam_new_posts<span class="token punctuation">(</span><span class="token variable">$number</span><span class="token operator">=</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token variable">$post_type</span><span class="token operator">=</span><span class="token string">"post"</span><span class="token punctuation">,</span> <span class="token variable">$args</span><span class="token operator">=</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
- $number:最新日志显示数量。
- $post_type:最新日志类型。
- $arg:最新日志显示的参数,默认和相关日志$arg参数一样。
最热日志:
1 |
wpjam_top_viewd_posts<span class="token punctuation">(</span><span class="token variable">$number</span><span class="token operator">=</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token variable">$days</span><span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token variable">$args</span><span class="token operator">=</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
- $number:最热日志显示数量。
- $days:从最新多少天内获取最热日志,默认0为所有。
- $arg:最新日志显示的参数,默认和相关日志$arg参数一样。