511遇见 是基于Bootstrap框架的WordPress网站,代码高亮插件使用了WP-GeSHi-Highlight插件,但每次在文本编辑模式下我们都要根据代码类型插入pre,非常的不方便,很影响我们的编辑效率,所以我们自己动手给我们的编辑器附加一些常用功能。
以上图片是我编辑器使用的快捷按钮,在编辑文章代码时不用再手动输入标签,显得十分方便。先分享一下代码:
/**
* wordpress编辑器自定义WP-GeSHi-Highlight快捷标签按钮
*/
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
}
代码解析:
1、QTags.addButton( );
QTags.addButton( '','' );
【四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),n表示换行】
QTags.addButton( '按钮ID','按钮显示名','点一下输入内容','点一下关闭内容' );
可以自定义添加多行 QTags.addButton( ); 增加多个按钮!
4、本站使用个WP是4.5.3完全兼容通过。
5、你如果使用的代码高亮插件是WP-GeSHi-Highlight,下面可以省略:
PHP" line="1" escaped="true">
为了输入代码方便,我们加入了空格,以上效果都是格式化后的效果,如果你对本站的代码高亮插件的样式感兴趣,建议阅读
wordpress代码高亮插件 WP-GeSHi-Highlight
由于本站基于Bootstrap所有其他都是Bootstrap集成的功能,你可以根据自己的需要添加自己最常用的代码插入按钮,方便自己在文本模式下编辑。