Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >WordPress后台文章编辑器添加下拉式短代码选择

WordPress后台文章编辑器添加下拉式短代码选择

作者头像
于飞云计算
修改于 2019-06-24 09:43:27
修改于 2019-06-24 09:43:27
81900
代码可运行
举报
文章被收录于专栏:技术经验分享技术经验分享
运行总次数:0
代码可运行

今天全百科网给大家分享的是WordPress后台文章编辑器如何添加下拉式短代码选择样式。

效果截图

改造方法

然后奉上改造代码,直接将代码丢到主题 functions.php 文件中即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 全百科网 后台编辑器添加下拉式按钮
function QGG_select(){
echo '
<select id="short_code_select">
	<option value="请选择一个短代码!!!">插入短代码</option>
	<option value="【ghide keyword=\'关键字\' key=\'验证码\']隐藏内容[/ghide]">公众号隐藏</option>
	<option value="【pwd_protected_post key=\'保护密码\']您需要选择一个短代码[/pwd_protected_post]">文章密码保护</option>
	<option value="【collapse title=\'说明文字\'][/collapse]">展开/收缩按钮</option>
</select>';
}
if (current_user_can('edit_posts') && current_user_can('edit_pages')) {
	add_action('media_buttons', 'QGG_select', 11);
}

function QGG_button() {
echo '<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("#short_code_select").change(function(){
			send_to_editor(jQuery("#short_code_select :selected").val());
			return false;
		});
	});
</script>';
}
add_action('admin_head', 'QGG_button');

最后说下按钮的添加。直接复制新增代码中如下语句:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<option value="请选择一个短代码!!!">插入短代码</option>

将 value 值改为你需要填入的短代码,“插入短代码”文字改为你按钮的显示名称即可。

