WordPress HTTPS 到 localhost HTTP - CSS

本文将讨论当 WordPress 网站启用了 HTTPS，但是需要在本地 localhost 上进行开发时遇到的 CSS 加载问题。

问题描述

当我们在 WordPress 管理面板中启用了 HTTPS，所有资源链接将使用 HTTPS 协议来加载，包括 CSS 和 JavaScript 文件。但是，当我们需要将网站迁移到本地 localhost 进行开发时，我们无法在本地环境上使用 HTTPS，因为我们通常没有安装和配置 SSL 证书。

这意味着我们需要通过 HTTP 协议来加载 CSS 和 JavaScript 文件，但是，由于 WordPress 使用相对 URL 来引用这些文件，因此无法简单地更改协议。

解决方案

一种解决方案是通过将 WordPress 的网址更改为 HTTP 协议，同时在本地开发期间禁用 HTTPS 重定向。但这种方法不是最佳的，因为它需要在本地测试期间修改 WordPress 设置，这可能会干扰到其他测试者。

更好的方法是在 WordPress 中使用一个过滤器来修改 CSS URL，这样我们可以使用相对路径来加载 CSS 文件，而无需担心协议问题。以下代码片段演示了如何实现这个过滤器：

/**
 * Filter the WordPress stylesheet URI.
 *
 * Replace HTTPS with HTTP in development environment.
 *
 * @param string $uri Absolute path to the stylesheet.
 * @param string $dir Path to the stylesheet directory.
 * @return string Updated path to the stylesheet.
 */
function wpdev_filter_stylesheet_uri( $uri, $dir ) {
    if ( $_SERVER['SERVER_NAME'] === 'localhost' ) {
        $uri = str_replace( array( 'https://', 'HTTPS://' ), 'http://', $uri );
    }
    return $uri;
}
add_filter( 'stylesheet_uri', 'wpdev_filter_stylesheet_uri', 10, 2 );

这个过滤器在检查当前域名是否为 localhost 后，替换 CSS 文件的 HTTPS URL 为 HTTP URL。你可以将这个代码片段添加到你的 WordPress 主题的 functions.php 文件中来解决这个问题。

结论

在本地开发环境中调试 WordPress 网站时，HTTPS/HTTP 协议之间的转换可能会导致 CSS 加载问题。为了解决这个问题，我们可以使用一个过滤器来在加载 CSS 文件时修改 URL，以便使用相对路径和 HTTP 协议。希望这个解决方案对你有所帮助！