如何修复使用SSL证书时WordPress 4.4无法加载图片的错误

如果你使用了SSL证书加密WordPress网站前端内容，你可能会遇到这样的问题，升级到WordPress 4.4之后网站前台无法加载显示图片。别担心，你并不孤单。用户Brokkr在WordPress官方论坛上发了一个帖子，详细描述了他遇到的问。

原文为英文，这里翻译成中文，意思如下：

最近，我使用了来自 Let’s Encrypt 的 SSL 证书，于是将 WordPress 网站切换到了 https 模式。使用 WordPress 4.3.1 ，网站全部内容使用 https 加密。

升级到 WordPress 4.4 之后，网站图片无法加载显示，浏览器抱怨内容混乱。没有显示图片，而是显示了图片的文件名。使用 Chrome 或 Firefox 浏览器来检查，得到如下提示：

<img width=”984″ height=”615″ src=”https://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984×615.jpg” class=”attachment-post-thumbnail size-post-thumbnail wp-post-image” alt=”22100041369_591b31367d_b_enigma1″ srcset=”http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-300×188.jpg 300w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1.jpg 1024w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984×615.jpg 984w” sizes=”(max-width: 984px) 100vw, 984px”>

正如你所看到的，图片的 src 属性正确使用了 https ，而 srcset 属性没有加密。

遇到同样问题的用户Chris Cree发现，包含在 wp-config.php 配置文件中的 WP_SITEURL 和 WP_HOME 属性 ，没有使用 https ，而是使用了 http 。Cree建议用户检查他们的网站设置，查看网址中使用的是 http 还是 https 。如果这两个网址都没有使用 https ，那么在 WordPress 4.4 中就可能会导致出现上述问题。

曾将响应式图片加入到WordPress核心功能的Joe McGill ，也在论坛回复了该问题并肯定了Cree的建议，“如果你的网站前台使用 https 模式，那么你应该通过WordPress后台的设置，将网站地址和WordPress地址都修改为 https 模式。”

McGill 承认这个问题与 WordPress 构建网址方式的 bug 有关。虽然修改这个问题仅需要一行代码，但可能会影响大量网站的配置。

如果在修改上面的网址信息之后仍然无效，或者无法进入WordPress后台进行修改，那么你可以在所用主题的 functions.php 函数模板文件中添加以下代码，或者将其保存为一个独立的网站专用插件：

/*
 * Force URLs in srcset attributes into HTTPS scheme.
 * 强制 srcset 属性中的网址使用 HTTPS 模式。
 * This is particularly useful when you're running a Flexible SSL frontend like Cloudflare
 * This is particularly useful when you're running a Flexible SSL frontend like Cloudflare
 */
function ssl_srcset( $sources ) {
  foreach ( $sources as &$source ) {
    $source['url'] = set_url_scheme( $source['url'], 'https' );
  }

  return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );

这段代码基本上可以解决几乎所有使用 SSL 协议用户所遇到的问题。除非你使用了ClourFlare或七牛等云加速服务，请参考这里的回复。