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版本的图片，而你什么也不必做。

欢迎咨询/Welcome to inquire