WordPress 写作高级操作指南

给文章添加涂黑可以刮开的文字效果

在萌娘百科中，经常见到涂黑的文本就像这样，鼠标指向时会显示出被涂黑的内容，于是扒了扒萌娘百科的网站代码，找到了对应的 css 代码：

span.heimu a.external,span.heimu a.external:visited,span.heimu a.extiw,span.heimu a.extiw:visited{color:#252525}.heimu,.heimu a,a .heimu,.heimu a.new{background-color:#252525;color:#252525;text-shadow:none;}body:not(.heimu_toggle_on) .heimu:hover,body:not(.heimu_toggle_on) .heimu:active,body:not(.heimu_toggle_on) .heimu.off{transition:color .13s linear;color:#fff}body:not(.heimu_toggle_on) .heimu:hover a,body:not(.heimu_toggle_on) a:hover .heimu,body:not(.heimu_toggle_on) .heimu.off a,body:not(.heimu_toggle_on) a:hover .heimu.off{transition:color .13s linear;color:#add8e6}body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off,body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off{transition:color .13s linear;color:#ba0000}

将 css 插入到 博客 - 外观 - 自定义 - 额外CSS 中，就可以在博文中使用涂黑的文本了

使用的方法是在编辑时切换到 HTML 编辑模式，输入一个 <span> 标签， class 值设为 "heimu" ，可选属性为 title ，用来设置鼠标指向时浮现的气泡文本

举个例子：啦啦啦啦

对应的代码是：

<span class="heimu" title="我是个栗子">啦啦啦啦</span>

P.S. 我查了一些资料，想把这个功能做成一个按钮添加到 WordPress 的可视化编辑器中，方法找到了，但是按钮是通过 js 编写的，由于看不懂 js 代码，就先作罢吧……

为 WordPress 添加 $\LaTeX$ 数学公式显示功能

首先在后台搜索插件 Mathjax-Latex 并安装

理论上讲只要安装这个插件就能实现在 WordPress 中插入 $\LaTeX$ 数学公式了，但是由于 MathJex 默认 CDN 无法通过 GFW，需要在自己的服务器安装 MathJex 服务

截止目前，插件 Mathjax-Latex 的版本是 1.3.11 ，已经有 1 年没更新了，支持的 MathJex 版本是 2.7.5 ，所以我们到 GitHub 下载 2.7.5 版本的 MathJex ：

P.S. 不要下载最新版本！别问我为什么……

https://github.com/mathjax/MathJax/archive/2.7.5.zip

下载好后解压到网站目录下（随便哪里，我放在 Mathjax-Latex 插件目录中），然后在 Mathjax-Latex 插件设置中将 Custom MathJax location? 填写为 MathJax.js 的路径即可，例如：

/wp-content/plugins/mathjax-latex/MathJax-2.7.5/MathJax.js

此时，在文章中就可以插入 $\LaTeX$ 数学公式啦~

举个栗子：$\oint_LH\cdot dl=I_0+\iint_S\frac{\partial D}{\partial t}\cdot dS$

输入格式：

[ latex ]\oint_LH\cdot dl=I_0+\iint_S\frac{\partial D}{\partial t}\cdot dS[ /latex ]
P.S.由于插件强制转义，[]内加了空格

P.S. 这个插件对 $\LaTeX$ 支持不完整，有些符号可能无法转义，如二重环路积分 \oiint

为 WordPress 添加 $\LaTeX$ 数学公式显示功能 - 2

上一节提到使用 Mathjax-Latex 插件配合本地 Mathjax 实现 WordPress 显示 $\LaTeX$ 数学公式，但是上节末也提到，（大概是）由于插件长久不更新，对 $\LaTeX$ 支持不够完整，以至于连个麦克斯韦方程组都显示不出来。为了满足插入麦克斯韦方程组的虚伪愿望，我找到了办法：

非常简单，在 WordPress 插件库搜索 wp-katex 安装就好了，使用方法和 Mathjax-Latex 一样，在 $\LaTeX$ 代码前后用 [ latex ] 和 [ /latex ] 引起来就行了

例如麦克斯韦方程组：

对应代码为：

[ latex ]\left\{\begin{matrix} \begin{aligned} \oiint_S \mathbf{D}\cdot \mathrm{d}\mathbf{S} &= q_0\\\oiint_S \mathbf{B}\cdot \mathrm{d}\mathbf{S} &= 0\\\oint_L \mathbf{E}\cdot d\mathbf{l} &= -\iint_S\frac{\partial \mathbf{B}}{\partial t}\cdot d\mathbf{S}\\ \oint_L\mathbf{H}\cdot d\mathbf{l} &= I_0+\iint_S\frac{\partial \mathbf{D}}{\partial t}\cdot d\mathbf{S} \end{aligned} \end{matrix}\right.[ /latex ]
P.S.由于插件强制转义，[]内加了空格

怎样输入文(wén)字(zì)拼(pīn)音(yīn)

文字拼音的效果是通过 <ruby> 、 <rt> 、 <rp> 这三个 HTML 标签实现的，这三个标签是 HTML 5 新加入的，作用就是给中文、日文等字符注音

注意：Internet Explorer 8 以及更早的版本不支持这三个标签！

下面演示在支持以及不支持 HTML 5 的网页上的显示效果：

<ruby>
漢<rp>(<rp><rt>hàn</rt><rp>)</rp>
</ruby>

<ruby>
漢<rt>hàn</rt>
</ruby>

<ruby>
漢<rp>(<rp><rt>hàn</rt><rp>)</rp>
</ruby>

<ruby>
漢<rt>hàn</rt>
</ruby>

另附25个拼音字符： ā á ǎ à、ō ó ǒ ò、ē é ě è、ī í ǐ ì、ū ú ǔ ù、ǖ ǘ ǚ ǜ ü

怎样输入文(wén)字(zì)拼(pīn)音(yīn) - 2

上节提到，文字拼音的效果是通过 <ruby> 、 <rt> 、 <rp> 这三个 HTML 标签实现的。其实不然，我漏掉了一个标签—— <rb>

<rb> 标签同样是与 <ruby> 配合使用的，它的作用是包裹整个被标记的文本，从而对多个字符同时进行标记，下面用例子说明：

<ruby>
汉<rp>(</rp><rt>hàn</rt><rp>)</rp>
字<rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

<ruby>
<rb>汉字</rb>
<rp>(</rp><rt>hàn zì</rt><rp>)</rp>
</ruby>

从上面的例子可以看出，对于汉字注音来说，两种方式的代码显示效果是一致的，但是当字数大于一时，使用 <rb> 可以使代码缩短

下面继续举例，展示一个不用 <rb> 无法实现的情况：

<ruby>
<rb>汉字</rb>
<rp>(</rp><rt>Chinese</rt><rp>)</rp>
</ruby>

容易看出，当被标记的字符数与标记的内容数量不对等时，就必须使用 <rb> 标签，不然就只能做成：【汉(Chinese)字】 或者 【汉字(Chinese)】了，或者……【汉(Chin )字(ese)】？hhhh

另外，<rb> 标签还有一个优点，就是使用涂黑文本时，参数 class="heimu" 写在 <rt> 中，使用 <rb> 标签，标注部分是一个整体，比如这样： 汉字(hàn zì) 如果没有使用 <rb> 标签，虽然也能涂黑，但是两个部分不能同时显示，就像这样： 汉(hàn)字(zì)

代码如下：

<ruby>
<rb>汉字</rb>
<rp>(</rp><rt class="heimu">hàn zì</rt><rp>)</rp>
</ruby>

<ruby>
汉<rp>(</rp><rt class="heimu">hàn</rt><rp>)</rp>
字<rp>(</rp><rt class="heimu">zì</rt><rp>)</rp>
</ruby>