为WordPress站点添加自定义字体、繁简体转换、多语言

WordPress 自 5.9 版本引入全站编辑（Full Site Editing，简称 FSE）以来，网站构建方式发生了根本性变革。传统的"主题+插件+代码修改"模式正在向"区块化+可视化+theme.json配置"模式转型。

然而，当我们需要实现以下三个核心需求时，很多用户会感到困惑：

本节课将系统性地解决这三大问题，帮助你构建一个字体优美、语言灵活、面向全球用户的现代化WordPress站点。

前置知识要求

在开始本节课之前，你应当具备以下基础知识：

1. WordPress基础操作：了解后台管理、插件安装、主题切换等基本操作
2. 区块编辑器使用经验：熟悉Gutenberg编辑器的基本使用
3. 对FSE有初步认识：了解什么是区块主题、站点编辑器（Site Editor）
4. 基础的文件管理能力：能够通过FTP/SFTP或主机文件管理器操作文件

💡 提示：如果你仍在使用经典主题（Classic Theme），本课程的部分内容可能不适用。建议先迁移至区块主题，或选择Twenty Twenty-Three、Twenty Twenty-Four等官方区块主题进行学习。

📖 一、理解WordPress全站编辑的字体系统

1.1 FSE字体系统的演进历程

WordPress的字体处理能力经历了显著的演进过程，理解这一历程有助于我们更好地掌握当前的最佳实践：

1.2 theme.json：FSE的核心配置文件

在深入字体配置之前，我们需要理解theme.json文件的核心地位。这个文件是FSE主题的"大脑"，控制着网站的几乎所有样式设置。

theme.json的基本结构：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      // 字体相关设置在这里
    },
    "color": {
      // 颜色设置
    },
    "spacing": {
      // 间距设置
    }
  },
  "styles": {
    // 全局样式定义
  }
}

⚠️ 重要提示：version字段非常关键。WordPress 6.6+推荐使用version 3，它提供了最新的功能支持。如果你使用的是较早版本，某些功能可能不可用。

1.3 字体管理的三种方式对比

在FSE时代，我们有三种主要的字体管理方式：

方式一：通过theme.json硬编码（开发者方式）

优点：

• 完全控制，可纳入版本管理
• 主题更新时字体配置不会丢失
• 适合主题开发者分发主题

缺点：

• 需要编辑代码文件
• 修改后需要清除缓存
• 对非技术用户不友好

方式二：通过字体库UI管理（WordPress 6.5+推荐方式）

优点：

• 无需编写任何代码
• 可视化界面，所见即所得
• 支持从Google Fonts直接安装
• 字体文件自动本地化存储，有利于GDPR合规和性能优化

缺点：

• 配置存储在数据库中，主题更换可能丢失
• 目前自定义选项相对有限

方式三：使用第三方字体插件

常见的字体管理插件包括：

💡 我的建议：对于WordPress 6.5+用户，优先使用内置的字体库功能，只有在需要特殊功能时才考虑第三方插件。这样可以减少插件依赖，提升网站性能和稳定性。

📖 二、实战——为FSE站点添加自定义字体

2.1 使用字体库添加Google Fonts（推荐方法）

WordPress 6.5+内置的字体库是管理字体的首选方式。以下是详细的操作步骤：

步骤一：进入字体库

1. 登录WordPress后台
2. 进入「外观」→「编辑器」（Site Editor）
3. 点击右上角的「样式」图标（🎨）
4. 在样式面板中找到「排版」选项
5. 点击「管理字体」或直接点击字体区域旁的设置图标

步骤二：安装Google Fonts

1. 在字体库界面，点击「添加字体」
2. 选择「从Google Fonts安装」标签页
3. 使用搜索框找到你需要的字体，例如：
   • 中文推荐：Noto Sans SC（思源黑体简体）、Noto Serif SC（思源宋体简体）、LXGW WenKai（霞鹜文楷）
   • 英文推荐：Inter、Poppins、Playfair Display、Roboto
