首页 > 文章专栏 > 正文

如何在正式上线前预览你的WordPress网站

我们一直告诉读者:发布前一定要预览。多年来,我们创建和更新了数千个 WordPress 页面和文章,预览内容已成为我们编辑流程中不可或缺的一环。

跳过这一步,你的访客可能会遇到意外状况,比如布局错乱、图片缺失或错别字。我们也曾踩过这些坑,但这些其实很容易避免。

本文将带你了解发布前预览 WordPress 网站的有效方法,让你自信地确保网站外观和功能完全符合预期。 ‍

预览 WordPress 网站,包括主题、文章、页面等

以下是本指南涵盖内容的快速概览。你可以点击下方链接跳转到具体章节:

  • 使用“即将上线”模式预览网站
  • 让客户在发布前预览网站
  • 创建 WordPress 测试站点来预览更改
  • 预览文章和页面后再发布
  • 切换主题前预览
  • 预览主题自定义
  • 预览自定义主题
  • 发布前预览着陆页
  • 额外技巧:用视觉回归测试捕获设计问题
  • 常见问题:在发布前预览网站
  • 下一步:改善网站管理

准备开始?

使用“即将上线”模式预览网站

如果你正在搭建一个新网站,建议开启“即将上线”模式,这样你在工作时访客会看到专业的即将上线页面,而你仍可登录后台正常编辑,访客则看不到网站内容。

更棒的是,你可以在正式上线前预览网站并运行所有必要测试。

要实现这一点,你需要使用 SeedProd。它是市场上最好的 WordPress 网站构建器,能让你轻松展示漂亮的即将上线页面。

我们的一些合作伙伴品牌使用 SeedProd 搭建网站,效果非常出色。我们也在很多教程中亲自使用过它。

想了解更多?可以查看我们的 SeedProd 评测

首先,你需要注册一个 SeedProd 账户。在 SeedProd 官网点击“Get SeedProd Now”按钮,选择套餐并完成支付。

SeedProd 首页

注意:本教程使用 SeedProd 专业版,以便使用所有模板和高级功能。但免费版也能创建简单的即将上线页面。

完成后,你会拥有 SeedProd 账户后台,可以找到专业版的 zip 文件和许可证密钥。

接下来,安装并激活 SeedProd 插件。

在 WordPress 后台,进入 插件 » 安装插件

WordPress 插件安装页面

在搜索框中找到插件,点击“安装”然后“激活”。

SeedProd 插件安装按钮

详情可参考我们的 WordPress 插件安装指南

激活后,进入 SeedProd » 设置 页面输入许可证密钥。你可以在 SeedProd 网站的账户信息中找到。

添加 SeedProd 许可证密钥

接下来,进入 SeedProd » 着陆页 页面,点击“设置即将上线页面”按钮。

设置即将上线页面

然后,插件会要求你选择模板。SeedProd 提供了多个专业设计的即将上线模板,旨在提升转化率。

选择模板

选择模板后,SeedProd 的页面构建器界面会打开。这是一个直观的设计工具,你可以点击编辑任何元素,或从左侧栏拖拽新元素到布局中。

页面构建器界面

你还可以添加邮件订阅表单和社交媒体按钮,以便用户在发布前关注你的品牌。

设计完成后,切换到顶部的“连接”选项卡,可以集成邮件营销服务,以便在网站上线时通知订阅者。

更详细的步骤可参考我们的 SeedProd 创建即将上线页面教程

连接邮件营销服务

完成后点击“保存”,然后选择“发布”使即将上线页面就绪。注意,它还未激活,下一步才会生效。

发布即将上线页面

关闭页面构建器,返回 SeedProd » 着陆页 页面。点击即将上线页面的开关,设置为“激活”。这样所有访客都会看到你的即将上线页面,而非实际网站。

激活即将上线页面

现在你可以退出后台,或在无痕窗口中访问网站,你会看到即将上线页面。

即将上线模式

你仍然可以登录后台继续工作,登录后也能预览实际网站。

预览网站

网站完成后,回到 SeedProd » 着陆页 页面,关闭即将上线页面的开关即可。

关闭即将上线页面

相关:SeedProd 还支持维护模式,你可以在工作时预览网站。不了解区别?查看我们的 即将上线 vs 维护模式对比

让客户预览网站

如果你为客户搭建网站,有多种简单方法让客户在发布前预览更改。最简便的方式就是使用上面提到的 SeedProd 即将上线页面。

