本文转自:https://blog.sunzexiang.com/archives/2673.html

WordPress是一款由PHP语言开发的博客系统,因其易用性、易扩展性、 功能强大、美观和对搜索引擎友好等而闻名于世,其市场占有率超过30%。尽管WordPress系统具有以上的优点,但是其编辑器一直以来都饱受诟病。特别是可视化编辑器,其排版不符合中文习惯,使用起来浪费时间。Wordpress 5.0以后使用了区块编辑器,大量博主试用后吐槽新的编辑器还不如经典编辑器好用,纷纷寻找切换回经典编辑器的方法。好在官方出了一个经典编辑器的插件,才解决了众多博主的烦恼。

笔者从建站之初就开始使用WordPress系统,至今已有八个年头。一直以来,笔者都禁用了WordPress的可视化编辑器,而使用其代码编辑器。在代码编辑器中,可以使用html代码来准确地控制文章版式。但编写html代码也需要耗费一定的时间,如果能将常用的html代码定义成编辑器上的按钮, 那么在写作时就方便多了。同时,也可以将不常用的按钮删除,以保持编辑器界面的清爽。

1. 修改思路

添加按钮时采用QTags.addButton( ”, ”, ”, ”)函数来实现。该函数共有四个参数,分别表示自定义按钮的ID、按钮的显示名称、输入内容以及关闭内容。

同时,通过修改edButtons[index]=null语句中index的数值,可以删除对应的按钮。不同按钮对应的index值如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
edButtons[10]  = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '');
edButtons[20]  = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '');
edButtons[30]  = new qt.LinkButton(); // special case
edButtons[40]  = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '');
edButtons[50]  = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '');
edButtons[60]  = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '');
edButtons[70]  = new qt.ImgButton(); // special case
edButtons[80]  = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '');
edButtons[90]  = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '');
edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '');
edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '');
edButtons[120] = new qt.TagButton( 'more', 'more', '<span id="more-393"></span>\n\n', '', '', '', '');
edButtons[140] = new qt.CloseButton();

2. 修改模板函数文件(function.php)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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的样式。

3. 修改主题样式文件

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

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

1
2
3
4
5
6
7
#inline-code-highlight {
    border: solid 1px #E7EAED;
    background-color: #F3F4F4;
    border-radius: 5px;
    padding: 0px 5px;
    font-size: 0.875rem;
}

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。