ITKeyword - 技术文章推荐分享

首页 > WordPress纯代码纯静态开启七牛CDN并集成七牛缩略图和水印功能

WordPress纯代码纯静态开启七牛CDN并集成七牛缩略图和水印功能

最近发现好多网站都使用了动静分离,我就研究了下使用七牛缓存图片,并使用七牛图片样式对图片进行缩略和加水印。七牛步骤先注册七牛帐号,并在账户里面充值10元钱,用于使用七牛的CDN功能,先添加资源中的对象存储并在镜像存储中添加镜像源,添加完之后绑定你的二级域名,稍等下你会看到域名信息中一个CNAME,这时你将CNAME解析到你的域名中,这完成了第一步。PS:这里就不详细介绍了,不懂下面留言。添加RobotsRobots存放在对象存储中的内容管理中,下载下来并更改上传。下面是我自己的Robtos,大家根据自己的情况自行修改。User-agent: *Allow: /robots.txtAllow: /*.ico$Allow: /*.png$Allow: /*.jpg$Allow: /*.jpeg$Allow: /*.gif$Allow: /*.bmp$Allow: /wp-content/Disallow: /集成七牛缩略图和水印1、先在对象存储更多操作中的样式分隔符设置进行设置,详见下图,大家可以根据自己的喜欢的符号进行设置。2、设置完样式分割符之后设置图片样式,新建图片样式,设置图片缩略图和图片水印功能,详见下图!七牛缩略图设置七牛图片水印设置七牛拉取网站图片今天的重头戏来了,使用代码从网站服务器拉取图片到七牛云存储,这点代码我是从张戈哪拿来的,进行了简单的修改。//使用七牛拉取网站图片function QiNiuCDN(){

function Rewrite_URI($html){

/* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型,使用分隔符 | 隔开即可 */

$pattern = '/http:\/\/(www\.|)mxiaoc\.com\/wp-([^"\']*?)\.(js|css|jpg|gif|png|jpeg|bmp|ico)/i';

/* 七牛CDN空间地址,请自行替换成实际空间地址 */

$replacement = 'http://static.www.mxiaoc.com/wp-$2.$3';

$html = preg_replace($pattern, $replacement, $html);

return $html;

}

if(!is_admin()){

ob_start("Rewrite_URI");

}}add_action('init', 'QiNiuCDN');将上面的代码放到主题根目录下的functions.php中即可。注意改为自己的域名!集成七牛缩略图和水印代码集成七牛的缩略图和水印代码需要用到七牛的样式在前面已经介绍了怎么创建样式就不说了,不懂的看前面的,也可以问小C。//七牛缩略图和水印add_filter('the_content', 'QiNiuThumbnailWatermark');function QiNiuThumbnailWatermark($content) {

global $post;

$pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";

/* 下面这行代码中的ThumbnailsWatermark是七牛样式中的样式名称而斜杠为七牛中设置的样式分割符 */

$replacement = '<img$1src=$2$3.$4/ThumbnailsWatermark$5$6>';

$content = preg_replace($pattern, $replacement, $content);

return $content;}将上面的代码放到主题根目录下的functions.php中即可。注意将ThumbnailsWatermark改为自己的样式名称还有自己设置的分割符。设置图片默认尺寸属性设置图片的默认尺寸属性大家可以根据自己的情况自行修改!//设置图片默认尺寸属性add_filter('the_content', 'removeimg_size');function removeimg_size($content) {

global $post;

//去掉srcset属性

$content = preg_replace("/srcset=('|\")(.*?)('|\")/i", '', $content);

//设置图片默认尺寸属性

$content = preg_replace('/<img(.*?)width="(.*?)" height="(.*?)"(.*?)>/i', '<img$1width="auto" height="auto"$4>', $content);

return $content;}将上面的代码放到主题根目录下的functions.php中即可。开启七牛后遇到的问题1、开启七牛后你的网站被七牛镜像了,访问七牛域名你发现是你自己的网站。2、开启七牛后你的网站无法评论。关于问题一七牛镜像的解决办法就是通过js跳转方式进行跳转到自己的网站。先找到你网站的head中的部分代码,加上如下js代码即可,以下代码取至张戈博客。不懂的可以下面留言!<script type="text/javascript">/* 如果浏览器域名不是www.mxiaoc.com将跳转到www.mxiaoc.com对应的页面*/if (document.location.host != "www.mxiaoc.com") {

location.href = location.href.replace(document.location.host,'www.mxiaoc.com');}</script>对于问题二无法评论问题的解决方法:修改评论comments-ajax.js即可var i = 0, got = -1, len = document.getElementsByTagName('script').length;while ( i <= len && got == -1){

var js_url = document.getElementsByTagName('script')[i].src,

got = js_url.indexOf('comments-ajax.js'); i++ ;}/** 解决七牛评论出错的问题 */js_url = js_url.replace('static.www.mxiaoc.com','www.mxiaoc.com');总结七牛的使用今天就介绍到这里,也许不是很详细,但是大家应该都能看懂,如果不懂的可以下方留言。

相关推荐:wordpress用七牛云存储自动获取缩略图

1、七牛云存储获取缩略图优点使用七牛云存储获取缩略图而不使用timthumb.php 插件获取缩略图,原因有三:1、安全性。具体不多说,请以“ timthumb 漏洞”为关键词google it。但据说新版 timthumb已经解决该漏洞问题了;2、占用服务器资源,timthumb.ph

最近发现好多网站都使用了动静分离,我就研究了下使用七牛缓存图片,并使用七牛图片样式对图片进行缩略和加水印。七牛步骤先注册七牛帐号,并在账户里面充值10元钱,用于使用七牛的CDN...

------分隔线----------------------------