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

分享本文:
wp-44-ssl-image-issue
如何修复使用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网址配置信息

WordPress网址配置信息

曾将响应式图片加入到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或七牛等云加速服务,请参考这里的回复

如何修复使用SSL证书时WordPress 4.4无法加载图片的错误
请为本文打分
分享本文:


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

  • Pingback: 为WP挂上小绿锁- LNMP环境下安装Let’s Encrypt SSL证书 – McCarlog's Lab

发表一下评论

电子邮件地址不会被公开。 必填项已用*标注