如果你在用 WordPress 做外贸网站或双语博客，一定听说过 TranslatePress 这个插件。它最大的优点是：直接在页面上可视化翻译，不用改代码。但很多朋友卡在了“语言切换器”的样式上——默认的切换器太朴素，想改得漂亮一点，怎么弄？

别急，今天咱们就用大白话，把 TranslatePress 多语言切换器的自定义方法讲清楚。不管你是新手还是老手，都能找到适合自己的方案。

一、先认识一下默认的语言切换器

安装激活 TranslatePress 后，你会在网页右下角看到一个默认的下拉框或列表，用来切换语言。它的样子大概是：

• 一个蓝色的下拉小箭头
• 显示当前语言名称（比如“English”）
• 点开就能选择其他语言

这个效果够用，但如果你想让切换器融入网站设计，比如变成“中/EN”按钮、带国旗图标、或固定在顶部导航栏，那就得动点“小手术”了。

二、自定义前，你需要知道的3个核心概念

1. 语言切换器本质上是一个“组件”，TranslatePress 提供了多种显示方式，比如下拉框、横排列表、竖排列表。
2. 它可以通过短代码插入到任意位置，比如文章里、侧边栏、页脚。
3. 它也可以被添加到 WordPress 菜单中，成为导航栏的一部分。

理解这三点，你就能随心所欲地摆放它了。

三、方法1：用“小工具”直接拖拽（最简单）

这是给小白准备的方法，全程鼠标操作，不用写代码。

1. 进入 WordPress 后台 → 外观 → 小工具（有些主题叫“组件”或“挂件”）。
2. 找到“TranslatePress 语言切换器”这个小工具（不同版本可能叫“语言切换器”或“TranslatePress”）。
3. 将它拖到你想要的位置，比如“侧边栏”或“页脚”。
4. 保存即可。

优点：零门槛，改改位置就完事。 缺点：样式还是默认的，只能显示在主题预留的区域。

如果你觉得默认样式太丑，别走开，下面的方法能让你换皮肤。

四、方法2：用短代码放任意位置

短代码是 WordPress 的“魔法咒语”，你只需要把一段代码粘贴到文章、页面或文本小工具里，就能显示出语言切换器。

TranslatePress 的官方短代码是：

[trp_language_selector]

用法举例：

• 在文章顶部插入：新建一个“文本”块，粘贴上面代码。
• 在页脚加一个文字小工具，粘贴代码。

它默认显示为下拉框。如果你想改成水平排列的按钮，可以加参数：

[trp_language_selector type="list"]

type 参数支持：

• dropdown（默认，下拉框）
• list（水平列表，每个语言一个链接）

比如你想让语言列表横着排，就写：

[trp_language_selector type="list"]

进阶技巧：还能加 flag 参数显示国旗吗？抱歉，标准版不支持直接显示国旗，需要靠 CSS 或第三方代码实现（后面会讲）。

优点：位置灵活，想放哪放哪。 缺点：样式依然受插件限制，不过至少可以换列表形式。

五、方法3：加到菜单里（导航栏常驻）

如果想让语言切换器出现在网站顶部菜单栏，这是最常见的需求。操作如下：

1. 进入 WP 后台 → 外观 → 菜单。
2. 创建或编辑一个菜单。
3. 在左侧“添加菜单项”区域，找到“语言切换器”（TranslatePress Language Switcher），勾选并添加到菜单。
4. 把菜单位置设为“顶部导航”或“主菜单”。
5. 保存。

这时，你的导航栏就会出现一个“语言下拉框”，点开就能切换。

注意：有些主题的自定义菜单货架太窄，可能会显示不全，需要 CSS 调整宽度。

六、方法4：用 PHP 代码硬核插入（开发者模式）

如果你懂一点 PHP，可以直接在主题的 functions.php 文件或子主题中添加代码，让切换器出现在主题模板的任何位置。

例如，在 header.php 里要放切换器的地方，加入以下代码：

<;?php echo do_shortcode('[trp_language_selector]'); ?>;

或者用函数方式：

<;?php
if (function_exists('trp_custom_language_selector')) {
    trp_custom_language_selector();
}
?>;

不过，更常见的是用 WordPress 的 wp_nav_menu 过滤器，把切换器加到菜单末尾。这里不展开，太深了。写代码的好处是可控性最强，坏处是主题更新可能会覆盖，建议用子主题。

七、如何彻底改变样式？（CSS 教学时间）

前面的方法只是改变了位置和排列形式，但默认的蓝色下拉框还是很“ WordPress ”。要真正自定义外观——比如改成圆形按钮、加国旗、换字体、改颜色——就得请出 CSS 了。

别慌，CSS 不长，复制粘贴就行。

步骤1：给切换器加一个“包装器”以便针对样式

