后台编辑器WordPress文本模式添加短代码按钮教程

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

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

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

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

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

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

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

那么,究竟什么是短代码呢?

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

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

<strong>abk客短代码</strong>

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

[b]abk博客短代码[/b]

然后,我们将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文件中添加

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

这行代码就行了

部分文章/资源来源于网络,文章标题下部均已标注来源,如有侵权,请点击此处联系客服进行删除,本站将会在第一时间内进行处理! 

如果您要搬运本站文章,请在文章底部标注

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

如果文章帮助到您,还请您点击一下广告支持本站一下! 如果本帖存在的内容对您和您的利益产生损害,请立即通知我,将在最短时间内对其做出处理.本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负.

给TA饼干
共{{data.count}}人
人已饼干
Wordpress源码

WordPress开源主题Hankin最新博客主题模板

2022-11-30 22:48:00

Wordpress源码

二次元聊天室宝塔源码liunx环境搭建

2022-12-1 19:46:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索