WordPress响应式图片解决方案

对于博客或展示型企业站来说,内容比较单一,版面并不复杂,非常适合制作成响应式网站。在响应式网站设计中,对图片的处理非常简单,通常只需要以下CSS样式就可以完成:

img {
max-width: 100%;
height: auto;
}

然后给具体的图片指定百分比的宽度,由于网站不同版块加载的图片宽度需求不同,所以不能在全局样式中指定。

看起来问题已经解决,但是存在一个问题,如果图片比较大,在PC端加载没有问题,但非Wifi连接下的移动端需要加载体积较大的图片不仅浪费流量,加载速度也不理想,因此需要给移动端指定不同的图片版本。

在前面的一篇文章中我介绍了禁止WordPress裁剪图片medium_large尺寸的方法,事实上WordPress指定medium_large的宽度为768,是为了生成图片的一个移动端版本,非常实用。

通常我们在主循环中调用缩略图的方法如下:

the_post_thumbnail( 'thumbnail' );		// 多媒体设置中的缩略图大小,默认值是150150
the_post_thumbnail( 'medium' );			// 多媒体设置中的中等大小,默认值是300300
the_post_thumbnail( 'medium_large' );	// 在WordPress 4.4版本中引入,宽度为768,高度不限制,不能在多媒体设置中修改
the_post_thumbnail( 'large' );			// 多媒体设置中的大尺寸,默认值是10241024
the_post_thumbnail( 'full' );			// 原图

the_post_thumbnail函数会输出img标签,如果只想返回结果而不是输出,那么可以使用get_the_post_thumbnail函数

如果只想获取缩略图的地址而不包含img标签,那么相应的代码如下:

wp_get_attachment_image_url( get_post_thumbnail_id( $id ), 'medium_large' );

$id为文章的id,首先用get_post_thumbnail_id函数获取该文章的特色图像id,然后用wp_get_attachment_image_url获取图片medium_large版本的地址。

掌握了以上知识,就可以在调用缩略图的时候根据设备来加载不同的图片版本:

<picture>
<source srcset="https://www.ztjun.com/<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), 'medium_large' ); ?>" media="(max-width: 768px)">
<source srcset="https://www.ztjun.com/<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), 'full' ); ?>">
<img src="https://www.ztjun.com/<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), 'full' ); ?>" alt="My default image">
</picture>

第一个source为小于或等于768的设备加载medium_large版本的图片,第二个source为大于768的设备加载原图,img标签是为那些不支持picture标签的浏览器准备的。

以上方法需要在发表文章的时候设置特色图像如果你在编写文章的时候右下角没有设置特色图像的功能,请在functions.php函数中加入如下代码:

add_theme_support( 'post-thumbnails' );

有人使用正则抓取文章第一张图片作为缩略图,个人不建议那样做,手动设置特色图像才是最佳方案。

那么,文章内容中的图片如何实现在移动端加载medium_large版本呢?值得高兴的是WordPress 4.4之后,自动过滤the_content,检查内容中的img标签,并在移动端自动输出medium_large版本的图片,而你什么也不必做。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress条件判断标签详细列表

2021-4-17 11:29:30

WordPress教程

七牛API上传文件覆盖旧文件方法

2021-4-17 23:35:33

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索