4. 勾选需要的字重变体（如Regular 400、Medium 500、Bold 700等）
5. 点击「安装」

⚠️ 关于中文字体的重要说明：中文字体文件通常较大（单个字重可能超过10MB），建议只安装真正需要的字重，避免影响网站加载速度。

步骤三：激活并应用字体

1. 安装完成后，返回字体列表
2. 确保已安装的字体处于「已激活」状态
3. 在站点编辑器的「样式」→「排版」中，将新字体设置为正文或标题的默认字体

效果验证：完成设置后，打开网站前台，使用浏览器开发者工具（F12）检查元素，确认字体已正确加载。

2.2 通过theme.json配置本地字体（开发者方法）

如果你是主题开发者，或者需要使用Google Fonts之外的自定义字体，通过theme.json进行配置是更加可控的方式。

步骤一：准备字体文件

首先，将字体文件放置在主题目录下。推荐的目录结构：

your-theme/
├── assets/
│   └── fonts/
│       ├── CustomFont-Regular.woff2
│       ├── CustomFont-Bold.woff2
│       └── CustomFont-Italic.woff2
├── theme.json
└── style.css

💡 字体格式建议：优先使用WOFF2格式，它提供最佳的压缩率和浏览器兼容性。现代浏览器均支持WOFF2，只有在需要兼容IE11等老旧浏览器时才需要提供WOFF或TTF备选。

步骤二：在theme.json中注册字体

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"Custom Font\", sans-serif",
          "name": "Custom Font",
          "slug": "custom-font",
          "fontFace": [
            {
              "fontFamily": "Custom Font",
              "fontWeight": "400",
              "fontStyle": "normal",
              "src": ["file:./assets/fonts/CustomFont-Regular.woff2"]
            },
            {
              "fontFamily": "Custom Font",
              "fontWeight": "700",
              "fontStyle": "normal",
              "src": ["file:./assets/fonts/CustomFont-Bold.woff2"]
            },
            {
              "fontFamily": "Custom Font",
              "fontWeight": "400",
              "fontStyle": "italic",
              "src": ["file:./assets/fonts/CustomFont-Italic.woff2"]
            }
          ]
        }
      ]
    }
  }
}

关键字段说明：

步骤三：应用字体到全局样式

在theme.json的styles部分设置默认字体：

{
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--custom-font)"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--custom-font)",
          "fontWeight": "700"
        }
      }
    }
  }
}

🔍 CSS变量命名规则：WordPress会自动为每个字体生成CSS变量，命名格式为 --wp--preset--font-family--{slug}。

2.3 可变字体（Variable Fonts）的使用

可变字体是现代Web排版的重要技术，它允许将多种字重、字宽、倾斜度等变体打包到单个字体文件中，大大减少了HTTP请求数和总体文件大小。

什么是可变字体？

传统字体需要为每个变体（如Regular、Bold、Light等）提供单独的文件，而可变字体通过**变化轴（Variation Axes）**实现无级调节：

在theme.json中配置可变字体

{
  "fontFace": [
    {
      "fontFamily": "Inter",
      "fontWeight": "100 900",
      "fontStyle": "normal",
      "fontStretch": "normal",
      "src": ["file:./assets/fonts/Inter-Variable.woff2"]
    }
  ]
}

注意：fontWeight使用范围值"100 900"而非单一值，表示这是一个可变字体。

推荐的中文可变字体

2.4 字体性能优化最佳实践

字体加载对网站性能有显著影响，尤其是中文字体。以下是经过实践验证的优化策略：

策略一：使用font-display属性

在theme.json的fontFace配置中添加fontDisplay属性：

{
  "fontFace": [
    {
      "fontFamily": "Custom Font",
      "fontWeight": "400",
      "fontStyle": "normal",
      "fontDisplay": "swap",
      "src": ["file:./assets/fonts/CustomFont-Regular.woff2"]
    }
  ]
}

font-display取值说明：

策略二：字体子集化（Subsetting）

