如何给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模式)添加短代码按钮呢?

如何给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' );

这行代码就行了

资源下载此资源下载价格为10元,请先
客服QQ:1427707223
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明   ⚠️ 1. 本站所有资源来源于网络收集,若资源侵犯了您的合法权益, 请来信通知我们(Email: 1427707223@qq.com),我们会及时删除,给您带来的不便,我们深表歉意! 2. 分享目的仅供大家学习和交流,若使用商业用途,请购买正版授权! 否则产生的一切后果将由下载用户自行承担! 3. 会员不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 6. 因源码具有可复制性,一经购买 ,不得以任何形式退款。 7.更多详情请点击查看

优站网 站长学院 如何给WordPress后台编辑器文本模式(HTML模式)添加短代码按钮 https://www.zhanceo.com/9115.html

诚乃立身之本、信为道德之基

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

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