在 TranslatePress 设置里，你可以选择“语言切换器样式”，比如“下拉框”或“列表”。然后我们需要找到它的 CSS 类名。通常，切换器的外层元素包含类 trp-language-switcher。

举个例子，如果你用短代码 [trp_language_selector type="list"]，生成的 HTML 大致像：

<;div class="trp-language-switcher trp-language-switcher-container">;
  <;ul>;
    <;li>;<;a href="#">;English<;/a>;<;/li>;
    <;li>;<;a href="#">;中文<;/a>;<;/li>;
  <;/ul>;
<;/div>;

步骤2：写 CSS 改造外观

你可以在 WordPress 后台 → 外观 → 自定义 → 额外 CSS 中添加如下代码。

例子1：把列表变成漂亮的胶囊按钮

.trp-language-switcher ul {
  list-style: none;
  display: flex;
  gap: 5px;
  padding: 0;
}
.trp-language-switcher li a {
  background: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
}
.trp-language-switcher li a:hover {
  background: #0073aa;
}

保存后，语言列表就变成黑底白字的圆角胶囊了。

例子2：显示国旗（靠第三方图标）

TranslatePress 本身不提供国旗，但你可以用 CSS 伪元素或者字体图标。最简单的是用 Emoji 国旗，但 Windows 上显示不全，不推荐。

更好的办法是给每个语言链接加一个背景图片。前提是你知道每个语言的代码。假设你有英文和中文，可以这样：

/* 英文链接 */
.trp-language-switcher li a[lang="en-US"] {
  background-image: url('https://yourdomain.com/flag-en.png');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 25px;
}
/* 中文链接 */
.trp-language-switcher li a[lang="zh-CN"] {
  background-image: url('https://yourdomain.com/flag-zh.png');
  padding-left: 25px;
}

但前提是 a 标签上确实有 lang 属性。如果没有，就得用更高级的选择器了。

例子3：隐藏默认的“当前语言”文字

如果你只想显示国旗图标而不是文字，可以进一步裁剪字体：

.trp-language-switcher a span {
  display: inline-block;
  font-size: 0;
  width: 25px; /* 等宽 */
}

这种方式很粗糙，但让动手党玩得很开心。

八、高级玩法：用插件自带设置项

TranslatePress 的设置面板里藏着不少选项。进入 设置 → TranslatePress → 高级，你会看到：

• 语言切换器样式：下拉框/列表
• 切换器位置：插件默认提供“右下角”等几种选择（前提是你没禁用）。
• 自定义语言选择器：允许你用 HTML 和 CSS 完全自己写切换器模板。

如果你选“自定义”，它会给你一个文本框，你可以直接写 HTML 和短代码结合，例如：

<;div class="my-switcher">;
  [trp_language_selector type="list"]
<;/div>;

然后配合 CSS 完全控制样式。这相当于给了你一个“模板引擎”。

小提示：如果默认的右下角飘浮切换器一直显示，你想隐藏它，就在设置里把“显示语言切换器”关掉，或者全局禁用，然后自己去放短代码或菜单项。

九、常见问题排查

Q: 为什么我的菜单里没有“语言切换器”选项？

可能是版本太旧。更新 TranslatePress 到最新版。另外，有些主题的菜单面板会过滤第三方菜单项，试试用“自定义链接”临时添加一下。

Q: 切换器在手机上显示变形？

肯定需要响应式 CSS。追加以下代码：

@media (max-width: 768px) {
  .trp-language-switcher ul {
    flex-direction: column;
    align-items: flex-start;
  }
}

让它竖着排。

Q: 我想让切换器只显示图标，不显示文字，靠谱吗？

靠谱，但需要 CSS 隐藏文字，并且给 <;a>; 设置宽度和背景。不过更推荐使用“语言代码”或简写，比如只显示“EN”和“中文”，可以用 CSS 把长名称替换成缩写。但注意，不同语言名称长度不同，操作要谨慎。

十、总结：自定义其实很简单

随心所欲地自定义 TranslatePress 语言切换器，核心就三步：

1. 选位置 —— 用菜单、小工具或短代码。
2. 选类型 —— 下拉框还是列表。
3. 改样式 —— 用额外 CSS 覆盖默认皮肤。

你不需要成为程序员，只需要会复制粘贴，就能做出一个完全贴合网站风格的语言切换器。

如果上述方法对你来说还是太复杂，也别气馁——现在很多主题已经内置了多语言切换样式，你只需要打开主题的“多语言”开关，就能拥有漂亮的切换按钮。TranslatePress 作为后盾，依然能提供可视化的翻译体验。

记住：好网站，细节决定档次。一个清爽的语言切换器，会让用户觉得你的网站真的“国际化”了。

希望这篇文章能帮到你。快去试试吧，让你的多语言切换器不再“路人脸”！

[返回上一级]