方案

家庭服务器部署WordPress，公网IPv6+DDNS使用非封禁端口访问，frp穿透至IPv4公网服务器实现443端口访问

部署

两台服务器均使用1Panel部署，请自行安装

WordPress安装在家庭服务器上，使用OpenResty一键部署，勾选监听IPv6

使用frp将wprdpress穿透至公网服务器

[[proxies]]
name = "blog"
type = "tcp"
localIP = "192.168.xxx.xxx"  //修改为自己机器ip
localPort = 8080
remotePort = 8080
transport.useEncryption = true
transport.useCompression = true

启用HTTPS并配置SSL证书

SSL证书申请并自动续订请自行寻找教程

配置双端口访问，解决重定向错误

假设WordPress以HTTP方式监听服务器上的8080端口，Nginx监听443端口，WordPress网站要求以 https://域名 的形式访问，Nginx配置里直接 proxy_pass 会遇到两个问题：

问题现象

1. WordPress网站的CSS、JS、图片等资源无法加载，浏览器控制台报"mixed content"错误
2. 登录WordPress管理后台出现循环重定向

解决方案

WordPress实例所在机器

wp-config.php文件修改：（添加在<?php下方）

// 动态识别访问端口
$current_port = $_SERVER['HTTP_X_FORWARDED_PORT'] ?? '443';
define('WP_HOME', "https://blog.ch0co1ate.top:$current_port");
define('WP_SITEURL', "https://blog.ch0co1ate.top:$current_port");
// 强制HTTPS全局生效
$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_ADMIN', true);

网站设置-配置文件 添加：

# 强制HTTPS且不降级
error_page 497 https://$host$request_uri; 
    
proxy_set_header X-Forwarded-Proto https; 
proxy_set_header Host $host:6443;        # ✅ 传递外部端口（家庭服务器openresty https端口）
proxy_set_header X-Forwarded-Port 6443;  # ✅ 明确告知WordPress外部端口

公网IPv4服务器

使用openresty将网站反代至127.0.0.1:8080，在网站设置-反向代理-源文中添加下方代码，并注释冲突项

proxy_set_header X-Forwarded-Proto https; 
proxy_set_header Host $host:443;        # ✅ 传递外部端口（公网服务器openresty https端口）
proxy_set_header X-Forwarded-Port 443;  # ✅ 明确告知WordPress外部端口

为站点添加运行时间统计

将代码插入至 /data/wp-content/themes/对应主题文件夹下的 footer.php 中

样式一

<!-- 运行时间统计 -->
<span id="momk"></span>
<script type="text/javascript">
function NewDate(str) {
    str = str.split('-');
    var date = new Date();
    date.setUTCFullYear(str[0], str[1] - 1, str[2]);
    date.setUTCHours(0, 0, 0, 0);
    return date;
}

function momxc() {
    // 修改这里的建站日期 ↓
    var birthDay = NewDate("2025-3-17");
    var today = new Date();
    var timeold = today.getTime() - birthDay.getTime();
    
    var sectimeold = timeold / 1000
    var secondsold = Math.floor(sectimeold);
    var msPerDay = 24 * 60 * 60 * 1000;
    var e_daysold = timeold / msPerDay;
    var daysold = Math.floor(e_daysold);
    var e_hrsold = (daysold - e_daysold) * -24;
    var hrsold = Math.floor(e_hrsold);
    var e_minsold = (hrsold - e_hrsold) * -60;
    var minsold = Math.floor((hrsold - e_hrsold) * -60);
    var seconds = Math.floor((minsold - e_minsold) * -60).toString();
    document.getElementById("momk").innerHTML = "本站已勉强运行: " + daysold + " 天 " + hrsold + " 时 " + minsold + " 分 " + seconds + " 秒";
    setTimeout(momxc, 1000);
}
momxc();
</script>

<style>
/* 基础样式 */
#momk {
    color: #ff0000;        /* 整体文字颜色 */
    font-weight: bold;      /* 加粗显示 */
    font-family: Arial;     /* 可选字体 */
    font-size: 14px;        /* 文字大小 */
}
</style>
<br>
<!-- end -->

样式二

<!-- 运行时间统计 -->
<span id="momk"></span>
<script type="text/javascript">
function NewDate(str) {
    str = str.split('-');
    var date = new Date();
    date.setUTCFullYear(str[0], str[1] - 1, str[2]);
    date.setUTCHours(0, 0, 0, 0);
    return date;
}

function momxc() {
    var birthDay = NewDate("2025-3-17");
    var today = new Date();
    var timeold = today.getTime() - birthDay.getTime();
    
    var sectimeold = timeold / 1000
    var secondsold = Math.floor(sectimeold);
    var msPerDay = 24 * 60 * 60 * 1000;
    var e_daysold = timeold / msPerDay;
    var daysold = Math.floor(e_daysold);
    var e_hrsold = (daysold - e_daysold) * -24;
    var hrsold = Math.floor(e_hrsold);
    var e_minsold = (hrsold - e_hrsold) * -60;
    var minsold = Math.floor((hrsold - e_hrsold) * -60);
    var seconds = Math.floor((minsold - e_minsold) * -60).toString();
    // 给所有数字添加样式标签
    document.getElementById("momk").innerHTML = 
        "本站已勉强运行: <span class='time-num'>" + daysold + "</span> 天 " +
        "<span class='time-num'>" + hrsold + "</span> 时 " +
        "<span class='time-num'>" + minsold + "</span> 分 " +
        "<span class='time-num'>" + seconds + "</span> 秒";
    setTimeout(momxc, 1000);
}
momxc();
</script>
    
<style>
#momk {
    color: #b9b9b9; /* 普通文字颜色 */
    font-weight: normal; /* 取消加粗 */
}
.time-num {
    color: #C40000; /* 时间数字颜色 */
}
</style>
<br>
<!-- end -->

参考

1. WordPress位于代理后的问题及解决办法 - tlanyan