WordPress 添加短代码 shortcode 和自定义按钮,加快文章写作速度

本文最后更新于2019年9月14日,已超过 1 年没更新!文中所描述的信息可能已发生改变,请自行测试,失效请评论区反馈,谢谢啦~

在教程开始之前,先要明确一下 wordpress短代码shortcode)并不等于文章编辑页面的快捷按钮。

短代码 VS 自定义代码

短代码和自定义按钮的区别

短代码

短代码(shortcode)是wordpress 2.5 版本之后加入的功能,目的就是让一些比较长的代码段,可以由一个比较短的代码替代。WordPress会识别这些短代码,然后根据短代码的定义输出为特定的内容。

短代码的格式是[shortcode]。首先我们需要定义[shortcode]的含义,用 Shortcode API 定义了之后,就可以在wp编辑器里输入[shortcode]来调用了。Shortcode API 支持几乎所有可能的组合形式:自关闭标签,开放标签,含有参数的标签等。比如:

[shortcode]
[shortcode foo="bar" id="123" color="red" something="data"]
[shortcode]这里填写你的内容[/shortcode]
[shortcode]<p><a href="http://example.com/">HTML Conten</a<>/p>[/shortcode]
[shortcode]内容 [其他短代码] 附加内容[/shortcode]
[shortcode foo="bar" id="123"]这里填写你的内容[/shortcode]

 

自定义按钮

自定义按钮这里指的是wordpress编辑器上方的编辑按钮,不管可视化,还是文本,都可以在上面添加按钮。你在编辑文章的时候,可以点击上方的按钮,来实现快速操作。

 

总的来说,短代码和自定义按钮都是一种快捷方式。短代码是压缩代码,类似于长网址缩短为短网址。而自定义按钮则是将自己常用的操作、代码添加到编辑器的上方。

那么本次教程,我们就是要让这两种快捷方式结合起来,创建短代码,然后在按钮中添加短代码。再次说明,短代码和编辑按钮没有必然联系,比如我们创建了一个[shortcode]的短代码,我们是需要手动输入[shortcode]的,而添加了按钮之后,我们只需要按一下按钮,就可以自动添加[shortcode]了,当然你也可以继续手动输入。

如果你单纯想要实现添加自定义按钮,也不是不可以,效果如下。代码冗长,不是很美观,但是不影响最终输出结果。

 

教程开始

短代码 X 自定义代码

 

第一步,添加短代码

这次我们最终实现的效果如下

 

未来属于年轻人

这里是文字

 

对应的代码是

<section data-id="2666" class="v3editor">
	<section style="margin-top: 20px; display: flex; align-items: center; color: inherit;">
		<section style="margin-left: 10px; border: 2px solid rgb(30, 155, 232); padding-right: 30px; padding-bottom: 15px; flex: 1 1 0%; color: inherit;">
			<section style="width: 30px; margin-top: -15px; margin-left: -7px; color: inherit;"
			data-width="30px">
				<br style="color: inherit;" />
			</section>
			<section style="margin:-20px auto 0 2em;color: inherit;">
				<span style="padding: 3px 15px; background: rgb(30, 155, 232); font-size: 18px; color: rgb(255, 255, 255); border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-color: rgb(138, 193, 226);">
					未来属于年轻人
				</span>
			</section>
			<p style="font-size: 14px; margin-top: 5px; padding-left: 5px; border-color: rgb(30, 155, 232); text-indent: 2em; line-height: 2em;">
				<span style="font-size: 14px; border-color: rgb(30, 155, 232); color: inherit;">
					这里是文字
				</span>
			</p>
		</section>
	</section>
</section>

 

分析代码

分析代码可以得到,我们需要替换的部分是“这里是文字” 。我们假设短代码为[thefuture],那么前面部分对应的就是[thefuture],后面部分对应的是[/thefuture]

为了简便,我这里不打算把CSS样式单独提取出来写,而是这样定义——

[thefuture]对应如下

<section data-id="2666"class="v3editor"><section style="margin-top: 20px; display: flex; align-items: center; color: inherit;"><section style="margin-left: 10px; border: 2px solid rgb(30, 155, 232); padding-right: 30px; padding-bottom: 15px; flex: 1 1 0%; color: inherit;"><section style="width: 30px; margin-top: -15px; margin-left: -7px; color: inherit;"data-width="30px"><br style="color: inherit;"/></section><section style="margin:-20px auto 0 2em;color: inherit;"><span style="padding: 3px 15px; background: rgb(30, 155, 232); font-size: 18px; color: rgb(255, 255, 255); border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-color: rgb(138, 193, 226);">未来属于年轻人</span></section>

[/thefuture]对应如下

</span></p></section></section></section>

 

可以看到,我把代码压缩成一行了。这是因为如果分行的话,定义短代码的时候就会出错。如何压缩代码,可以点击如下地址。

\

 

添加代码

压缩完代码,就需要去后台添加代码了。我们找到主题目录下的function.php,进行编辑。

不过在编辑之前,如果还不清除 wordrpress 的短代码 api,可以去wp官网查看。

 

因为官网是英文的,我这边也简单解释一下 。

  • $atts – 一个关联数组的属性,如果没有属性则为空字符串
  • $content – 附加内容 ,也就是我们自己填写的文本
  • $tag – 短代码标记,用于共享回调函数

整个代码案例如下:

function thefuture_func($atts, $content=null) {
    $return = '<section data-id="2666"class="v3editor"><section style="margin-top: 20px; display: flex; align-items: center; color: inherit;"><section style="margin-left: 10px; border: 2px solid rgb(30, 155, 232); padding-right: 30px; padding-bottom: 15px; flex: 1 1 0%; color: inherit;"><section style="width: 30px; margin-top: -15px; margin-left: -7px; color: inherit;"data-width="30px"><br style="color: inherit;"/></section><section style="margin:-20px auto 0 2em;color: inherit;"><span style="padding: 3px 15px; background: rgb(30, 155, 232); font-size: 18px; color: rgb(255, 255, 255); border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-color: rgb(138, 193, 226);">未来属于年轻人</span></section>';
    $return .= $content;
    $return .= '</span></p></section></section></section>';
    return $return;
}
add_shortcode('thefuture' , 'thefuture_func' );

其中,function thefuture_func($atts, $content=null)是定义一个名称thefuture_func的回调函数。

add_shortcode('thefuture' , 'thefuture_func' );这行代码不可或缺,它的作用是注册短代码,即告诉wordpress,这是个短代码。

add_shortcode有两个参数,前面一个是短代码名称,后面一个是上一段的回调函数的名称,这两个名称可以相同,但同时又必须唯一,也就说wordpress已有的短代码,你就不要去注册了。

当然,上面这个代码案例还有另外一种比较简洁的写法,如下

function thefuture_func( $atts, $content = null ) {
	return '<section data-id="2666"class="v3editor"><section style="margin-top: 20px; display: flex; align-items: center; color: inherit;"><section style="margin-left: 10px; border: 2px solid rgb(30, 155, 232); padding-right: 30px; padding-bottom: 15px; flex: 1 1 0%; color: inherit;"><section style="width: 30px; margin-top: -15px; margin-left: -7px; color: inherit;"data-width="30px"><br style="color: inherit;"/></section><section style="margin:-20px auto 0 2em;color: inherit;"><span style="padding: 3px 15px; background: rgb(30, 155, 232); font-size: 18px; color: rgb(255, 255, 255); border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-color: rgb(138, 193, 226);">未来属于年轻人</span></section>' . $content . '</span></p></section></section></section>';
}
add_shortcode( 'thefuture', 'thefuture_func' );

最后我们在文章中这样写

[thefuture]这里填写你的文字[/thefuture]

 

确定好了短代码之后,我们就去后台主题目录下找到function.php,在末尾处添加上我们的代码。

 

保存好后,我们到WP编辑器里查看是否可用。

解决 Shortcode 中自动添加的 br 或者 p 标签

在用 Shortcode API 的时候,有个比较麻烦的问题,就是 WordPress 会自动在 shortcode 内添加 br 或者 p 标签,这样可能会打乱我们的原先预想的 HTML 结构和布局。

造成这个问题的原因是 WordPress 默认的日志内容处理流程中,wpautop(将回车转换成 p 或者 br 标签的函数)是在 Shortcode 前面运行的。所以我们的解决方案也是非常简单,改变它们执行的顺序,在当前主题的 functions.php 文件中添加:

remove_filter( 'the_content', 'wpautop' ); 
add_filter( 'the_content', 'wpautop' , 12);

这样调整顺序之后,你的 shortcode 里面的内容,就不会有自动添加的 p 或者 br 标签,但是如果 shortcode 中部分的内容你又需要一些 p 或者 br 标签用来换行的话,你需要自己手动在自己 shortcode 处理程序中添加 wpautop 来处理了。案例如下,可以看到多了一行 $content = wpautop(trim($content));

function bio_shortcode($atts, $content = null) {
   $content = wpautop(trim($content));
   return '<div class="bio">' . $content . '</div>';
}
add_shortcode('bio', 'bio_shortcode');

 

注册按钮

注册完短代码之后,我们为了更方便操作就需要注册按钮了。

文本编辑模式下注册按钮

在文本编辑模式下注册按钮比较简单,我们先讲这个。

代码案例如下

function add_thefuture() {
	?>
	<script type="text/javascript">
	QTags.addButton( 'thefuture_button′, '未来属于年轻人′, '[/thefuture]', '[thefuture]'' ); 
	</script>
	<?php
}
add_action('add_thefuture_button', 'add_thefuture' );
?>

 

如果你和我一样是Vieu主题,你必须在./vieu/include/modules找到mo_editbutton.php,在mo_editbutton.php中添加代码,否则就出错。如下

 

QTags.addButton( 'thefuture_button', '未来属于年轻人', '[thefuture]', '[/thefuture]' );

其中,上句一共有四对引号,分别是【按钮的ID】、【显示名称】、【点一下输入的内容】、【再点一下输入的内容】(此留空则一次输入全部内容)

 

效果如图

更多Quicktags API的用法,可以参考官方文档

 

可视化编辑模式下注册按钮

这个就比较麻烦了,我是懒得写这个教程了,有兴趣可以搜索 “wordpress 可视化编辑器添加按钮”。加油,我相信你可以的。

 

断断续续写了三天,这篇文章耗时七八个小时。

这里是320,我们下次见

收集的所有资源均来自网络,仅供私下交流学习之用,任何涉及到商业目的的均不能使用,否则产生的一切后果由您自行承担,提供资源但是不对任何资源负法律责任,所有资源请在你下载后24小时删除。 如有侵权,联系 admin#mail.320nle.com
320印象 » WordPress 添加短代码 shortcode 和自定义按钮,加快文章写作速度

发表评论