对于中文字体，完整字符集可能包含数万个字符，但实际使用的可能只有几千个。字体子集化可以显著减小文件大小。

工具推荐：

1. Fonttools（Python库）：功能强大的命令行工具

   pip install fonttools brotli
   pyftsubset font.ttf --output-file=font-subset.woff2 --flavor=woff2 --text-file=characters.txt
   

2. Transfonter（在线工具）：https://transfonter.org/
   • 支持上传字体文件
   • 可自定义包含的字符范围
   • 自动生成多种格式
3. Font Squirrel Webfont Generator：https://www.fontsquirrel.com/tools/webfont-generator
   • 提供专业级的优化选项
   • 自动生成@font-face CSS

⚠️ 子集化注意事项：如果你的网站内容会动态变化（如博客、新闻站），过度子集化可能导致某些字符无法显示。建议至少包含GB2312字符集（约6763个汉字）以覆盖常用中文。

策略三：预加载关键字体

对于首屏渲染必需的字体，使用预加载可以减少字体加载延迟：

// 在functions.php中添加
function preload_custom_fonts() {
    echo '<link rel="preload" href="' . get_theme_file_uri('assets/fonts/CustomFont-Regular.woff2') . '" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'preload_custom_fonts', 1);

💡 提示：只预加载1-2个最关键的字体文件，过多的预加载反而会适得其反。

策略四：使用CDN加速

如果你选择使用Google Fonts等在线字体服务，可以考虑使用国内CDN镜像以提升中国大陆用户的访问速度：

强烈建议：使用WordPress内置字体库功能从Google Fonts安装字体时，字体文件会自动下载到本地，这既解决了GDPR合规问题，也避免了国内访问Google服务的障碍。

📖 三、繁简体转换——服务中文用户

3.1 为什么需要繁简体转换？

中文互联网存在一个独特的现象：同一种语言的两套书写系统。简体中文主要使用于中国大陆、新加坡、马来西亚华人社区；繁体中文则主要使用于台湾、香港、澳门以及海外华人社区。

提供繁简转换功能的意义：

1. 扩大受众范围：一套内容服务两岸三地及海外华人读者
2. 提升用户体验：用户可以用自己习惯的文字阅读
3. SEO优化：部分搜索引擎会区分简繁体索引
4. 降低内容维护成本：无需维护两套内容

3.2 繁简转换的技术原理

在深入插件使用之前，了解繁简转换的技术原理有助于我们做出更好的选择：

转换层级

转换方向

• 简→繁：相对简单，简体字符较少
• 繁→简：需要处理一繁对多简的情况（如"發"→"发/髮"）
• 繁体变体转换：台湾标准繁体 ↔ 香港标准繁体

3.3 主流繁简转换插件对比

以下是目前与WordPress 6.x及FSE兼容性较好的繁简转换插件：

重点推荐：WP Chinese Conversion

这是目前功能最完善、更新最活跃的繁简转换插件。最新版本已针对WordPress 6.x和FSE进行了优化。

主要功能：

1. ✅ 支持简繁体、繁简体双向转换
2. ✅ 提供词汇级别的准确转换
3. ✅ 区分台湾繁体、香港繁体
4. ✅ 自定义转换词典
5. ✅ 与区块主题和站点编辑器兼容
6. ✅ 支持按页面、按文章类型设置
7. ✅ 支持浏览器语言自动检测

3.4 WP Chinese Conversion安装与配置指南

步骤一：安装插件

1. 进入WordPress后台「插件」→「添加插件」
2. 搜索"WP Chinese Conversion"
3. 点击「立即安装」，然后「启用」

步骤二：基础配置

进入「设置」→「中文转换」，进行以下配置：

1. 转换模式选择

2. 繁体变体设置

3. 转换范围设置

建议勾选：

• ☑️ 文章标题
• ☑️ 文章内容
• ☑️ 评论内容
• ☑️ 区块编辑器内容（FSE必选）
• ☑️ 小工具/区块组件
• ☑️ 导航菜单

步骤三：添加转换按钮到网站

方法一：使用插件自带的区块（推荐）

1. 进入站点编辑器（「外观」→「编辑器」）
2. 编辑你的Header模板部分
3. 点击「添加区块」（+号）
4. 搜索"Chinese Conversion"或"繁简转换"
5. 将区块放置在合适位置（如导航栏右侧）
6. 保存更改

方法二：使用短代码

在任意位置使用短代码：

[chinese_conversion]

可以添加到：

• 自定义HTML区块
• 小工具区域
• 模板文件

步骤四：自定义转换词典

对于特殊术语或品牌名称，可以添加自定义转换规则：

1. 进入「设置」→「中文转换」→「自定义词典」

2. 按格式添加词条：

   简体词=繁体词
   软件=軟體
   博客=部落格
   

💡 专业建议：对于技术类、专业类网站，建议整理一份专业术语的转换词典，以确保术语的一致性和准确性。

3.5 FSE主题下的特殊处理

在使用区块主题时，繁简转换可能遇到一些特殊情况，以下是解决方案：

问题一：动态区块内容未转换

现象：某些通过JavaScript动态加载的内容未被转换。

解决方案：

1. 检查插件设置，确保「AJAX内容转换」已启用
2. 如仍有问题，可添加以下代码到functions.php：

add_filter('wpcc_text_to_convert', function($text) {
    // 确保动态内容也被处理
    return $text;
}, 999);

问题二：模板部分的静态文字未转换

现象：Header、Footer等模板中直接写入的中文未转换。

解决方案：

• 将静态文字改为使用WordPress的翻译函数，或
• 使用插件的API进行手动转换：

<?php echo wpcc_convert('你好世界', 'zh-tw'); ?>

问题三：页面缓存导致转换失效

现象：使用缓存插件后，繁简切换不生效。

解决方案：

1. 在缓存插件中添加Cookie例外规则
2. 或配置按语言变体生成不同缓存

常见缓存插件的配置方法：

📖 四、多语言网站——面向全球用户

4.1 多语言网站的实现策略

构建多语言WordPress网站有多种策略，选择取决于你的具体需求：

4.2 主流多语言插件深度对比

WPML（WordPress Multilingual Plugin）

官网：https://wpml.org/

定位：最老牌、功能最全面的商业多语言解决方案

核心优势：

• ✅ 支持几乎所有WordPress功能的翻译
• ✅ 与WooCommerce深度整合
• ✅ 对FSE和区块主题的支持在持续改进中（2024年已较成熟）
• ✅ 翻译管理工作流
• ✅ 自动机器翻译集成
• ✅ 专业的技术支持

价格：

注意事项：

• ⚠️ 性能影响相对较大，建议配合缓存使用
• ⚠️ 学习曲线较陡

Polylang

官网：https://polylang.pro/

定位：轻量级、对用户友好的多语言解决方案

核心优势：

• ✅ 提供功能完整的免费版本
• ✅ 性能表现优于WPML
• ✅ 界面简洁，容易上手
• ✅ 与FSE的兼容性良好
• ✅ 开源代码，可自定义扩展

版本对比：

TranslatePress

官网：https://translatepress.com/

定位：可视化翻译，所见即所得

核心优势：

• ✅ 前端可视化翻译，直接在页面上点击并翻译
• ✅ 支持自动翻译（Google Translate/DeepL）
• ✅ 与Gutenberg和FSE兼容性好
• ✅ SEO友好
• ✅ 有功能够用的免费版

特别适合：

• 非技术背景的用户
• 需要快速翻译现有内容的站点
• 重视翻译工作流程直观性的团队

MultilingualPress

官网：https://multilingualpress.org/

定位：基于WordPress多站点的企业级方案

核心优势：

• ✅ 基于多站点，语言站点真正独立
• ✅ 性能最优（无额外数据库查询）
• ✅ 企业级稳定性
• ✅ 对FSE支持良好

适用场景：

• 大型网站
• 各语言版本需要独立管理的情况
• 对性能有极高要求的站点

4.3 综合推荐

基于不同需求场景，我的推荐如下：

4.4 Polylang实战配置指南

以下以Polylang为例，演示如何为FSE站点配置多语言功能：

步骤一：安装与激活

1. 进入「插件」→「添加插件」
2. 搜索"Polylang"
3. 安装并激活

步骤二：运行设置向导

激活后会自动启动设置向导，按步骤完成：

1. 选择语言

添加你需要的语言，例如：

• English (en_US) - 设为默认语言
• 简体中文 (zh_CN)
• 繁體中文 (zh_TW)
• 日本語 (ja)

2. 媒体处理

建议选择：「每种语言使用相同的媒体文件」（节省存储空间）

3. URL结构

步骤三：FSE模板翻译配置

这是FSE站点配置多语言的关键步骤：

1. 字符串翻译

进入「语言」→「字符串翻译」

这里可以翻译：

• 站点标题和描述
• 菜单项名称
• 小工具标题
• 区块模板中的静态文字

2. 模板部分翻译

WordPress 6.5+与Polylang的配合已经可以较好地处理区块主题的模板翻译：

1. 进入「外观」→「编辑器」
2. 在站点编辑器中修改内容
3. 关键：不同语言的模板内容会自动关联

⚠️ 注意：截至课程编写时，区块主题的完整多语言支持仍在持续完善中。某些边缘情况可能需要手动处理或等待插件/WordPress核心更新。

步骤四：添加语言切换器

方法一：使用Polylang语言切换器区块

1. 进入站点编辑器
2. 编辑Header模板部分
3. 添加「Polylang - 语言切换器」区块
4. 配置显示方式：
   • 显示国旗
   • 显示语言名称
   • 下拉式 or 列表式
5. 保存

方法二：使用经典语言切换器小工具

在「外观」→「小工具」中配置（如主题支持）

方法三：通过导航菜单

1. 进入「外观」→「菜单」（如可用）或站点编辑器中的导航区块
2. 为每个语言版本添加菜单链接

步骤五：内容翻译工作流

创建多语言文章：

1. 创建新文章（默认语言，如英语）
2. 在文章编辑页面右侧找到「Languages」面板
3. 点击其他语言旁边的「+」号创建翻译版本
4. 编辑翻译内容并发布

翻译现有内容：

1. 进入「文章」→「所有文章」
2. 列表中会显示各语言版本的状态
3. 点击缺失语言的「+」号创建翻译

4.5 多语言SEO最佳实践

配置多语言网站时，SEO处理至关重要：

Hreflang标签

Polylang/WPML会自动添加hreflang标签，告诉搜索引擎页面的语言版本关系：

<link rel="alternate" hreflang="en" href="https://example.com/about/" />
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh/about/" />
<link rel="alternate" hreflang="zh-Hant" href="https://example.com/zh-tw/about/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about/" />

与SEO插件的配合

建议：使用Yoast SEO或Rank Math配合多语言插件，确保每种语言版本都有独立的SEO元数据。

站点地图配置

确保多语言站点地图正确生成：

1. 每种语言有独立的sitemap条目
2. 或使用包含hreflang信息的统一sitemap
3. 在Google Search Console中分别提交各语言版本

📖 五、综合实战——三大功能整合应用

5.1 场景描述

假设要构建一个面向全球华人的内容网站，需求如下：

• 目标用户：中国大陆、台湾、香港、海外华人
• 语言需求：简体中文（默认）、繁体中文（台湾）、英语
• 设计需求：使用优美的中文字体，兼顾英文排版

5.2 技术方案设计

┌─────────────────────────────────────────────────────────┐
│                    WordPress FSE站点                      │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐ │
│  │   字体层     │  │  繁简转换层  │  │    多语言层      │ │
│  │             │  │             │  │                 │ │
│  │ • 思源黑体   │  │ • WP Chinese│  │ • Polylang     │ │
│  │ • Inter     │  │   Conversion│  │ • 简体/繁体/EN  │ │
│  │ • 字体库管理 │  │ • 简↔繁     │  │ • URL: /zh/ /en│ │
│  └─────────────┘  └─────────────┘  └─────────────────┘ │
└─────────────────────────────────────────────────────────┘

5.3 实施步骤

Phase 1：基础设置

1. 安装区块主题（如Twenty Twenty-Four或你选择的FSE主题）
2. 配置theme.json基础结构

Phase 2：字体配置

1. 通过字体库安装：
   • Noto Sans SC（简体中文正文）
   • Noto Sans TC（繁体中文正文）
   • Inter（英文正文和UI）
2. 在theme.json中配置字体栈：

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"Noto Sans SC\", \"Noto Sans TC\", \"Inter\", system-ui, sans-serif",
          "name": "主字体",
          "slug": "primary"
        }
      ]
    }
  }
}

