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

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

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

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

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

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

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

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

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

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

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

凌山博客短代码

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

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

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

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

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

[file]

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

// 下载地址按钮

function download_button() {

return '

下载地址

';

}

然后，我们将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' );

这行代码就行了