当前位置: 首页 > 设计 > 正文
avatar

WordPress的特色图像功能,像将可以很方便地在首页、分类页等列表页面显示指定的文章缩略图。Weisay Simple主题的缩略图不能很好的支持WordPress自带的特色图片功能,就目前的功能来看,主题支持随机缩略图,手动自定义缩略图,从文章中获取第一张图片作为缩略图这三种模式,现在新增对特色图片的支持。

首先,祝大家元宵节快乐。

一些朋友反馈说Weisay Simple主题的缩略图不能很好的支持WordPress自带的特色图片功能,就目前的功能来看,主题支持随机缩略图,手动自定义缩略图,从文章中获取第一张图片作为缩略图这三种模式。

问题也就来了,从文章中获取第一张图片作为缩略图,但是第一张图片真心不是我想作为缩略图的,特色图片也能显示,不过样式似乎就有问题。

主要是我自己不用特色图片这个功能,所以来就懒得把主题改为支持特色图片,正好周末就试着调试一下,兼容了特色图片功能,话说我还真是第一次去用特色图片这个功能,使用下来发现对于那些想博客更加美观的人来说,特色图片确实是一个不错的功能。

从文章中获取第一张图片作为缩略图,有两个弊端:1、第一张图片不是我想要的;2、如果第一张图片很大,可能会导致页面加载效率受到影响。特色图片确实很好的解决了这一问题。

言归正传,下面我就针对Weisay Simple主题来探讨下特色图片功能的使用。

1、首先安装Weisay Simple主题,并且主题设置里面开启显示缩略图及显示文章截图型缩略图。

2、在functions.php里面最上面添加下面代码(Weisay Simple主题1.51版我已经加了下面的代码,直接使用此功能就行了。)

<?php
add_image_size('thumbnail', 140, 100, true);
add_image_size('large',600,500);
add_image_size('medium',300,260);
?>

同时将后台-设置-多媒体里面的数值设置的上面一样。

WordPress特色图像功能详解

3、发表文章上传图片,这些都是比较简单的,我就不说了,如下图,我上传了2张图片到文章。

WordPress特色图像功能详解

4、如果此时不设置特色图片就保存文章,那么首页的缩略图会调用文章的第一张图片,如下图,图片很明显的被强制压缩为了140*100大小了。

WordPress特色图像功能详解

5、如果后台编辑文章,设置特色图片,选取其中一张图片作为特色图片,那么效果是这样的,如下图,图片自动截图了那张大图的一块,大小为140*100。

WordPress特色图像功能详解

6、有时候系统自动截图的缩略图位置不是很好,我们想自己手动编辑一下这个缩略图,那么也是可以的,编辑文章,点击特色图像里面的图片进入图片编辑页面,点击编辑图像,如下图。

WordPress特色图像功能详解

7、到了这个页面就要稍微注意一下,先鼠标拖动截图大概位置,然后设置右侧的长宽比为140*100,填好之后回车一下,然后你就发现直接的截取大小的比例会自动调整了,如果大小不是很合适,你可以按着shift键拖动裁剪区域,直到合适。此修改只用于“缩略图”,接着点击裁剪按钮,好了之后点击保存,最后点击右侧的更新按钮,大功告成,如下图。

WordPress特色图像功能详解

8、这个时候刷新下页面,首页的缩略图就是我们自定义的缩略图了,如下图。

WordPress特色图像功能详解

貌似看着有点复杂,其实真正操作起来还是很简单的,比较适合那么真正喜欢完美展示缩略图的人。

关于第7点,如何上传图片之后系统默认提供的缩略图还可以的话,就没有必要去做第7点了。

本文固定链接: http://www.weisay.com/blog/wordpress-featured-image-and-thumbnail.html | 威言威语

WordPress特色图像功能详解:目前有63 条评论

  1. avatar
    35楼
    Gavin Google Chrome Windows

    为什么我是用了主题后,所有的上传图片全部fail,而且恢复也不行了?求救,谢谢

    2017-02-08 11:27 [回复]
  2. avatar
    34楼
    Alex Google Chrome Windows

    正用得到

    2015-09-29 21:27 [回复]
  3. avatar
    33楼
    余欲鱼 Google Chrome Windows

    已使用七牛云存储插件实现标签设置缩略图,weisay simple主题如何手动定义缩略图关联已经设置好的标签?

    2015-02-16 10:29 [回复]
  4. avatar
    32楼
    html Internet Explorer Windows

    请教下,文章缩略图错位——如何修复!

    2014-11-28 12:00 [回复]
    • avatar
      William Mozilla Firefox Windows

      看你改过主题,恢复一下主题代码吧

      2014-12-03 14:55 [回复]
  5. avatar
    31楼
    aoao 猎豹浏览器 Windows

    按上面的教程设置了,但是还是会被压缩,大神能看看不?

    2014-11-02 23:53 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter