WordPress响应式图片解决方案
对于博客或展示型企业站来说,内容比较单一,版面并不复杂,非常适合制作成响应式网站。在响应式网站设计中,对图片的处理非常简单,通常只需要以下CSS样式就可以完成:
img { max-width: 100%; height: auto; }
然后给具体的图片指定百分比的宽度,由于网站不同版块加载的图片宽度需求不同,所以不能在全局样式中指定。
看起来问题已经解决,但是存在一个问题,如果图片比较大,在PC端加载没有问题,但非Wifi连接下的移动端需要加载体积较大的图片不仅浪费流量,加载速度也不理想,因此需要给移动端指定不同的图片版本。
在前面的一篇文章中我介绍了禁止WordPress裁剪图片medium_large尺寸的方法,事实上WordPress指定medium_large的宽度为768,是为了生成图片的一个移动端版本,非常实用。
通常我们在主循环中调用缩略图的方法如下:
the_post_thumbnail( 'thumbnail' ); // 多媒体设置中的缩略图大小,默认值是150×150 the_post_thumbnail( 'medium' ); // 多媒体设置中的中等大小,默认值是300×300 the_post_thumbnail( 'medium_large' ); // 在WordPress 4.4版本中引入,宽度为768,高度不限制,不能在多媒体设置中修改 the_post_thumbnail( 'large' ); // 多媒体设置中的大尺寸,默认值是1024×1024 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="<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), 'medium_large' ); ?>" media="(max-width: 768px)"> <source srcset="<?php echo wp_get_attachment_image_url( get_post_thumbnail_id( $id ), 'full' ); ?>"> <img src="<?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版本的图片,而你什么也不必做。
-
如何创建WordPress古腾堡编辑器的区块(PHP+原生JS) 2024-01-10 01:01:06
-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45