为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 条评论
登录 后参与评论

相关文章

来自专栏SpringBoot 核心技术

目录:SpringBoot 核心技术

上述是有关SpringBoot初期目标的目录,后期在更新文章中可能还会添加,每次添加都会修改本文章内容,并且每次发布新文章都会添加超链接到对应的章节。Sprin...

7809
来自专栏wblearn

简书搜索自动匹配功能

今天周六,我又来分享知识啦。最近一直在忙项目,所以趁着这个周末,喝着咖啡,听着音乐,敲着代码就把做项目的知识点总结给大家,简直不要太惬意,哈哈。

1551
来自专栏美丽应用

SkyOlin助手:使应用窗口化的黑科技

1733
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

在Android 设备上获取照片、裁剪图片、压缩图片 @TakePhoto V3.0 发布

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) TakePhoto 简介 TakePhoto是一款用...

4926
来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

3989
来自专栏james大数据架构

Android一些关于分辨率和布局的设置

1、Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? drawable- hdpi、...

2039
来自专栏IMWeb前端团队

React-Native简介

React-Native 基于目前React来开发IOS原生应用,Android版本将在年底推出。 为什么需要React-Native 目前主流的应用大体分成三...

32310
来自专栏小白安全

ClickJacking攻击-获取管理员权限

前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞。本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程。但在说明过程之前,先带大...

31611
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

1193
来自专栏freesan44

实现 iOS 前台时的推送弹窗效果

原文链接:http://www.jianshu.com/p/67864e1c2085

1512

扫码关注云+社区

领取腾讯云代金券