如何用Polylang和编辑器实现WordPress头部的自动翻译？

我已通过Polylang插件将个人网站翻译成法语、英语和希腊语，最初尝试实现单个头部模板根据页面语言动态显示Polylang自定义字符串译文，但遇到问题后只能手动复制头部并翻译，未使用插件功能。目前我将模板拆分为独立部件，为每种语言创建对应头部，但目标仍是通过自定义字符串实现单头部自动翻译。

我尝试了以下方案，但导航选项「Homepage」及其HTML会被自动删除，求原因及解决办法：

尝试的实现代码 #

1. functions.php 代码 #

// Register custom string in Polylang
add_action('init', function() {
  pll_register_string('mytheme-homepage', 'Home');
});

// Add custom CSS with translated string
function add_custom_css() {
    ?>
    <style>
        :root {
            --homepage-text: "<?php echo pll__('Home'); ?>";
            
        }
    </style>
    <?php
}
add_action('wp_head', 'add_custom_css');

2. 附加CSS代码 #

.nav_home::before {
    content: var(--homepage-text);
}

3. 导航菜单HTML代码 #

<!-- Translated Navigation Link -->
<!-- wp:navigation-link {"label":nav_home,"url":"https://myurl","kind":"custom"} /-->

问题原因 #

1. Gutenberg区块解析限制：WordPress区块编辑器会严格校验wp:navigation-link的字段格式，label要求是字符串，无法识别nav_home这类变量，会直接清理无效的导航链接区块。
2. CSS伪元素方案的局限性：用CSS注入文本的方式不符合WordPress导航菜单的常规逻辑，不仅容易出现渲染问题，还无法被编辑器正确识别。

解决方案 #

方案一：修复原有动态翻译逻辑（直接在模板输出） #

放弃CSS伪元素和区块的方式，直接在头部模板的导航部分编写PHP代码输出翻译文本：

<nav class="site-navigation">
    <!-- 直接输出翻译后的首页链接 -->
    <a href="<?php echo esc_url(home_url('/')); ?>" class="nav_home">
        <?php echo pll__('Home'); ?>
    </a>
    <!-- 其他导航项同理 -->
</nav>

同时可以移除之前注册CSS变量的代码，这种方式直接可靠，不会被编辑器清理。

方案二：使用Polylang官方菜单翻译（更规范） #

这是Polylang推荐的标准菜单翻译方式，无需自定义字符串：

1. 后台进入外观 > 菜单，为每种语言创建对应菜单（如「主菜单-英语」「主菜单-法语」），在菜单编辑页的「语言」 metabox中关联对应语言。
2. 在Polylang设置页（Polylang > 设置 > 语言）勾选「菜单」选项，开启菜单翻译支持。
3. 头部模板中调用菜单：

wp_nav_menu(array(
    'theme_location' => 'primary', // 对应你的主题菜单位置
));

Polylang会自动根据当前页面语言加载匹配的菜单。

补充提示 #

• 模板中静态文本的翻译，继续使用pll_register_string()和pll__()是正确的，但要直接在PHP中输出，不要通过CSS间接注入。
• 避免用Gutenberg区块插入需要动态翻译的内容，编辑器无法识别PHP变量或自定义标记，直接在PHP模板中编写动态代码更稳定。

内容的提问来源于stack exchange，提问作者Em Dm