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' );

添加以下css到主题下的.css文件下

Vie3.7主题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}

给TA买糖
共{{data.count}}人
人已赞赏
教程

什么是蜘蛛池?蜘蛛池有用吗?对网站优化有好处吗?

2019-9-9 4:14:22

教程

easyicon 专门下载图标的网站

2019-9-9 4:40:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索