wordpress给编辑器添加自定义代码按钮

很多同学会遇到,自己的按钮想添加一个到你的编辑框中,这样就很方便,于是看到过一篇文章,转载过来,希望对大家有用。

可以利用编辑器自定义按钮数据固定格式内容,遗憾的是目前只能在文本模式也就是html模式下数据这些内容,这也极大的方便了文章的编辑和发布,对于那些经常需要插入短代码的,在HTML编辑器的工具栏里加上各种各样的快捷标签也是很有用的。

以下代码在wordpress 4.6.1亲测可以实现:

打开您的主题文件下的functions.php文件,添加以下代码(请注意备份文件,以免误操作导致网站无法正常显示。

// 添加HTML按钮
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( '按钮名字1', '按钮名字1', '代码', '/代码' );
QTags.addButton('按钮名字2', '按钮名字2', '代码2', '/代码2');
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

下面几个编辑工具;,喜欢可以自行添加,方法同上

/// 添加HTML按钮
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( '大标题', '大标题', '<h2 style="font-family:&quot;color:#55595C;font-size:1rem;background-color:#FFFFFF;">', '</h2>' );
QTags.addButton( '小标题', '小标题', '<h5 style="font-family:&quot;color:#55595C;font-size:1rem;background-color:#FFFFFF;">', '</h5>' );
QTags.addButton( '按钮', '按钮', '<a class="btn btn-default" href="http://修改URL">', '</a>' );
QTags.addButton( '说明框', '说明框', '<div class="article-desc">', '</div>' );
QTags.addButton( '标记框', '标记框', '<div class="commentform-text">', '</div>' );
QTags.addButton( '题块', '题块', '<div class="post-theme-module">', '</div>' );
QTags.addButton( '加粗', '加粗', '<strong>', '</strong>' );
QTags.addButton( '代码', '代码', '<pre class="prettyprint lang-js">', '</pre>' );
QTags.addButton( 'p', 'p', '<p>', '</p>' ); 
QTags.addButton( 'hr', 'hr', '<hr>', '' );
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

添加以下css到主题下的.css文件下;本站使用的是DUX主题所以css放在main.css文件内,其他模板请放在全局调用的css文件里

.article-desc{background-color:#FAFAFA;padding:15px 30px;font-size:14px;margin-left:-30px;margin-right:-30px;color:#999;margin-bottom:30px}
.post-theme-module{margin-bottom:30px;border-top:4px solid #F2F2F4;border-bottom:4px solid #F2F2F4;padding:30px 0 30px 230px}.post-theme-module .thumb{float:left;margin-left:-230px;width:100%}.post-theme-module h3{font-weight:bold;font-size:16px;margin:0 0 7.5px}.post-theme-module h4{font-size:14px;line-height:1.4;margin:0 0 15px;color:#999}.post-theme-module .btn{margin-right:7.5px}@media (max-width: 544px){.post-theme-module{padding-left:0;text-align:left}.post-theme-module .thumb{float:none;margin-left:0;width:auto;display:block;margin-bottom:7.5px}.post-theme-module .btn{margin-right:0}.post-theme-module .btn-default{display:none}}
.article-desc{margin-left:-15px;margin-right:-15px;padding:15px;line-height:1.4;color:#999}}
.commentform-text{color:#999;line-height:35px;font-size:12px;background-color:#F2F2F2;border-radius:2px;padding:0 15px;display:inline-block}.commentform-text p{margin:0}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永远的WEB小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值