如何在 WordPress 的文章编辑器中插入 `<code>` 标签

<code> 标签用于在文章中插入代码,不同于 <pre> 标签,它是用来插入「内联代码」的,就是混排在文字中间的代码或任何计算机指令,不能有任何的换行和缩进。本篇文章中,除了最后的那一段 PHP 代码是 <pre> 之外,其它的所有代码都是使用 <code> 包裹的,比如一个 HTML 标签。

说起来可能让人有点匪夷所思,在 WordPress 4.5 版本之前,如果不使用任何外置的插件或代码,后台的文章编辑器竟然没有任何能在可视化模式下插入 <code> 标签的方法。想要在文章中插入一对 <code> 标签,必须切换到文本模式,手动输入 HTML 代码,然后再切换回来,非常的麻烦。

或许是 WordPress 官方觉得这个标签不是那么常用吧,也对,毕竟除了和计算机技术有关的网站,也没谁需要使用 <code> 标签。

那么,本文就诞生了,下边我列举了三种方法,告诉你如何轻松的在编辑器中插入 <code> 标签,其中,方法二应该是最为符合大家操作习惯的。

方法一、标记指令

标记指令是 WordPress 4.5 新增的功能,一定程度上弥补了上述缺陷,它提供一种类似于 Markdown 编辑器的「标记语言」,目前只支持插入 <code> 代码标签和 <hr /> 水平线标签,或许未来会扩展到更多的标签也说不定。

「`」称作反单引号,一般用来表示计算机代码,可以在不能使用 HTML 标签的地方代替 <code> 标签的功能和意义,熟悉 SQL 的同学一定对它不陌生吧。

什么?你不知道怎么用键盘来输入反单引号?仔细找一找,它其实就在主键盘数字按钮 1 的左边,不过要在英文状态下才能输入,中文输入法状态下会打出来一个间隔号。

在 WordPress 4.5 或以上的文章编辑器中,只需把一对 ` 标记分别加在文字的左右,它们就会自动被一对 <code> 标签包裹了,是不是非常方便呢?

如何在 WordPress 的文章编辑器中插入 `<code>` 标签

不过,这种方法的使用需要掌握一定的技巧。不知道是故意设定的还是 BUG,如果你先输入一对 ` 标记,然后再在里边输入内容的话,无论怎样折腾都不会产生效果,就像普通文字一样,原原本本的放在那里(其实图片中第二部分就是这么截出来的)。

所以说,一定要先输入代码,再输入标记;或者干脆从头到尾,先来一个标记,再输入代码,最后补上结尾的标记也行,总之,不能直接先打一对标记出来。

方法二、添加按钮

就像普通的「加粗」和「斜体」一样,我们也可以通过安装插件,来给编辑器加上一个「代码」按钮。想要做到这点,只需要安装 WYSIWYG Inline Code Command 插件并且启用即可。

使用了插件之后,在文章编辑器工具栏第一排的末尾,会出现一个叫做「Inline Code」的按钮。选中任意一段文字,再点击这个按钮,就可以给它加上 <code> 标签。

如何在 WordPress 的文章编辑器中插入 `<code>` 标签

除此之外,插件还支持使用快捷键操作。选中文字,按下 alt + shift + c 组合键,效果是和按下按钮一样的。

目前我使用的 2.0 版本插件有一个不是很严重的小 BUG:当光标在已经是被 <code> 标签包围的文字身上时,插件提供的按钮不会高亮,但是使用效果还是和「加粗」一样,再按下按钮会取消 <code> 标签。

方法三、编辑 HTML 代码

这是一种最原始的方法,但在有些时候非常有效,它让文章显的非常「直观」,在 HTML 代码被搞得比较混乱时,可以用来整理排错。

只需要直接点击编辑器右上边的「文本」按钮,选中一段文字,轻按「code」按钮,一对 <code> 标签就出现了,而且你能非常清晰的看到它。

如何在 WordPress 的文章编辑器中插入 `<code>` 标签

添加样式

有的同学在使用了上述方法之后,发现竟然无效!究其原因,其实是 WordPress 的文章编辑器默认没有给 <code> 标签添加任何样式,导致它看起来和普通的文字没有什么区别,这给我们的文章排版造成了极大的阻碍。

有的主题会给后台的文章编辑器设置样式,让上边文章的显示效果和前台一模一样,这样作者们就可以实时预览到文章发布出去后用户在前台看到的感觉。但遗憾的是,并不是所有主题都做到了这一点。

所以说,如果你使用的主题没有给文章编辑器里的 <code> 标签设置样式的话,可以把下边的代码添加到主题根目录的 functions.php 文件里,或者加到一个插件里,都是可以的。

效果就和上文中的图片类似,为编辑器中的 <code> 标签添加了和 Bootstrap 一样的样式,非常便于识别。

发表评论

5 条评论

  1. mekstyle@126.com 说道:

    你的博客速度好快啊。

  2. 商商博客 说道:

    主题很漂亮,文章也很不错,我好喜欢你的博客啊,可打开速度有点慢,你看看我的怎么样?