专栏首页DeveWork为WordPress 后台编辑器文本模式(HTML模式)添加按钮

为WordPress 后台编辑器文本模式(HTML模式)添加按钮

今天为各位带来在WordPress 后台编辑器文本模式(HTML模式)添加自定义按钮的方法,这个的话如果使用S-shortcodes 短代码插件的可能有接触,因为在最新版已经集成了。文本模式(HTML模式)添加按钮是为了更加方便地进行写作,特别是像Jeff 这种习惯在文本模式(HTML模式)下写文章的博主。之前分享过的一篇文章《WordPress自带TinyMCE编辑器相关功能增强》也大致有介绍,今天在这里则更加细致说明方法并给出多个实例。

为WordPress 后台编辑器文本模式(HTML模式)添加按钮教程

方法很简单,依样画葫芦即可。在主题的functions.php 文件下加入以下代码:

add_action('admin_print_scripts', 'my_quicktags'); function my_quicktags() { wp_enqueue_script( 'my_quicktags', get_stylesheet_directory_uri().'/my_quicktags.js', array('quicktags') ); }

然后创建一个my_quicktags.js文件,按钮便是在这里自定义的,先给出个定义< h1 >标签的例子:

QTags.addButton( 'h1', 'h1', "\n<h1>", "</h1>\n" ); //快捷输入h1标签 //QTags.addButton( 'my_id', 'my button', '\n', '\n' ); //这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),\n表示换行。

S-shortcodes 短代码插件的代码如下:

QTags.addButton( 'alert', 'alert', "\n[box style=\"alert\"]\n红色警示\n", "[/box]\n" ); QTags.addButton( 'warning', 'warning', "\n[box style=\"warning\"]\n黄色提醒\n", "[/box]\n" ); QTags.addButton( 'download', 'download', "\n[box style=\"download\"]\n蓝色下载\n", "[/box]\n" ); QTags.addButton( 'info', 'info', "\n[box style=\"info\"]\n灰色公告\n", "[/box]\n" ); QTags.addButton( 'tip', 'tip', "\n[box style=\"tip\"]\n绿色提示\n", "[/box]\n" );

后台效果:

Jeff使用的插件没有提供相关按钮,因此针对四种常用的语言,我在my_quicktags.js 是这么写的(直接上图,写代码会被执行):

关于为什么要\"css\" 的问题,如果你学过C 语言或C++ 等类似的语言,你就知道是这么回事啦~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insigh...

    Jeff
  • 设置你的Gravatar头像的方法

    Gravatar是Globally Recognized Avatar的缩写,是gravatar推出的一项服务,意为“全球公用的头像”。如果在Gravatar的...

    Jeff
  • WordPress 中强制设置 特色图像 才能发表文章

    在开发WordPress 主题的时候,为了丰富网页,常常使用到特色图像功能;这就要求主题使用者为每篇文章都要设置个特色图像,但总有一些用户不会乖乖按要求做;如此...

    Jeff
  • 5分钟包会!教你Python截取任意视频片段转GIF动态图

    是不是好奇,下面的影视片段如何能浓缩成一张GIF图?是否好奇,神奇的自媒体大神怎么能轻易把影视频截图成一段段按自己所需的截图?本文,隆重推出Python视频制作...

    诸葛青云
  • Python计算机二级模拟题,现在开始!

    2016年开始人工智能大数据的火热引发了python学习的狂潮,也引发了全国计算机等级考试(National Computer Rank Examination...

    昱良
  • Django---MTV模型、基本命令、简单配置

    MTV模型 Django的MTV分别代表:        Model(模型):负责业务对象与数据库的对象(ORM)        Template(模版):负责...

    用户1214487
  • 手把手教你完成一个数据科学小项目(8):Emoji提取与分布图谱

    请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。

    古柳_DesertsX
  • python reduce分析

    一直没有关心inital参数是什么作用,网上有人给出源码,说是官方文档,但是这段代码是有问题的,

    py3study
  • 布衣之路(一):VMware虚拟机+CentOS系统安装

    前言:布衣博主乃苦逼的Java程序猿一枚,虽然工作中不会涉及系统运维,但是开发的项目总还是要部署到服务器做一些负载均衡、系统兼容性测试、系统集成等等骚操作,而...

    用户1615728
  • protobuf的那些事

    protobuf在api接口定义中有很广泛的使用。我们设计一个api接口,往往关注一些常用的指标:压缩率(影响到传输带宽和传输时间)、压缩效率、易读性、可扩展性...

    mariolu

扫码关注云+社区

领取腾讯云代金券