从菜单底部到右上角顶栏，一次块主题布局的折腾实录
最近我把网站主题从 Hueman 切换到了 WordPress 官方的 2025 主题（Twenty Twenty-Five），这是一个基于块的现代主题。网站需要支持中英双语，用的是 Polylang 插件 + TMS Extensions for Polylang 增强包。
主题切换后，我遇到了一个看似简单却折腾了好一阵子的问题：
语言切换器默认出现在菜单底部，我想把它放到页面右上角。
图 1 是旧主题时在菜单末尾添加的语言切换器，换了新主题后默认效果仍然是语言切换器在菜单中。（见图 1）
这篇文章记录了从一头雾水到最终解决的全过程。
一、为什么语言切换器的位置很重要？
在开始讲操作之前，先简单说一下为什么我坚持要调整这个位置。
Nielsen Norman Group 的用户体验研究指出，语言切换器对非母语用户来说是一个”首要需求”，而不是”次要选项”。把它放在页面底部或菜单深处，会直接增加用户的跳出率。
大多数国际网站的惯例是放在页面右上角，用户已经形成了这个使用习惯。
二、我的环境
| 项目 | 版本/名称 |
|---|---|
| WordPress 主题 | Twenty Twenty-Five（2025 主题，块主题） |
| 多语言插件 | Polylang |
| 增强插件 | TMS Extensions for Polylang |
| 语言切换器 | TMS 的 “Language Switcher Advanced” 块 |
说明：Polylang 自带语言切换器，TMS Extensions 则提供了一个增强版块 “Language Switcher Advanced”，两者的添加方式类似。
三、尝试过的方案（弯路记录）
方案一：通过”外观 → 菜单”添加
这是很多教程里最常推荐的方法：进入 外观 → 菜单，在”显示选项”中勾选”语言切换器”，然后添加到菜单中。
问题：2025 主题是块主题，在”外观”菜单下根本找不到传统的”菜单”编辑界面——那是经典主题才有的。
方案二：使用”小工具”区域
在 外观 → 小工具 中，找到了”Polylang 语言切换器”小工具，拖拽到顶部小工具区域。
问题：页面顶部并没有预留小工具区域，语言切换器无法出现在我想要的位置。
方案三：直接在页眉中添加块
我进入了站点编辑器，在页眉模板中直接添加了 Language Switcher Advanced 块，然后尝试把它设为”右对齐”。
问题：虽然块确实在页眉区域了，但它的宽度被父级容器限制，整个行块只占页面宽度的 2/3 左右。设置了”右对齐”后，语言切换器只是跑到了这个容器的右侧，而不是页面的最右侧。
四、最终解决方案（一步一步来）
第一步：进入站点编辑器
从 WordPress 后台，点击 外观 → 编辑器，在站点标题块的上下文菜单中，选择”在之前添加”。（见图 2）
第二步：添加”行”块
在页眉模板中，找到想放置语言切换器的位置，添加一个 “行”块（Row）。（见图 3）
为什么用”行”块而不是直接添加语言切换器？因为”行”块是一个容器，可以控制里面所有内容的整体对齐方式。单独添加语言切换器的话，很难精确控制它的位置。
第三步：将语言切换器放入行块并设置布局
在行块内部添加 “Language Switcher Advanced” 块，然后选中行块，在布局设置中：
- 将宽度设置为 “全幅”（Full width）
- 将水平对齐设置为 “右对齐顶”（见图 4）
第四步：调整语言切换器下拉列表的换行问题
设置完成后，打开 /en 英文页面，点击 “English”，发现下拉列表中 “中文（中国）” 换行显示，不符合预期。（见图 5）
解决方法：选中语言切换器区块，在尺寸设置中，将宽度设为 固定 200px。（见图 6）
再次打开 /en 页面点击 “English”，下拉列表中 “中文（中国）” 一行显示，符合预期。（见图 7）
第五步：（可选）添加背景色让顶栏更明显
为了让语言切换器在视觉上独立出来，我给它加了一个淡淡的背景色。
操作路径：选中行块 → 右侧面板 → “颜色” → “背景”，从默认的主题色彩中选择一个颜色。（见图 8）
一个小插曲：主题颜色方案预设只有 8 种颜色，没有浅灰色。我选了一个淡粉色
#FFBAF3，效果意外地不错——温柔、不抢眼，又能清晰区分顶栏区域。
同时，在”尺寸”设置中给行块上下各加一些 内边距（Padding，比如 8-12px），让顶栏不显得那么拥挤。
第六步：保存并清缓存
点击右上角 “保存” 按钮。
如果有缓存插件（比如 W3 Total Cache），记得清空所有缓存，然后刷新前台页面查看效果。
五、最终效果
经过以上步骤，语言切换器最终在页面上的效果符合预期。（见图 9）
六、踩坑总结
| 问题 | 原因 | 解决方法 |
|---|---|---|
| 找不到”菜单”界面 | 2025 是块主题，没有传统菜单 | 使用站点编辑器 |
| 行块宽度只有 2/3 | 默认宽度受父级容器限制 | 设置行块为”全幅” |
| 语言切换器位置不对 | 对齐方式未正确设置 | 选择”右对齐顶” |
| 下拉列表换行显示 | 区块宽度不足 | 固定宽度设为 200px |
| 颜色选择受限 | 主题预设了 8 种颜色 | 从主题色彩中选择合适的颜色 |
七、技术要点总结
通过这次折腾，总结了几点关于块主题布局的心得：
1. 理解”行”块的作用
行块（Row） 水平排列内部元素，适合做顶栏、导航等横向布局。这次的需求是”水平排列 + 右对齐”，所以用”行”块是正确的选择。
2. “全幅”是突破父级限制的关键
在块主题中，每个块默认继承父级容器的宽度。要让某个块占满屏幕宽度，必须显式设置为”全幅”。
3. 下拉列表换行问题的解决
语言切换器下拉列表的显示宽度受区块宽度影响，如果出现换行，可以通过固定宽度来解决。
4. Polylang 语言切换器的三种添加方式
| 方式 | 适用场景 |
|---|---|
| 独立的”行”块 + 语言切换器 | 需要精确定位在顶栏（本文采用） |
| 放入导航菜单 | 切换器作为菜单项出现在导航栏中 |
短代码 [polylang_language_switcher] | 任意位置，兼容性最强 |
5. Polylang vs TMS Extensions 的选择
| 场景 | 推荐 |
|---|---|
| 只需要基础切换功能 | Polylang 自带语言切换器 |
| 需要更多样式定制 | TMS 的 “Language Switcher Advanced” |
| 需要为不同语言配置不同菜单 | TMS 的 “Menu by Language” |
我的做法是用了 TMS 的 “Language Switcher Advanced” 块来实现切换器，同时用 “Menu by Language” 功能分别为中英文创建了不同的菜单结构。
八、后记
如果也在使用 WordPress 块主题 + Polylang，希望这篇文章能节省一些时间。虽然只是一行小小的切换器，但折腾下来让我对块主题的布局逻辑有了更深的理解。
发表回复