Phase 3：安装多语言插件

1. 安装Polylang
2. 配置语言：简体中文（默认）、繁体中文、英语
3. 设置URL结构为目录模式

Phase 4：配置繁简转换

1. 安装WP Chinese Conversion
2. 设置：简体→繁体转换模式
3. 关键配置：
   • 仅对简体中文和繁体中文页面启用转换
   • 英语页面禁用转换避免误处理

Phase 5：整合测试

5.4 常见问题与解决方案

Q1：繁简转换和多语言插件是否冲突？

A：可能存在交互影响。推荐配置：

• Polylang管理「简体中文」「繁体中文」「英语」作为独立语言
• WP Chinese Conversion仅在「简体中文」语言版本中启用，作为用户偏好切换

或者：

• 只使用Polylang，分别维护简体和繁体内容（无自动转换）

Q2：页面加载多种中文字体，性能如何优化？

A：

1. 使用可变字体减少文件数
2. 子集化只保留常用字符
3. 配置font-display: swap
4. 使用CDN加速

Q3：如何确保搜索引擎正确索引各语言版本？

A：

1. 确保hreflang标签正确
2. 各语言版本的URL结构清晰
3. 使用SEO插件为每个语言版本设置独立的元数据
4. 在Search Console中添加各语言版本的网站资源

