WordPress 6.0自定义编辑器按钮最新代码

本文提供的所有下载源码均为网络共享资源,仅供测试使用。

WordPress 6.0自定义编辑器按钮最新代码

5.25日,部分网站都升级到了WordPress 6.0,有一些经典编辑器自定义按钮结果失效了,不在显示~

这里给大家分享最新解决方案,替换源码的旧代码即可。

找到当前使用主题所在的文件夹,用Notepad++或者Sublime text打开其中的function.php文件,在该文件的最后添加以下代码。

//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
    edButtons[110]=null;
    QTags.addButton( 'p', 'p', '<p style="text-indent: 2em;">', '</p>');
    QTags.addButton( 'h2', 'h2', '<h2>', '</h2>');
    QTags.addButton( 'h3', 'h3', '<h3>', '</h3>');
    QTags.addButton( 'h4', 'h4', '<h4>', '</h4>');
    QTags.addButton( 'h5', 'h5', '<h5>', '</h5>');
    QTags.addButton( 'inline-highlight', 'inline-highlight', '<span id="inline-code-highlight">', '</span>');
</script>
<?php
}

上述代码中笔者共添加了5个自定义按钮,均是笔者写作时常用的html标签,分别是段落标签p,标题标签h3、h4、h5以及span标签。

为了节省写作时间,笔者还将常用的标签样式集成到了自定义标签中。比如为段落标签p集成了一个首行缩进两字符的样式,以符合中文的写作习惯。

为inline-highlight按钮集成了一个id名称为inline-code-highlight的样式。


如果在上述添加的标签中没有集成css样式的id名称/class名称,或者如上述p标签一样将css样式直接集成在了按钮中,可以忽略本节。如果集成了css样式的id名称/class名称,需要在主题的样式文件中定义该样式,否则标签将无法正常使用。

比如笔者自定义按钮中的inline-highlight标签,就需要在模板样式文件中添加如下代码才能正常使用。

#inline-code-highlight {
border: solid 1px #E7EAED;
background-color: #F3F4F4;
border-radius: 5px;
padding: 0px 5px;
font-size: 0.875rem;
}
重要声明

本站资源均来自网络分享,如有侵犯你的权益请私信留言收到留言后,我们会第一时间进行审核。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可获取的素材,建议升级对应的VIP。全站90%以上的素材均有备份”。本站资源均以主流网盘分享,以7z、rar、分卷等常见的格式压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar、WinRA软件。有疑问请查看站内帮助中心!

给TA打赏
共{{data.count}}人
人已打赏
现学现会

在线转存百度网盘秒传资源 免脚本安装

2022-4-23 11:00:47

现学现会

Wrodpress 7B2首页动态搜索模块 采集号同款

2022-6-20 13:35:42

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索