激活即将上线模式后,点击“编辑页面”按钮。

编辑即将上线页面

打开页面构建器,切换到“页面设置”选项卡,点击“访问控制”部分。

允许客户预览网站

在这里创建“绕过 URL”,并设置链接有效时长。保存后,客户即可使用该秘密链接绕过即将上线页面,直接预览网站,无需创建用户账户。

如果网站已上线,但你希望分享更改给客户预览,请参考下一步。

创建 WordPress 测试站点

行业最佳实践是创建测试站点,以便在应用到正式站前预览和测试更改。测试站点是网站的私有克隆,不对公众开放,你可以在实时服务器上安全测试。

许多顶级 WordPress 主机商提供一键测试站点功能,例如 Hostinger。我们推荐使用 Hostinger,它提供一键测试站点,方便你预览更改并同步到正式站。

下面以 Hostinger 为例展示步骤(其他主机类似)。

首先,确保你的主机面板中已安装并激活了相关插件。在 WordPress 后台,你可能会看到主机商提供的菜单项。

主机插件已安装

登录主机控制面板,找到“网站”选项,点击你的网站旁的“设置”。

主机网站设置

在站点管理区域,切换到“插件”选项卡,激活主机插件。

激活主机插件

确认插件激活后,在 WordPress 后台找到主机插件页面,切换到“测试站点”选项卡。

测试站点选项卡

点击“创建测试站点”,插件会生成测试站点。

创建测试站点

完成后,点击“当前未编辑”切换到测试站点开始工作。

切换到测试站点

切换后,WordPress 后台顶部会显示红色“测试环境”标签,帮你区分正式站。

测试环境标签

预览满意后,回到主机插件页面的“测试站点”选项卡,选择“部署所有更改”并点击刷新按钮,将更改推送到正式站。

部署所有更改

更多细节请参考我们的 WordPress 测试站点创建指南

预览文章和页面后再发布

WordPress 块编辑器会自动使用主题样式显示实时预览,但可能无法清晰展示包含页眉、侧边栏等布局元素的完整效果。

块编辑器预览

块编辑器允许你在不发布的情况下预览。点击右上角的“预览”按钮。

预览选项

你可以在桌面、平板和移动端预览之间切换。建议始终检查移动端预览,确保内容在小屏幕上显示良好。

选择设备类型后,点击“在新标签页中预览”查看完整预览。

如果你想让其他人预览未发布的文章,请参考我们的 公开预览教程

切换主题前预览

通常激活主题会立即生效,但你可以先预览再激活。安装主题后,点击“实时预览”链接。

安装后实时预览

或者进入 外观 » 主题 页面,鼠标悬停在已安装的主题上,点击“实时预览”。

实时预览主题

WordPress 会打开主题自定义器,展示使用当前内容的实时预览。

主题自定义器实时预览

你可以退出自定义器而不激活主题,但自定义设置不会保存。满意后,点击“激活并发布”按钮。

需要帮助切换主题?参考我们的 切换主题教程

预览主题自定义

大多数 WordPress 主题可以通过 外观 » 自定义 预览更改。

自定义主题预览

你可以尝试不同主题选项、更改菜单、自定义小工具、添加 CSS 等,所有更改不会立即生效。满意后点击“发布”。你也可以点击齿轮图标,将更改保存为草稿、定时发布或分享预览链接给客户。

保存和发布更改

注意:主题自定义器不适用于块主题。如果你使用块主题,请进入 外观 » 编辑器

全站编辑器预览

全站编辑器允许你使用块编辑主题模板,并实时预览。更多详情参考我们的 全站编辑指南。注意:编辑器更改会直接应用,没有“保存草稿”选项。

预览自定义主题

想用实时预览创建自定义主题而不写代码?SeedProd 是最佳主题构建器,提供可视化界面和实时预览。

SeedProd 首页

首先安装并激活 SeedProd 插件,然后进入 SeedProd » 设置 输入许可证密钥。

添加许可证密钥

接下来,进入 SeedProd » 主题构建器,点击“主题”按钮。

主题构建器

弹出窗口中选择一个起点主题。

选择起始主题

点击选择后,SeedProd 会生成所有主题模板文件。你可以点击任意文件进行编辑。

主题模板

SeedProd 包含直观的拖拽构建器,使用块和区块创建漂亮布局。你可以随时预览效果。

文章标签:#WordPress#主题测试#即将上线模式#测试站点#网站预览

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/如何在正式上线前预览你的wordpress网站