WordPress编辑器如何添加自定义标签,实现快速输入

2020年10月30日前端开发评论111,953字数 869阅读2分53秒阅读模式

为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( '', '', '', '' ); 增加多个按钮!

为登录用户显示不同的 WordPress 菜单 前端开发

为登录用户显示不同的 WordPress 菜单

有的网站需要为未登录用户和登录用户显示不同的菜单,那么该如何实现呢? 可以通过下面的代码实现: 将下面代码添加到当前主题函数模板functions.php中: if( is_user_logged_i...
WordPress如何设置强制登录否则无法查看网站 前端开发

WordPress如何设置强制登录否则无法查看网站

如网站内容只希望注册用户浏览,对其他所有人隐藏,浏览者未登录访问直接跳转到登录注册页面,可以用下面的代码实现。 将下面代码添加到当前主题函数模板functions.php中: 代码一 未登录访问网站直...
WordPress 如何导出部分文章 前端开发

WordPress 如何导出部分文章

WordPress 自带的导出功能只能导出全部文章,如果想导出部分文章或者某个文章,可以安装文章导出插件Single Post Exporter。 安装并启用插件后无需设置,会分别在文章编辑页面、文章...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定