使用本地开发环境推荐方案（最推荐）

如果你使用的是专业的本地开发环境，如 Local、DevKinsta 或 XAMPP/WAMP 中的集成解决方案，它们通常已经内置了“本地域名”功能，这是最简单、最安全的方法。

wordpress本地网页手机访问
（图片来源网络，侵删）

以 Local 为例：

  1. 启动 Local 环境：确保你的 WordPress 网站在 Local 中是运行状态。
  2. 找到本地域名：在 Local 的项目列表中，点击你的网站，进入“设置”或“网络信息”页面，你会看到一个类似 my-site.local 或 mysite.test 的域名。
  3. 手机访问：在手机的浏览器（Safari, Chrome 等）地址栏中，直接输入这个本地域名，http://my-site.local。
  4. 如果无法访问：通常是因为手机和电脑不在同一个 Wi-Fi 下，请确保你的手机和电脑连接的是同一个路由器（同一个 Wi-Fi 网络）。

优点：

  • 简单：无需手动操作,环境自带。
  • 安全：仅在局域网内可见,不会暴露到公网。
  • 稳定：不受电脑休眠或 IP 地址变化的影响。

使用电脑的局域网 IP 地址（通用方法）

如果你的本地环境是手动搭建的（比如直接用 MAMP/WAMP），或者你想知道背后的原理,可以使用这个方法。

步骤 1：找到你电脑的局域网 IP 地址

这是最关键的一步，你的电脑在局域网内有一个 IP 地址,手机需要通过这个地址来访问。

wordpress本地网页手机访问
（图片来源网络，侵删）

  • 在 Windows 上：

    1. 打开“命令提示符”（按 Win + R，输入 cmd，回车）。
    2. 输入 ipconfig 并回车。
    3. 找到“无线局域网适配器 WLAN”或“以太网适配器”部分，查看“IPv4 地址”。
    4. 这个地址通常是 168.x.x 或 0.x.x 格式，168.1.105,记下这个地址。

  • 在 macOS 上：

    1. 点击屏幕左上角的苹果菜单 ，选择“系统设置”（System Settings）。
    2. 点击“网络”（Network）。
    3. 选择你正在连接的网络（如 Wi-Fi），点击“详细信息...”（Details...）。
    4. 在“TCP/IP”标签页下，找到“IPv4 地址”。
    5. 这个地址通常是 168.x.x 格式，168.1.8,记下这个地址。

步骤 2：在手机上访问该 IP 地址

  1. 确保你的手机和电脑连接的是同一个 Wi-Fi 网络。
  2. 在手机的浏览器地址栏中，输入 http:// 加上你刚才记下的 IP 地址，http://192.168.1.105。
  3. 按回车，你应该能看到你的 WordPress 网站了。

步骤 3：解决 WordPress 站点无法访问的问题（重要！）

很多时候，你通过 IP 地址访问时，WordPress 会报错，提示“建立数据库连接失败”或重定向到 wp-admin/install.php，这是因为 WordPress 的配置文件中存储的是 localhost 或 0.0.1，而外部请求（来自手机）无法访问这个地址。

你需要修改 wp-config.php 文件：

wordpress本地网页手机访问
（图片来源网络，侵删）
  1. 找到 wp-config.php 文件：它位于你的 WordPress 安装根目录下（C:/xampp/htdocs/wordpress/wp-config.php）。
  2. 修改 DB_HOST 值：
    • 找到这行代码：define('DB_HOST', 'localhost');
    • 将 'localhost' 修改为你电脑的局域网 IP 地址。
    • 修改后：define('DB_HOST', '192.168.1.105'); (使用你自己的 IP 地址)
  3. 保存文件：将修改后的 wp-config.php 文件保存并上传回服务器（如果你是远程编辑的话）。
  4. 刷新手机浏览器：现在应该可以正常访问你的 WordPress 网站了。

使用端口转发（不推荐，仅适用于特定情况）

如果你的电脑是通过路由器上网，并且路由器支持端口转发，你也可以设置端口转发，但这种方法比较复杂，且可能不安全,仅作了解。

步骤：

  1. 确认端口：你的本地环境（如 XAMPP）运行在哪个端口？Apache 默认是 80，MySQL 是 3306，确保 80 端口没有被其他程序占用。
  2. 登录路由器管理后台：在浏览器输入路由器的管理地址（通常是 168.1.1 或 168.0.1）。
  3. 设置端口转发：在“转发规则”或“虚拟服务器”中，添加一条规则：
    • 外部端口：80 (或你设置的端口)
    • 内部IP地址：你电脑的局域网 IP 地址（如 168.1.105）
    • 内部端口：80
  4. 保存并重启路由器。
  5. 手机访问：手机可以直接通过路由器的 IP 地址访问，http://192.168.1.1。

为什么不推荐：

  • 安全风险：将服务端口暴露在局域网内可能带来安全隐患。
  • 复杂：设置步骤多,容易出错。
  • 依赖路由器：如果换路由器或重置,需要重新设置。

常见问题与解决方案 (FAQ)

Q1: 手机输入 IP 地址后，浏览器提示“连接超时”或“无法访问此网站”。

  • 原因：最常见的原因是手机和电脑不在同一个 Wi-Fi 网络,请检查并确保它们连接的是同一个路由器。
  • 原因：电脑的防火墙（Windows Defender 或第三方杀毒软件）阻止了来自局域网的连接。
  • 解决方案：暂时关闭电脑的防火墙，然后尝试访问，如果可以，说明是防火墙规则问题，你需要添加一个“入站规则”，允许来自局域网 IP 范围的连接访问你的 Web 服务端口（通常是 80 端口）。

Q2: 手机能访问网站，但网站上的图片、CSS、JS 文件都加载不出来（样式错乱）。

  • 原因：这是 WordPress 的“站点地址（URL）”和“WordPress 地址（URL）”设置问题，这些 URL 被硬编码为 http://localhost，所以手机无法通过 localhost 获取这些资源。
  • 解决方案：
    1. 登录你的 WordPress 后台。
    2. 进入“设置” -> “常规”。
    3. 将“WordPress 地址（URL）”和“站点地址（URL）”从 http://localhost 修改为你的局域网 IP 地址，http://192.168.1.105。
    4. 点击“保存更改”。

Q3: 我的方法三（端口转发）为什么还是不行？

  • 原因：你的电脑可能开启了“公用网络”防火墙策略，这会阻止其他设备的访问，请确保你的网络配置为“家庭网络”或“工作网络”，一些宽带运营商（如中国电信、联通）会封锁家庭宽网的 80 端口，导致外部无法访问,这也是为什么这个方法不推荐的原因。

总结与建议

方法 优点 缺点 推荐度
本地域名 简单、安全、稳定 依赖特定本地环境 ⭐⭐⭐⭐⭐ (最高)
局域网IP 通用、灵活 需要修改 wp-config.php，可能受防火墙影响 ⭐⭐⭐⭐
端口转发 可能在复杂网络下有效 设置复杂、有安全风险、可能受ISP限制 ⭐ (不推荐)

对于绝大多数用户，我强烈推荐你从方法一开始尝试。 如果你使用的是手动搭建的环境，那么方法二是最可靠的选择，记得在操作前备份好你的 wp-config.php 文件,以防万一。