WP DEVELOP

EP053. “导入课程完成品网站(All in One WP Migration)”

首页 WordPress 开发课程 JAVASCRIPT 入门 · EP053
约 9 分钟· #EP053#JAVASCRIPT 入门
🔒 登录后可标记已读

📌 并入 EP052(Important Note About The Next Lesson):Brad 提醒如果目前跟着课程进度学得很顺, 可以直接跳过 EP053 这一讲和这条文字说明。EP053 讲的是怎么把「课程最终完成品」整站导入到本地开发环境, 只能导入到全新、空白的 WordPress 安装,因为导入会整个覆盖掉当前这个 WordPress 网站/项目—— 已经有学生忘记这条提醒,把自己一路做到当前进度的项目直接覆盖掉了。如果不想丢失当前进度, 必须另外建一个新的、空白的 WordPress 安装来导入。另外,导入过程实际会花几分钟(不是视频里为了 省时间剪辑出来的几秒钟),因为要导入 20 万条示例宠物数据库记录(是后面插件开发章节 MySQL 相关讲座 要用的素材)。这条提醒本身没有代码,跟着并入这里。

这一讲跳出「跟着课程一步步搭建 fictional-university 网站」的主线,改成教怎么把 Brad 自己那份 「课程做到最后的完整成品」导入到一个全新的本地 WordPress 环境里。适合这几种人:只想学后面某个 章节、不想陪跑前面几十小时内容的人;不喜欢一步步搭建、更想直接拿到成品倒推研究的人;或者单纯想要 一份「正确答案」网站方便对照自己做的进度。导入进来的不只是主题文件,还包括 Brad 那边配置好的完整 数据库(所有插件设置、自定义字段的字段名和配置、各种数据),这些东西如果只下载主题 zip 是拿不到的这一讲是工作流程/工具操作讲座,不写代码,也没有产出可以贴到「代码实现」的文件改动。

本讲无代码改动

这一讲没有涉及主题或插件代码的新建/修改,跳过「涉及文件」「代码实现」小节模板,改成记录操作步骤。


操作步骤

  1. 准备一个全新、空白的 WordPress 安装(在 Local App 里新建一个空项目),
    不要在自己已经做出进度的项目上操作,导入会完全覆盖当前网站的所有内容和设置。
  2. 登录这个新空白站点的 wp-admin 后台,去插件 → 安装插件,搜索 All in One WP Migration
    (作者是 ServMask),安装并启用。
  3. 启用后侧边栏会多出一个 All in One WP Migration 菜单,鼠标悬停选择 Import
  4. 从 Udemy 这一讲的 Resources(课程资源)区下载 finished.wpress.zip(约 30MB 左右),
    下载完先解压,得到 finished.wpress 文件(该插件认的是 .wpress 格式,不认 zip,
    所以必须先解压)。
  5. 回到后台的 Import 页面,点击 Import FromChoose File,选中刚解压出来的
    finished.wpress 文件。

[截图:wp-admin 后台 All in One WP Migration 插件的 Import 页面,Import From 按钮和文件选择界面]

  1. 系统会弹窗提醒:这个操作会完全清空并覆盖当前这个 WordPress 安装的所有数据,
    确认这是全新空白项目、且愿意接受之后再点 Proceed 继续。
    • 不要在关心的网站上做这件事。
    • 不要在正式上线的公开生产环境网站上做这件事,只能在本地开发环境里做。
    • 导入进来的管理员账号用户名/密码都是 admin / admin,另外还有一个访客测试账号
      用户名/密码都是 guest / guest(本地环境用这种弱密码没关系,仅供测试)。
  2. 导入完成后点击 Finish
  3. 去 设置 → 固定链接(Permalinks),滚动到底部点 Save Changes,强制 WordPress
    按新站点的域名重新生成固定链接结构(这一步会要求重新登录,因为数据库已经换成
    Brad 那份完成品的数据库,要用上一步提到的 admin / admin 登录)。
  4. 保存完固定链接之后,网站前台就是课程完整做完之后的最终效果了,可以正常浏览、
    登录访客账号测试「我的笔记」「点赞教授」等功能。
  5. 因为整套 wpress 备份不包含 node_modules,需要重新给 JS 构建工具跑一次安装流程:
    在电脑硬盘里找到这个新项目的主题文件夹(Local App 里右键项目 → Reveal in
    Finder / Show in Explorer,一路进到 `app/public/wp-content/themes/
    fictional-university-theme),在这个文件夹打开命令行,跑 npm install`,
    装完再跑 npm run start。可以到 src/index.js 末尾临时加一行 alert() 测试,
    保存后前台刷新看到弹窗,就说明构建工具链也接上了。

导入后能看到但这一讲不讲解的内容(仅提及)

transcript 里顺带展示了几个「完成品」里才有、但课程当前进度还没讲到的功能,只是带过展示, 不是这一讲的教学内容:

  • 校园地图页(Campus)的 Google 地图不会正常工作,因为需要自己的 Google Maps API key,
    这个话题会在专门讲校园地图的章节详细讲。
  • 博客文章页顶部/内文会看到几个课程后面插件开发章节才会做的插件效果
    (字数统计类的、过滤 "ipsum" 字样的、选择题类型的多选题插件、Featured Professor 这个
    自定义 Block 类型插件)。
  • 地址栏加上 /pet-adoption 能看到一个用自定义数据库表存了 10 万条以上宠物记录的示例页面,
    这是插件开发章节讲怎么处理大量自定义数据库表数据(而不是全部塞进 WordPress 默认的
    post 类型)时用的素材。

常见坑

  • 千万不要在自己已经有进度的项目上导入,会整个覆盖掉当前网站,已经有学生因为漏看这条提醒
    丢失了做到一半的进度(这也是 EP052 这条并入说明存在的原因)。
  • 下载下来的是 .wpress.zip必须先解压成 .wpress 文件才能被插件识别,直接拿 zip 去导入
    插件是看不懂的。
  • 实际导入耗时是几分钟(不是视频里剪辑呈现的几秒),因为要导入 20 万条宠物示例数据。
  • 只能在本地开发环境的空白安装上做,不能在正式上线的网站上做。
  • 导入完成后要记得去 固定链接 页面点一次 Save Changes,否则链接结构可能跟新域名对不上。
  • 导入进来的 admin/adminguest/guest 账号密码非常弱,只适合本地环境,
    不能照搬到正式上线的网站。

延伸 / 后续讲座会用到

这一讲导入的完成品网站主要是拿来当参考/对照用的,课程接下来还是会继续按部就班从当前进度往下搭建 fictional-university 主题;后面讲到 Google 地图、Live Search AJAX、插件开发(自定义数据库表、 Gutenberg Block)等章节时,都可以拿这份完成品网站里的对应功能作为「正确答案」参照。

Sources

Udemy:

  • Become a WordPress Developer: Unlocking Power With Code — Section 11, EP052(📌 并入部分)
  • Become a WordPress Developer: Unlocking Power With Code — Section 11, EP053