WordPress主题改https后遭遇CSS加载不全
之前整站上了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>
标签前。测试后,站点的错版问题得以解决。