注意引号的转义( ‘ → \’ )。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WordPress 3.9+的 TinyMCE 4 编辑器增强开发
从WordPress 3.9版本后,WordPress 默认的编辑器 TinyMCE 随之升级到了版本4,带来的问题以前在默认编辑器上的增强开发的效果可能失效。这篇文章旨在破旧立新,通过几个例子给大家带来几个TinyMCE4 编辑器的增强开发技巧。 还原字体种类及大小选择按钮 默认的话,字体种类及大小这两个按钮没有添加到TinyMCE 编辑器中,通过下面的函数,就可以实现有下拉形式的字体种类及大小这两个按钮。 // Enable font size & font family selects in the
Jeff
2018/01/19
1K0
WordPress 3.9+的 TinyMCE 4 编辑器增强开发
WordPress二次开发之插件权限控制
以字体样式插件为例,我们在添加菜单时设置了参数 manage_options 表示有这个权限的角色才能创建该菜单,而这个权限只有管理员才有,只有管理员登录时才能看到该菜单 ,这是一种方式
切图仔
2022/09/14
6140
WordPress 禁用 Rest API 默认路由兼容古腾堡 Gutenberg 编辑器
禁用 WordPress Rest API 默认路由后有利于 WordPress 站点安全及避免暴露网站所有内容,所有子凡的所有 WordPress 网站都是直接禁用了 WordPress 默认路由的,但是由于 WordPress 默认使用块编辑器(古腾堡 Gutenberg),所有如果直接使用代码禁用 WordPress Rest API 默认路由就会导致后台编辑器无法正常使用。
张子凡
2022/11/02
7390
WordPress 禁用 Rest API 默认路由兼容古腾堡 Gutenberg 编辑器
WordPress添加自定义字段栏目面板
wordpress博客的自定义栏目使用非常泛,没有使用过自定义栏目的博友可以看看《WordPress 自定义字段 自定义域的使用方法》。主题制作中往往会使用WP自定义字段实现一些功能,特别是在wordpress淘宝客模板中的使用,产品的价格、链接都可以通过自定义栏目使用。默认的自定义字段使用方法是下拉菜单形式,对于经常使用的字段,每次都要下拉选择显然非常不方便,因此给WP主题添加自定义栏目面板显得非常有必要。下面通过在主题的functions.php文件中添加代码实现该功能。
回忆大大
2023/03/09
9800
一个函数就搞定 WordPress 文章选项开发
我在 WPJAM Basic 插件的介绍页面就说过,WPJAM Basic 是我们 WordPres 果酱团队进行二次开发的基础,甚至花生小店这么复杂的电商小程序 SaaS 平台就是在 WPJAM Basic 的基础上开发出来的。
Denis
2023/04/13
4070
一个函数就搞定 WordPress 文章选项开发
WordPress主题开发,从入门到精通。
相关文档:https://www.wpzhiku.com/document/wordpress-plugin-basics/
房东的狗丶
2023/02/17
10.8K0
为wordpress文章添加额外功能[移植自DUX主题]
.xControl { font-size: 15px; font-weight: bold; padding: 5px 0; box-shadow:0 0 20px #d0d0d0;/* 阴影 */ background-color: #FFFFFF;/* 背景颜色 */ border-bottom: 2px solid #e74c3c;/* 边 */ transition: all 0.1s linear; text-align: center; border-radius: 0 0 5% 5%; border-radius:4px; } .xControl a{ text-decoration: none; display: block; }
AlexTao
2019/12/13
1K0
为wordpress文章添加额外功能[移植自DUX主题]
WordPress后台怎么让文章/分类/页面/标签显示ID
说WordPress后台怎么让文章、分类、显示ID信息,今天就简单分享一下,请接着往下看。
小狐狸说事
2023/11/17
3180
WordPress后台怎么让文章/分类/页面/标签显示ID
给WordPress新添加一个古腾堡编辑器
在WordPress中添加一个额外的古腾堡编辑器(Gutenberg Editor)实例可以通过自定义代码实现。以下是一个基本的步骤指南,帮助你在WordPress中添加第二个古腾堡编辑器实例。
WordPress爱好者
2024/10/17
1220
给WordPress新添加一个古腾堡编辑器
WordPress 3.5.1添加后台编辑器按钮
作者:matrix 被围观: 1,911 次 发布时间:2013-04-24 分类:Wordpress 兼容并蓄 | 无评论 »
HHTjim 部落格
2022/09/26
7830
WordPress 3.5.1添加后台编辑器按钮
为WordPress 后台编辑器文本模式(HTML模式)添加按钮
今天为各位带来在WordPress 后台编辑器文本模式(HTML模式)添加自定义按钮的方法,这个的话如果使用S-shortcodes 短代码插件的可能有接触,因为在最新版已经集成了。文本模式(HTML模式)添加按钮是为了更加方便地进行写作,特别是像Jeff 这种习惯在文本模式(HTML模式)下写文章的博主。之前分享过的一篇文章《WordPress自带TinyMCE编辑器相关功能增强》也大致有介绍,今天在这里则更加细致说明方法并给出多个实例。 为WordPress 后台编辑器文本模式(HTML模式)添加按钮教
Jeff
2018/01/19
2.5K0
为WordPress 后台编辑器文本模式(HTML模式)添加按钮
WordPress 技巧:在后台仪表盘显示待审日志列表
前面更换域名的日志中提到我爱水煮鱼将引入更多的作者来给大家介绍 WordPress 和其他互联网开源技术,目前供稿的作者的权限都是投稿者(contributor),它们写好日志之后,状态是待审的,这样就产生了一个问题,有时候是不会注意到有日志需要审核的,所以最好的办法就是在 WordPress 后台的首页(就是仪表盘)直接显示待审日志列表:
Denis
2023/04/15
2220
为WordPress添加自定义设置上传头像功能
虽热这个功能使用场景和频率都非常低,但在有时候还是需要WordPress来显示头像的,但是 zuanmang.net并不是每个人都有注册设置Gravatar头像。所以便需要我们手动为WordPress添加后台可自定义上传头像的功能,如下:
AlexTao
2020/08/05
1.4K0
wordpress 为自定义类型文章新增自定义字段的方法-文曦博客
wordpress强大之处在于有很强的可自定义性,使得插件、主题的开发变得及其便利。就拿我们今天要说的自定义文章添加自定义字段来说,就很便捷。
雾海梦曦
2022/11/14
1.1K0
wordpress 为自定义类型文章新增自定义字段的方法-文曦博客
纯代码给WordPress文章和评论添加OwO表情教程
之前折腾过一次评论表情,源码来自网络,可以说是非常强大,表情图标可以说是和手机系统一样充裕,但对于网站评论用就显得太过于杂乱了。 虽然所有的图标都分好类了,但不是12类别中的每个图标都会用到,增加用户发表评论的时间,对于网站的体验感来说是非常差的。
楚客追梦
2022/11/11
1.9K0
纯代码给WordPress文章和评论添加OwO表情教程
纯代码给WordPress文章添加卡片式内链的方法
写文章的时候会经常文章中引用其他文章链接,是为了让用户方便浏览,也增加文章关联度;更重要的是适当的引用文章,也可以让内容更加丰满,对用户体验上也是有提高;但是常规的文章内链一般就是直接放一个链接进去,干巴巴的一个链接不管是美观度还是用户体验都不是很好,所有全百科网搞了个简约美观的卡片内链样式。
于飞云计算
2019/07/22
1.4K0
纯代码给WordPress文章添加卡片式内链的方法
纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮
之前发过文章说过:使用 Prism.js 实现漂亮的代码语法高亮,本博客也使用的是它
沈唁
2018/12/12
2.4K0
WordPress代码实现防止发表重复标题的文章
其实所有的插件这些的就等于放到function.php的代码片段。function.php里面的插件集成出来也可以做成一个插件,反过来插件也可以集成到function.php里面,插件的好处就是方便管理,但也添加了静态的资源请求,所以就导致了,插件越多也会导致网站卡顿的情况,扯得有点远了,直接上代码。
七辰
2023/10/05
4150
WordPress自带TinyMCE编辑器相关功能增强
WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。 因为其功能相对简单,所以很多人都想着用给它扩展一下,那就扩展一下吧~ 更改编辑器默认视图为HTML/文本 WordPress默认的是,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者WEB设计者们
Jeff
2018/01/19
2.9K0
网站功能——添加文章编辑页面,支持 markdown 编辑器实时预览编辑
经常会有使用我博客源码搭建好网站的人问我为啥后台文章编辑页面没有富文本编辑器也没有支持 markdown 编辑,不方便预览。其实之前我也回答过很多次,在创建文章的时候,其实随便找个 markdown 编辑器创建好然后复制进去就行。
Hopetree
2023/07/08
4200
网站功能——添加文章编辑页面,支持 markdown 编辑器实时预览编辑
推荐阅读
相关推荐
WordPress 3.9+的 TinyMCE 4 编辑器增强开发
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验