1. 首页 > CMS系统 > Wordpress

WordPress中缩略图的使用以及相关技巧

在博客上用到缩略图的机会很多, 它们出现在文章列表页面, 文章下方的相关文章, 分类页面的类目图片, 甚至有些博客很新潮地淡化文字以图片瀑布流作为文章索引.

站长们知道缩略图可以吸引眼球, 一直在寻找更好的使用方法. 本文将会介绍 wordpress 上常用的两个调用缩略图的方法, 以及他们的适用场景.

调用文章第一个图片

wordpress media 一直支持上传图片生成包括缩略图, 中等尺寸, 大尺寸和原图 4 个规格的图片, 而这恐怕是为了方便我们在文章内调用不同尺寸的图片. 虽然没有直接调用缩略图的方法, 但我们可以找到文章的第一个图片作为缩略图.
凭文章 id 就可以找到第一个图片. 这里可以写成方法如下, 用户获取第一个缩略图, 如果没有上传过图片, 返回空字符串.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getfirstimage($postid) {
 $args = array(
 'numberposts' => 1,
 'order'=> 'asc',
 'post_mime_type' => 'image',
 'post_parent' => $postid,
 'post_status' => null,
 'post_type' => 'attachment'
 );
 $attachments = get_children($args);
 
 // 如果没有上传图片, 返回空字符串
 if(!$attachments) {
 return '';
 }
 
 // 获取缩略图中的第一个图片, 并组装成 html 节点返回
 $image = array_pop($attachments);
 $imagesrc = wp_get_attachment_image_src($image->id, 'thumbnail');
 $imageurl = $imagesrc[0];
 $html = '<img src="' . $imageurl . '" php" id="highlighter_871923">
?
1
2
3
4
5
6
$thumb = getfirstimage($post->id);
if(strlen($thumb) > 0) {
 echo $thumb;
} else {
 // 显示默认图片或者不做任何事情
}

文章特征图片 (featured image) 功能

wordpress 2.9 之后, wordpress 提供了文章特征图片功能, 可以为文章设定一个上传的图片作为特征图片, 并可以给图片设定多个尺寸以便在不同的环境使用. 可按一下步骤调用:

1. 为 wordpress 主题添加特征图片支持, 并设定特征图片的尺寸和别名.

?
1
2
3
4
add_theme_support('post-thumbnails'); // 支持特征图片功能
 
add_image_size('thumb', 180, 180); // 别名为 thumb, 尺寸为 150x150 的设定
add_image_size('recommend', 120, 120); // 别名为 recommend, 尺寸为 120x120 的设定

我们可以将以上代码加到 functions.php 文件, 为主题添加添加了 featured image 支持, 并设定了 180x180 和 120x120 两种尺寸的图片.

其中 add_image_size 用于定义一种特征图片尺寸, 参考 wordpress codex, 实际上它有 4 个参数.

  1. 第 1 个参数: 特征图片的尺寸别名, 用于调用不同尺寸的缩略图.

  2. 第 2 个参数: 图片的宽度

  3. 第 3 个参数: 图片的高度

  4. 第 4 个参数: 参数是个布尔值, 用于指定图片的裁切方式. 默认为 false.

如果为 true, 图片会按较大的压缩比例处理, 多余部分裁剪掉. 比如现在有图片 900x600, 要求压缩成 150x150 的图片, 那么会先将图片压缩成 225x150 的图片, 才裁剪成 150x150.

如果为 false, 图片会按较小的压缩比例处理. 比如现在有图片 900x600, 要求压缩成 150x150 的图片, 那么会将图片压缩成 150x100 的图片.
下图是两个缩略图, 原图 1024x768, 左缩略图是 add_image_size('xxx', 120, 120, true);, 而右图使用的是 add_image_size('xxx', 120, 120, false);.

WordPress中缩略图的使用以及相关技巧

2. 判断是否存在特征图片和显示缩略图.

?
1
2
3
4
5
if(has_post_thumbnail()) {
 the_post_thumbnail('thumb');
} else {
 // 显示默认图片或者不做任何事情
}

上述代码判断文章中是否存在特征图片, 如果存在则显示别名为 thumb 的缩略图, 如果没有可以显示默认图片或者留空. 我们在前面还设定了别名为 recommend 的缩略图, 那么我们可以在不同的场合使用不同的缩略图. 比如: 在文章列表页面使用 the_post_thumbnail('thumb'); 展示 180x180 的缩略图, 而在文章底部的相关文章区域通过 the_post_thumbnail('recommend'); 展示 120x120 的缩略图.

3. 在编写文章的时候设定特征图片.

如果我们为主题添加了特征图片支持, 在编辑文章页面上传图片后, 在 insert into post 按钮的旁边可以找到 use as featured image 链接将图片设为特征图片.

WordPress中缩略图的使用以及相关技巧


ps:巧用 wordpress 缩略图
wordpress 不仅是博客, 很多时候 wordpress 还被用作为 cms (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpthumb 等工具生成缩略图.

WordPress中缩略图的使用以及相关技巧

2.7 开始, wordpress 大幅提升多媒体功能, 越来越多人使用 wp 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150x150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量.

okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 $args = array(
 'numberposts' => 1,
 'order'=> 'asc',
 'post_mime_type' => 'image',
 'post_parent' => $post->id,
 'post_status' => null,
 'post_type' => 'attachment'
 );
 
 $attachments = get_children($args);
 $imageurl = '';
 
 if($attachments) {
 $image = array_pop($attachments);
 $imagesrc = wp_get_attachment_image_src($image->id, 'thumbnail');
 $imageurl = $imagesrc[0];
 } else {
 $imageurl = get_bloginfo('template_url') . '/img/default.gif';
 }
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php echo $imageurl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a>

这段代码会去找第一个上传的图片缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推...),然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.

?
1
<?php include('thumb.php'); the_content('read more...'); ?>

这段代码是把图片放在文章内容前面, 图片如何摆放需要用 css 调整一下布局, 这里就不多说了.

总结

wordpress 2.9 之前不存在特征图片 (featured image) 的概念, 必须通过第一种方式找到图片附件. 用这种方式获取缩略图的好处是一劳永逸, 以后你不用关心要文章的使用什么缩略图, 是否存在缩略图. 但这同样也是它的缺点, 不能指定特定图片为缩略图. 如果某文章第一个图片是缩略图, 但因为文章更新, 将第一个图片删除了, 再上传. 那本来第二个图片就成为了新的缩略图, 但有可能第二个图片效果不好, 不适合作为缩略图也没是没有办法的, 因为你根本没有办法使用特定图片.

featured image 功能很强大, 除了可以指定图片作为特征图片, 还能够使用多个尺寸的图片以适合不同的场合, 你要做的仅仅是每次写文章时别忘了设定特征图片. 当你想去除所有缩略图时, 也仅是将 functions.php 文件的 add_theme_support('post-thumbnails'); 即可.

我现在没有用 featured image, 一直用的是取第一个图片的方法, 因为我的图片质量不高, 一直没指定图片需求, 懒得去改了.

  • WordPress
  • 缩略图
  • 延伸 · 阅读

    • 2022-03-01Centos7的apache网站环境搭建wordpress
    • 2022-03-01详解Xampp和wordpress在Centos7上的搭建与使用
    • 2022-02-25PHP Everywhere漏洞使三万多个WordPress网站处于RCE攻击
    • 2022-02-23阿里云虚拟主机WordPress无法发送邮件解决方案
    • 2022-02-23阿里云虚拟主机如何设置wordpress伪静态规则
    • 2022-02-22最新发布的WordPress插件漏洞已影响300万个站点
    精彩推荐
    • WordpressWordPress 插件直接将服务器文件导入媒体库

      WordPress 插件直接将服务器文件导入媒体库

      WordPress 插件 直接将服务器文件导入媒体库 ...

      WordPress教程网10172019-10-07
    • WordpressWordPress 显示文章摘要方法 详细篇

      WordPress 显示文章摘要方法 详细篇

      WordPress又一个比较不好的地方,首页、分类和其它归档页,文章默认都是全文输出排列的。不知现在国外博客是否都流行这种显示方式,反正我个人是很不...

      WordPress建站网9222019-09-28
    • WordpressWordPress统计当前页面数据库查询次数及消耗时间的方法

      WordPress统计当前页面数据库查询次数及消耗时间的方法

      这篇文章主要为大家介绍了WordPress统计当前页面数据库查询次数及消耗时间的方法,涉及get_num_queries与timer_stop函数的使用技巧,需要的朋友可以参考下...

      6822019-09-04
    • WordpressUbuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法

      Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决

      这篇文章给大家介绍的是在Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法,相信"建立数据库连接错误"大家并不陌生,最近我在做一...

      chriscabin11012021-03-18
    • WordpressWordpress被忽略的SEO技巧介绍

      Wordpress被忽略的SEO技巧介绍

      本文将从一个小细节说起来提升你网站的SEO功能 ...

      点金主题网3022019-09-28
    • WordpressWordPress中用于获取及自定义头像图片的PHP脚本详解

      WordPress中用于获取及自定义头像图片的PHP脚本详解

      这篇文章主要介绍了WordPress中用于获取及自定义头像图片的PHP脚本编写方法,分别为get_avatar()和alt标签的使用,需要的朋友可以参考下...

      斌果4082020-12-08
    • WordpressWordPress中登陆后关闭登陆页面及设置用户不可见栏目

      WordPress中登陆后关闭登陆页面及设置用户不可见栏目

      这篇文章主要介绍了WordPress中登陆后关闭登陆页面及设置用户不可见栏目的方法,是多用户模式下比较实用的两个功能,需要的朋友可以参考下...

      露兜4122020-12-12
    • Wordpress详解WordPress中调用评论模板和循环输出评论的PHP函数

      详解WordPress中调用评论模板和循环输出评论的PHP函数

      这篇文章主要介绍了WordPress中调用评论模板和循环输出评论的PHP函数,分别是comments_template函数与wp_list_comments函数的使用,需要的朋友可以参考下...

      稍息少年6032020-12-13
    最近更新
    • 手机版wordpress怎么用
    • devops工程师(devops考试费用)
    • shopex主机(独立站shopify)
    • devops开发运维一体化
    • 一个人怎么做独立站shopify(国外独立网站如何
    编辑推荐
    • 美国和欧洲 vps哪个好?美国和欧洲vps详细对比
      美国和欧洲 vps哪个好?美国和欧洲vps详细对比
    • 2云服务器是什么,云主机干什么用的?

      云服务器是什么,云主机干什么用的?

      2020-07-22
    • 32020最新好用的web服务器软件推荐

      2020最新好用的web服务器软件推荐

      2020-05-17
    • 4服务器操作系统有哪些?

      服务器操作系统有哪些?

      2020-04-06
    • 5web服务器配置(图文详解)

      web服务器配置(图文详解)

      2020-04-06
    • 6企业如何选择阿里云服务器配置?

      企业如何选择阿里云服务器配置?

      2019-10-18
    • 7五大免费主机管理系统优缺点对比及推荐

      五大免费主机管理系统优缺点对比及推荐

      2019-06-14
    • 82019最新三款Windows下连接Linux的ssh软件下载推荐

      2019最新三款Windows下连接Linux的ssh软件下载推荐

      2019-05-28
    • 9服务器常用管理软件盘点

      服务器常用管理软件盘点

      2019-05-27
    • 10Nginx服务器究竟是怎么执行PHP项目

      Nginx服务器究竟是怎么执行PHP项目

      2019-05-24
    阅读排行
    • 1 WordPress提示require_once() Failed opening required的解
    • 2 WordPress语言切换(例如中文版和英文版转换)
    • 3 如何一次性删除wordpress所有文章
    • 4 阿里云虚拟主机如何设置wordpress伪静态规则
    • 5 WordPress中的shortcode短代码功能使用详解
    • 6 wordpress网站默认的nginx伪静态规则
    • 7 WordPress中设置Post Type自定义文章类型的实例教
    • 8 WordPress伪静态规则设置代码实例
    • 9 WordPress 全站改https方法
    • 10 WordPress迁移时一些常见问题的解决方法整理
    热门标签
    502   静态缓存文件   博客系统   搜索引擎优化   网站运行速度   页面压缩   加速   网站访问   速度优化   网站被挂马   中文留言   fastcgi_cache   缓存加速   wp-config.php   静态化   WP-No-Category-Base   分类链接   阿里云虚拟主机   自动替换   WordPres   管理面板   文章类型   后台地址   幻灯片   附件下载地址   SAE   静态化插件   php-cgi   负载过高   wp-cron.php  
    © 2019-2023 (www.jb51.net) 版权所有关于我们联系我们版权申明网站地图

    本文由主机测评网发布,不代表主机测评网立场,转载联系作者并注明出处:https://zhuji.jb51.net/wordpress/7473.html

    联系我们

    在线咨询:点击这里给我发消息

    微信号:

    工作日:8:30-17:30,节假日休息