为 WordPress 编辑器添加自定义按钮

很多朋友在编辑博文的时候都会因为一些特殊的需求而在 WordPress 文章编辑器内的文本编辑器中添加一些特殊样式 CSS 或者其他代码,而默认的文本编辑器中只有寥寥可数的几个按钮,例如 bilinkb-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 ( ‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘ ); 增加多个按钮!

 

自定义示例介绍

在编辑文章时难免会有需要下载的文件等,往往只是插入一个超链接,美化感很差,今天带来一个简单代码实现美化下载按钮教程,可以在编辑文章的时候在文本中调用。

 

演示

代码

  • 在主题的functions.php 中添加如下代码
    //添加下载按钮
    function appthemes_add_quicktags() {
    ?><script type="text/javascript">// <![CDATA[
    QTags.addButton( 'downs', '下载按钮', '<div class="sg-dl"><span class="sg-dl-span"><a href="','" target=_blank title="文件下载" rel=nofollow><button type="button" class="btn-download">本地下载</button></a></span></div>' );
    // ]]></script><?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

     

  • 在主题的style.css 中添加 css 代码美化
    .btn-download{color:#fff;background:#5fbaac;border-top:0;box-shadow:0 0 0 1px #EEE;border:2px solid #fff;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:5px;opacity:.8;text-indent:0;margin-top:5px;margin-bottom:5px;display:inline-block;font-weight:400;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.btn-download:before{content:"f0ed";display:inline-block;font-style:normal;font-family:FontAwesome;text-align:center;margin-right:8px}.sg-dl{margin:20px 0 10px 0;text-align:center}.sg-dl .sg-dl-span{margin:0 auto}

     

  • 添加完成后我们就已经实现了美化下载按钮,写文章的时候,将可视化编辑器调整成文本模式即可看到下载按钮,点击一次下载按钮输入链接地址,再次点击下载按钮代码结束,如下图
免责申明:
1. 本站所有教程、文章分享目的仅供大家学习和交流,资源连接来自于网络,非本站发布,本站也不存储任何资源!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源质量及其时效性,恕不接受任何提问。
4.本站即不保存任何资源,也不对任何链接作品负责,希望大家赞助本站,费用仅维持本站的日常运营所需!
5. 百码云无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 通过本站收集链接的相关资源,严禁杜绝任何形式的正式商业用途,请前往官方购买。
7. 但凡通过本站链接导航下载的任何作品,虽不归本站所有,但在研究学习的前提下,请务必在下载24小时后删除。
百码云资源站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本文章采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
百码云 » 为 WordPress 编辑器添加自定义按钮

提供互联网优质的链接集合站点

关于权限 站内帮助