WordPress 编辑器添加自定义按钮

admin wordpress评论956字数 1490阅读模式
摘要

很多朋友在编辑博文的时候都会因为一些特殊的需求而在 WordPress 文章编辑器内的文本编辑器中添加一些特殊样式 CSS 或者其他代码,而默认的文本编辑器中只有寥寥可数的几个按钮,例如 b、i、link、b-quote … more、关闭标签 等。
而在 WordPress 编辑器里添加各种按钮,不仅可以给编辑器增加更多功能,还可以更方便快捷地编辑文章。为了能更方便的编辑文章,决定在文本编辑器内添加一些自己常用的自定义按钮。

因为使用 grace主题方式,网上的新建 JS 文件的方法在子主题下没有成功(我也是在学习中,所以还不知道是什么原因),从而采用了将 JS 内容写到 functions.php 的方法。

代码如下:

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'my_quicktags');
function my_quicktags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'black', '后面的是自定义按钮--->', "", "" );
QTags.addButton( 'wp_page', '分页按钮', "<!--nextpage-->n", "" );
QTags.addButton( 'span', '下划线', '<span class="xhx">', '</span>' ); 
QTags.addButton( 'btm-zd', 'Go Button', '<a class="btm-zd" href="#" target="_blank" rel="nofollow">', '</a>' ); 
QTags.addButton( 'btm-dl', 'Download', '<a class="btm-dl" href="#" target="_blank" rel="nofollow">', '</a>' ); 
QTags.addButton( 'textsuc', '绿边文本框', '<p class="textsuc">', '</p>' ); 
QTags.addButton( 'texterr', '红边文本框', '<p class="texterr">', '</p>' ); 
QTags.addButton( 'textok', '蓝边文本框', '<p class="textok">', '</p>' ); 
QTags.addButton( 'textgreen', '绿块文本', '<p class="textgreen">', '</p>' ); 
QTags.addButton( 'textblue', '蓝块文本', '<p class="textblue">', '</p>' ); 
QTags.addButton( 'textred', '红块文本', '<p class="textred">', '</p>' );
function my_quicktags() {
}
</script>
<?php
}

将这段代码添加到子主题的 functions.php 文件内,怎么添加?可以看这里:

《修改 grace 主题的 functions.php》

保存并上传替换子主题的 functions_suxingme.php (记得备份原文件)。刷新后台某一篇文章的编辑器便可以看到新增加的自定义按钮了。

自定义按钮中的样式 CSS class="XXXXX" 可以在子主题 style.css 里面添加。
在这里提及到修改子主题 CSS:

PS:代码里的自定义按钮都是我常用的,如果你要折腾属于你的自定义按钮,可以参考下面的格式自己编写。

QTags.addButton( 'my_id', 'my button', 'n</span>', '</span>n' );
这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),n 表示换行。(注意字符的全角、半角和大小写)

形象说明: QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );

可以自定义添加多行 QTags.addButton ( ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘ ); 增加多个按钮!

版权声明:文章图片资源来源于网络,如有侵权,请留言删除!!!
广告也精彩
admin
  • 本文由 发表于 2022年9月26日 20:50:24
  • 转载请务必保留本文链接:https://www.58pxe.com/8468.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: