为WordPress后台的 HTML 编辑器添加自定义标签按钮可以在编辑文章不用手动输入标签,十分方便。
不过wordpress默认的快捷标签按钮有时候不能满足我们的需求,那么我们否可以自定义添加自己想要的快捷按钮呢?
今天我们就来用JS,为编辑器如何添加自定义标签。
wordpress 增加自定义标签办法:
修改主题的 functions.php 文件,路径为:/网站路径/wp-content/themes/主题文件夹/functions.php
,然后将以下代码添加:
//添加编辑器自定义按钮 add_action('admin_print_scripts', 'my_quicktags'); function my_quicktags() { wp_enqueue_script( 'my_quicktags', get_stylesheet_directory_uri().'/js/my_quicktags.js', array('quicktags') ); }
然后在 主题文件夹\js
文件夹下,新建 my_quicktags.js
内容如下:
QTags.addButton( 'h2', 'h2', '<h2>', '</h2>' ); //快捷输入h2标签 QTags.addButton( 'h3', 'h3', '<h3>', '</h3>' ); //快捷输入h3标签 QTags.addButton( 'h4', 'h4', '<h4>', '</h4>' ); //快捷输入h4标签 QTags.addButton( 'pre', 'pre', '<pre>', '</pre>' ); //快捷输入pre标签
原理分析:
QTags.addButton( '', '', '', '' );
四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行
形象说明: QTags.addButton( '按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
可以自定义添加多行 QTags.addButton( '', '', '', '' ); 增加多个按钮!