📖 六、进阶技巧与未来展望

6.1 使用Create Block Theme插件管理字体

Create Block Theme是WordPress官方团队开发的主题创建工具，它提供了一个直观的界面来管理主题中的字体配置。

使用场景：

• 创建包含字体配置的子主题
• 将字体库中的字体"烘焙"进主题
• 导出可分发的主题包

6.2 WordPress多语言核心功能展望

值得关注的发展：

WordPress核心团队正在逐步增强多语言支持能力。Gutenberg项目中有关多语言的讨论持续进行，未来可能包括：

• 🔮 区块级别的翻译标记
• 🔮 核心内置的语言切换功能
• 🔮 更好的本地化工作流程

💡 建议：关注WordPress官方博客和Gutenberg项目的更新，及时了解多语言支持的最新进展。

6.3 AI辅助翻译的应用

现代多语言网站可以借助AI提升翻译效率：

工作流建议：

1. 使用AI进行初步翻译
2. 人工审核和润色
3. 术语表统一管理

📝 课程总结

通过本课程的学习，你应该掌握了：

✅ 核心技能

1. 自定义字体
   • 理解FSE字体系统的工作原理
   • 使用WordPress 6.5+字体库添加字体
   • 通过theme.json配置本地字体
   • 应用可变字体优化性能
2. 繁简体转换
   • 理解繁简转换的技术原理
   • 配置WP Chinese Conversion插件
   • 处理FSE主题下的特殊情况
3. 多语言网站
   • 选择适合的多语言策略和插件
   • 配置Polylang实现多语言功能
   • 与FSE站点编辑器协同工作
   • 多语言SEO优化

📚 延伸阅读

• WordPress全站编辑官方文档
• theme.json参考手册
• Polylang官方文档
• WPML开发者文档