彩色短代码功能在 WordPress 上非插件的实现方法

现在的 wordpress 主题模板要是没有短代码美化的编辑样式的都不好意思说自己是一款功能丰富的主题，要在 wordpress 上实现短代码功能还是有不少插件可以实现的，如 shortcodes-ultimate、Elegant Shortcodes等。

这里推荐一款清新扁平化的简单短代码插件 S-shortcodes，是由 wordpress 的主题作者 Jeff 在国外短代码插件基础上精简二次开发而来（文章后面的举例参照其css样式），但这些都不是我们今天要说的重点。

本文的重点是如何将 wordpress 短代码功能实现非插件代码化集成到自己的现有主题中，从而达到不换主题、不安装插件也能使用到短代码效果的目的。

WordPress 短代码效果

俗话说：授人以鱼不如授人以渔。如果你完全不懂相关代码也不要紧，只是了解其基本原理我相信你是可以的；如果你是拿来主义的伸手党，请直接翻到文章最后查看完整代码使用文章的链接。

我们也从 Hello World 开始练习过程：

1、先在你主题的 functions.php 文件中定义 hello( ) 函数返回的字符串是 Hello, World!；

2、再使用 add_shortcode( ) 函数将你的 hello( ) 函数绑定为短代码，并命名为 “love”，

3、最后测试，在你文章编辑中直接输入 [love] 见证成功。整个代码如下：

了解 WP短代码 基本原理后的实际应用

当然，在实际写文章的时候你不会去弄个函数来输出个常量。所以我们适当修改上面的函数并添加相应的 CSS 样式来实现我们的短代码效果，还是在你主题的 functions.php 文件中添加：

还要在当前主题样式表中添加对应 class="shortcode" 的 CSS 代码：

好了，现在你在文章编辑时输入下面的格式：

[love]这里是你要写的文字内容[/love]

没有问题的话就能看见短代码的效果了。是不是很简单，相信你已经学会了。

下面是实例展示，你可以通过修改 CSS 自定义你想要的样式：

也可以将标题写在短代码样式中，说明文字在外面，这里是举例文字。

你可以发挥想象力自定义你自己的短代码样式，可以将文字写在里面、中间、外面下面等等，以此达到美化编辑文章的目的，看看效果是不是还是不错的！还可以添加一些小图标丰富内容。

什么？你还没有上面短代码样式中那漂亮的小图标

那是如今流行的 web font icon 矢量放缩小图标，想在自己的主题上使用请参考文章：

给网站添加简洁漂亮的矢量放缩小图标 Font Awesome

写在最后，如果你想要的是更为丰富的短代码样式来编写文章，那么开始提到的插件是你不错的选择；但你只是需要个别几个来简洁美化一下内容（或者有我一样的不想安装插件强迫症），那本文就正是你所需要的。

WordPress 短代码功能实现的完整使用代码篇幅稍长，请查看文章：

WordPress 短代码功能非插件实现方法

转载请注明链接地址：荐爱小站 » 彩色短代码功能在 WordPress 上非插件的实现方法