如何给WordPress后台编辑器文本模式(HTML模式)添加短代码按钮

想给博客主题添加一个下载弹窗效果，想着如果每次下载文件的时候都要写一大串的代码比较麻烦，于是就想能不能自定义一个下载地址的短代码来提高编辑文章的效率。

那么，想要添加一个短代码，我们需要解决以下问题：

一、如何给 WordPress 添加一个短代码呢？

二、如何使用添加好的短代码呢？

三、如何给 WordPress 后台编辑器文本模式(HTML 模式)添加短代码按钮呢？

在解决问题前，我们先来了解一下什么是 WordPress 短代码?

WordPress Shortcode 即 wordpress 短代码功能，是在 WordPress 2.5 版本开始被引入的，通过 WordPress 短代码可以非常方便快速地在编辑文章或页面的时候插入动态内容，短代码的常见应用有插入最新文章、插入广告、插入音频视频、插入下载按钮等。

那么，究竟什么是短代码呢？

顾名思义短代码就是将原生态的代码通过函数的封装将代码进行缩减了，其实就是将一段功能进行封装成为一个函数，然后在调用的时候直接调用函数名就行了，而那些缩减的代码其实是被封装到了函数中。

用过 ubb 的童鞋可能对短代码更好理解一些，比如在 HTML 中加粗是这样写的:

<strong>凌山博客短代码</strong>

而经过函数封装成短代码可以写成这样:

[b]凌山博客短代码[/b]

了解了什么是短代码之后，我们来学习如何给 WordPress 添加一个短代码?

一、如何给 WordPress 添加一个短代码呢？

下面我们以凌山博客中的添加的“下载地址”按钮为例（效果如下）：

[file]
首先，我们在主题 functions.php 中添加一个函数，函数名随便取，这里凌山写的函数是 download_button()，这个函数是我们在编辑文章的时候本来要编写的的全部代码，也就是要封装成短代码的原代码，代码如下：

// 下载地址按钮
function download_button() {
return '<div id="down"><a id="load" data-rel="popUp" href="#button_file" rel="external nofollow" >下载地址</a><div class="clear"></div></div>';
}

然后，我们将 download_button()函数封装成短代码，我们只需要添加以下代码即可：

add_shortcode("file", "download_button");

这段代码的意思是，把 download_button()的函数中的内容以[ file ]（去掉中括号内的空格）这个短代码的方式添加，当我们在需要添加“下载地址”按钮的地方填写[ file ]（去掉中括号内的空格）这个短代码就可以了

最后，给“下载地址”按钮添加 CSS 样式

#down a{
	float: left;
	background: url(../images/dd.png) no-repeat;
	width:100px;
	height:25px;
	color: #fff;
	margin: 0 0 0 25px;
	padding: 0 0 0 13px;
	text-decoration: none;
	text-shadow: 0 1px 0 #393939;
	}

这样，我们添加了一个“下载地址”的短代码。

二、如何使用添加好的短代码呢？

上面我们自定义了一个“下载地址”短代码，当我们要使用下载地址的时候，在需要添加下载地址的位置添加短代码[ file ]（去掉中括号内的空格）即可。

三、如何给 WordPress 后台编辑器文本模式(HTML 模式)添加短代码按钮呢？

首先，在主题的 functions.php 文件中加入以下代码：

add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
    wp_enqueue_script(
        'my_quicktags',
        get_stylesheet_directory_uri().'/js/my_quicktags.js',
        array('quicktags')
    );
    }

然后，创建一个 my_quicktags.js 文件，按钮便是在这里自定义，这里凌山给出一个自定义< h1 >标签的例子。在 my_quicktags.js 中添加以下代码：

QTags.addButton( 'h1', 'h1', "\n

“, ”

\n" ); //快捷输入 h1 标签
//QTags.addButton( 'my_id', 'my button', '\n', '\n' );
//这儿共有四对引号，分别是按钮的 ID、显示名、点一下输入内容、再点一下关闭内容（此为空则一次输入全部内容），\n 表示换行。

如果还有其他的短代码，只需要在 my_quicktags.js 文件中添加

QTags.addButton( 'my_id', 'my button', '\n', '\n' );

这行代码就行了

转载请注明：汇站网 » 如何给 WordPress 后台编辑器文本模式(HTML 模式)添加短代码按钮