第5课：跨境独立站页面排版实战（ShopAGG + WordPress区块编辑完整指南）

深入讲解如何在 ShopAGG 部署的 WordPress/WooCommerce 网站中，对页面排版、布局和内容进行自定义修改。从清理垃圾评论、使用 Gutenberg 区块编辑器，到链接设置、移动端适配以及版本恢复，提供一套完整的实操方法。

引言
在完成跨境电商独立站的搭建、收款配置以及页眉页脚修改之后，下一步的重点就是优化网站页面内容与布局。页面结构直接影响用户体验、转化率以及SEO效果。
ShopAGG 提供的 WordPress 环境，默认集成了 Gutenberg 区块编辑器，使页面修改更加灵活。本节将带你系统掌握页面编辑的核心逻辑。

一、清理垃圾评论，优化后台环境
当网站被搜索引擎收录后，通常会出现垃圾评论问题。这些评论多由机器人发布，带有外链，用于引流。
虽然默认评论需要审核，但大量垃圾评论依然会存储在数据库中，长期可能影响网站性能。
解决方法：
进入后台：
“设置 → 讨论”
勾选：
“用户必须注册并登录才可以发表评论”
保存后即可有效减少垃圾评论。
同时建议定期进入“评论”模块：
批量选择垃圾评论
移动到回收站
清空回收站

二、页面排版与布局（Gutenberg编辑器）
1. 进入页面编辑器
打开网站前台页面，登录管理员账号后，点击右上角“编辑页面”按钮，即可进入页面编辑界面。

2. 区块（Block）概念
WordPress页面由多个“区块”组成，每一个区块就是一个独立模块，例如：
文字
图片
按钮
产品列表
轮播图
页面效果就是通过这些区块组合完成的。

3. 添加新区块
在页面任意位置点击“+”按钮，即可添加区块。
常见操作：
添加文字说明
插入图片
添加按钮
插入文章列表
选择后会自动插入到当前位置。

4. 修改区块内容
选中区块后可以直接修改内容：
文字：直接编辑
图片：右侧替换
按钮：修改文字和链接
右侧面板提供更多设置：
字体大小
颜色
背景
间距

5. 区块层级（重点）
很多模块是“嵌套结构”，例如轮播图。
如果修改不到对应内容：
操作逻辑：
选中当前区块 → 找不到设置 → 选择父区块 → 再查找
这是所有复杂区块修改的核心方法。

6. 修改轮播图图片
步骤：
选中轮播图内容
找到父级区块
在右侧找到“背景图片”
点击“替换”
即可完成修改。

7. 添加链接（非常重要）
页面所有元素都可以加链接：
文字加链接：
选中文字 → 点击链接图标 → 输入网址
按钮/图片链接：
在右侧设置中找到链接项
注意：
必须使用完整URL（带 http/https）

8. 移动端适配
编辑器支持三种视图：
电脑端
平板端
手机端
点击右上角切换按钮即可查看不同设备效果，并进行单独调整。

9. 版本恢复功能
WordPress 自动保存修改记录。
进入：
页面 → 修订版本
可以：
查看历史版本
恢复任意时间点
适合：
修改出错
回退页面

三、实用技巧
图片尺寸要匹配模板比例，避免变形
不建议开启浏览器翻译，会导致编辑器异常
修改时优先调整区块，而不是直接改结构
多尝试、多保存，熟悉每个区块功能

结语
通过本节内容，你已经掌握了：
页面结构修改方法
区块编辑逻辑
图片与文字替换
链接设置
移动端适配
版本恢复
WordPress 的学习曲线确实存在，但一旦熟悉区块逻辑，就可以实现非常灵活的网站设计。
后续内容将继续讲解更细致的页面优化技巧，逐步完善你的跨境电商独立站。