Post

说说WordPress几种外链缩略图方案,自动把第一张图片做缩略图

文章目录

下班抽空写的,不会很详细。如果没改过WordPress代码的朋友,可能看完了也不知道从哪里下手。插件的标题都是链接到它们开发者那里的,可以从他们那里获得更详尽的帮助,我只是提供个思路给大家。

方案一:使用缩略图插件WP-Thumbnails

插件原理是每打开一篇文章生成相应的缩略图,所以安装插件后再访问网站,插件就会自动生成缩略图。

使用方法很简单,启用插件后,进入设置——WP-Thumbnails,如图选择自动下载外链图片到本地。

QQ截图20150602231358

然后找到首页缩略图的设置,填好生成缩略图的尺寸,靠左还是靠右显示,更新设置就可以把下面那行代码插入你模版需要放置缩略图的地方了。

QQ截图20150602231522

 

另外这个插件不仅仅是文章列表缩略图,还有其他缩略图甚至是摘要截取,你们慢慢发掘和使用,这里不多讲。如果不知道缩略图那段代码在哪里添加的,可以用谷歌或者火狐浏览器的审查元素去找。

这个插件的缺点:1、新浪sae那些没有写入权限的服务器不能用。2、它是先下载外链图片到服务器,然后再生成缩略图的,会占用一些服务器负担和空间,但是这个几乎可以忽略不计。3、可以设置全局缺省图。4、当图片地址大写,或者不是JPG结尾的图片地址,插件会显示缺省图。

方案二:七牛镜像存储插件

其实很多人用七牛插件的,它可以将WordPress 的静态资源镜像到七牛。还可以修改站点默认的上传路径,把多媒体直接上传到七牛而不是小的可怜的服务器。本站使用了七牛+WP Super Cache来CDN加速,效果也还可以。

我们看到七牛插件的设置,首先你要去注册个七牛账号,传送门:登陆七牛开发者平台

QQ截图20150602232920

新建一个空间

QQ截图20150602233204

获得七牛域名
QQ截图20150602232934

QQ截图20150602233003

以及AK/SK,上面那些在后台插件需要用到

QQ截图20150602232542

上面得到的东西,在后台启用插件后就要填写进去了

QQ截图20150602232554

终于回到正题,就是这里启用缩略图

*启动高级缩略图功能之后,文章获取缩略图的顺序为:
特色图片 > 标签缩略图 > 第一张图片 > 分类缩略图 > 默认缩略图。

调用的代码是:<?php wpjam_post_thumbnail(array(240,132),$crop=0);?> (已包含img标签)

这个插件的缺点:如果没接触过七牛这类东西的朋友设置起来可能有点困难,设置出错导致图片无法显示等。如果你单纯想调用外链图片做缩略图,不考虑外链图片大小的可以不理上面那一些注册步骤,只需启用插件,勾上缩略图,调用缩略图就可以了。

方案三:代码调用第一张图作为缩略图

这类的代码百度一下会有很多,下面那段测试过OK的,拿来介绍给大家。

1、在主题文件夹下的functions.php添加代码

<span class="com">//缩略图</span>
<span class="kwd">function</span><span class="pln"> catch_that_image</span><span class="pun">()</span> <span class="pun">{</span>
<span class="kwd">global</span><span class="pln"> $post</span><span class="pun">,</span><span class="pln"> $posts</span><span class="pun">;</span>
<span class="pln"> $first_img </span><span class="pun">=</span> <span class="str">''</span><span class="pun">;</span>
<span class="pln"> ob_start</span><span class="pun">();</span>
<span class="pln"> ob_end_clean</span><span class="pun">();</span>
<span class="pln"> $output </span><span class="pun">=</span><span class="pln"> preg_match_all</span><span class="pun">(</span><span class="str">'/<img.+src=[\'"]([^\'"]+)[\'"].*>/i'</span><span class="pun">,</span><span class="pln"> $post</span><span class="pun">-></span><span class="pln">post_content</span><span class="pun">,</span><span class="pln"> $matches</span><span class="pun">);</span> <span class="com">//正则匹配文章中所有图片</span>
<span class="pln"> $first_img </span><span class="pun">=</span><span class="pln"> $matches </span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span> <span class="pun">[</span><span class="lit">0</span><span class="pun">];</span>
 
<span class="kwd">if</span><span class="pun">(</span><span class="pln">empty</span><span class="pun">(</span><span class="pln">$first_img</span><span class="pun">)){</span> <span class="com">//定义默认图片</span>
<span class="pln"> $first_img </span><span class="pun">=</span> <span class="str">"自定义图片!!自定义图片!!自定义图片!!"</span><span class="pun">;</span> <span class="com">//默认图片地址需自己设置</span>
<span class="pun">}</span>
<span class="kwd">return</span><span class="pln"> $first_img</span><span class="pun">;</span>
<span class="pun">}</span>

2、在主题文件的index.php;category.php这种有文章列表的页面里,找到需要插入缩略图的地方。
<?php <span class="pln">catch_that_image</span><span class="pun">()</span>; ?>
这种方法的缺点是:需要通过CSS来控制缩略图,外链图片的实际尺寸有大有小,如果是很大的外链图片做缩略图还会导致页面变卡,耗费访客流量等。不是很推荐这种方法。

PS:防止变形可以用以下方法。

QQ截图20150602234943

图片设置最大宽度,高度居中

 

QQ截图20150602234959

上级设置固定的宽度和高度,超出部分隐藏。

方案四:使用timthumb实现缩略图截取

这个我没去折腾,因为我用的那款主题的原因,使用起来比较麻烦。

直接传送门:http://www.cmhello.com/timthumb.html

QQ截图20150603000826

Leave a Reply

  • 评论6则,共1页,当前第1
    • 九天

      我用的也是七牛云存储插件,外链图片镜像到七牛的,首页缩略图也是出不来。

    • layliu

      博主,我用了七牛镜像云存储缩略图的功能,但是网站首页还是无法显示缩略图,只能通过添加特色图像来弄,这是因为我的主题不支持吗?

      • 1、检查你的七牛插件,配置好账号那些了没。2、调用七牛缩略图的代码有没有加上去?3、把自动将远程图片镜像到七牛的选项勾上。