WordPress数学公式：主题里手动引入MathJax的做法

WordPress数学公式要显示出来，只需在主题里引入 MathJax：把 MathJax 3 的发布文件放进子主题目录，在子主题的 functions.php 里用 wp_enqueue_script 加载它，再用 wp_add_inline_script 把定界符配置写在它前面（这组就是 MathJax 3 的缺省值，留着便于以后加单个 $）。文章里用古腾堡编辑器的「段落」块写行内公式，用「自定义 HTML」块写独立公式。下面先给速查表，再给完整代码和两种块的写法示例。

速查表：古腾堡里的写法与效果

「代码」块和「预格式」块里的公式不会被渲染，MathJax 默认跳过 code 与 pre 标签，要展示源码时正好用它们。

用法：在子主题里引入 MathJax

1. 准备子主题：直接改父主题的 functions.php，主题一升级改动就被覆盖，所以先建子主题并启用。
2. 放文件：从 npm 下载 mathjax 的 3.x 版本，把其中的 es5 文件夹改名为 mathjax，放进子主题目录。
3. 写代码：在子主题的 functions.php 末尾加上下面这段。

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'mathjax',
        get_stylesheet_directory_uri() . '/mathjax/tex-chtml.js',
        array(),
        '3',
        true
    );
    $config = <<<'JS'
window.MathJax = {
  tex: { inlineMath: [['\\(', '\\)']], displayMath: [['\\[', '\\]'], ['$$', '$$']] }
};
JS;
    wp_add_inline_script('mathjax', $config, 'before');
});

这段代码只在前台页面加载 MathJax，后台管理页不受影响。'before' 保证配置出现在 MathJax 脚本之前；最后一个参数 true 让脚本放在页面底部，不拖慢正文显示。PHP 这里用了单引号形式的定界字符串，里面的两个反斜杠会原样进入 JavaScript，到浏览器里就是一个反斜杠。

用法：古腾堡里写公式的示例

行内公式：在「段落」块里直接写，和文字混排。例如一元二次方程的两根之和，写成：

x_1+x_2=-\frac{b}{a}

在段落里要用 \( 和 \) 把它包起来。

独立公式：插入「自定义 HTML」块，把公式连同定界符写进去。判别式决定根的情况，用方程组的大括号写：

\Delta=b^{2}-4ac\ \begin{cases}>0 & \text{两个不等实根}\\=0 & \text{两个相等实根}\\<0 & \text{没有实根}\end{cases}

独立公式放进「自定义 HTML」块，是因为在「段落」块里按回车会另起一个块，一条多行公式会被拆到两个块里，MathJax 就认不出一对完整的定界符。

常见错误

公式在前台没显示时，按下面四条从上往下查，前两条最常见。

• 只有编辑器预览不显示：古腾堡编辑界面不加载前台脚本，公式在后台显示成源码是正常的，点「预览」看前台页面。
• 所有公式都显示源码：子主题里找不到 mathjax/tex-chtml.js（文件夹没整体放进子主题目录，脚本请求 404），在浏览器开发者工具的网络面板里能看到这条失败请求。
• 反斜杠丢了：配置写在双引号字符串里，PHP 会先处理一轮转义，用上面的单引号定界字符串最省心。
• 缓存没清：开了页面缓存的站点，改完代码要清缓存，否则看到的还是旧页面。

三种根的情况对应判别式大于、等于、小于零，这段方程组写成一行放进「自定义 HTML」块后，发布前用前台预览核对三行是否都对齐了大括号。

延伸阅读

• 网页显示数学公式：MathJax 与 KaTeX 两种接入的选型与代码
• KaTeX语法：常用命令与渲染效果速查