WordPress主题改https后遭遇CSS加载不全

作者: 小月雨田 分类: WordPress技巧 发布时间: 2020-02-29 10:32

之前整站上了https,按照之前的文章:《在腾讯云的CentOS+Apache环境上实现全站https》的流程,一直很顺利。后来为了提速,布置了CDN。结果发现网页出现错版。用谷歌浏览器检查,发现是主题的CSS等加载不全。
  查阅了一下资料,首先是在wp-config.php文件的开头,加入$_SERVER['HTTPS'] = 'on';
  其次,在functions.php文件中的require( ABSPATH . WPINC . '/option.php' );(大约是在第八行)后面,加入以下代码:

add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
function agnostic_script_loader_src(src,handle) {
    return preg_replace('/^(http|https):/', '', src);
}

add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
function agnostic_style_loader_src(src, handle) {
    return preg_replace('/^(http|https):/', '',src);
}

  后来,查看主题的header.php文件里,通过bloginfo(‘template_directory’)来获取主题路径,因为这个返回值里,是http,而非https,这就导致了主题要用的CSS等文件的URL是http,而不是https,页面中的CSS无法正常加载,网页出现错位。
  尝试了多种办法以后,发现可以通过一段javascript代码,在页面中,用https替代http。

<script type="text/javascript">
if (document.location.protocol != "https:") { 
        location.href = location.href.replace(/^http:/,"https:");
}
</script>

  将上述代码添加进主题的header.php文件里,添加位置最好再<title>标签前。测试后,站点的错版问题得以解决。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表回复

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