wordpress纯代码为后台文章编辑器添加自定义按钮实现快速输入

1.添加代码

把下面代码复制到当前所用主题的functions.php文件的最后一个 ?> 之前

// 添加自定义编辑器按钮
function appthemes_add_quicktags() {
?>
<script type="text/javascript">
  if ( typeof QTags != 'undefined' ) {
    QTags.addButton( 'hr', 'hr', '<hr />', '' ); //添加分隔线
    QTags.addButton( 'h1', 'h1', '<h1>', '</h1>' ); //快捷输入h1标签
  }
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

2、修改代码

需要添加多个按钮时,按照第5、6行代码继续增加就可以。
把上方5/6行的参数按照下面的说明修改替换

QTags.addButton( '按钮的ID', '显示的名称', '点一下输入的内容', '再点一下输入的内容(此留空则一次输入全部内容)' ); //添加分隔线

按照上面的流程设置后,就可以添加1个自定义按钮,实现点击自定义按钮输入指定的内容了,下面是添加了一个【倒计时】按钮的实现效果,还可以再添加更多的按钮实现点击输入自己自定义的内容。

wordpress纯代码为后台文章编辑器添加自定义按钮实现快速输入插图

//添加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
}

 


重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员 大叔心  或给邮箱发送邮件mail@dashuxin.com 我们会第一时间进行审核删除。 站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果你遇到支付完成,找不到下载链接,或者不能下载,或者解压失败,先不要忙! (博主有可能有事情或者在睡觉不能及时的回复您,QQ留言后,请耐心等待即可!)

网站搭建

手机装linux系统

2021-10-13 20:02:26

网站搭建

WordPress自定义字段插件:Advanced Custom Fields超详细使用教程

2021-10-15 1:55:23