wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮
在WordPress编辑器HTML模式界面中添加
按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发者肆意的修改按钮及其布局。
自定义按钮起效的两种途径 ↑
首先我们要做的是了解如何才能让我们自定义的效果可以在后台起效,实现按钮修改。我总结出了两种方法,一种是通过wordpress的wp_enqueue_script来实现,一种是通过在后台钩上第一段代码来实现。
第一种,利用wp_enqueue_script来实现 ↑
这种方法需要进行两个步骤,一个是在主题目录下的functions.php中添加下面的代码:
第二个是在主题目录下放置一个my-custom-quicktags.js,里面放置一段对脚本的附加代码。当然,这个文件的放置位置也可以修改,这时需要修改上面代码中的plugins_url(basename(dirname(__FILE__)) . "/my-custom-quicktags.js")一句以保证路径正确。在my-custom-quicktags.js中,我们放置对应的添加修改删除按钮功能的脚本。如下:
QTags.addButton( 'printCode', 'printCode', '[mycode]'+"\n", "\n"+'[/mycode]');
//将在现有的按钮最后添加一个新的printCode按钮。具体的方法将在下文讲到。
第二种,通过勾上一段代码,向后台页面中添加一段可以实现功能的代码 ↑
这种方法比较笨拙,但更容易被理解,即在后台页面的底部增加了一些代码,这些代码恰好能实现这一效果。代码如下:
// 下面的代码可以增加HTML模式下的按钮
$php_name = end(explode('/',$_SERVER['PHP_SELF']));
if(is_admin() && ($php_name == 'post.php' || $php_name == 'post-new.php')):
function add_html_shortcode(){
?>
edButtons[60]=new QTags.TagButton('hr','hr',"\n\n
\n\n",'','hr');
edButtons[122]=new QTags.TagButton('h3','h3','
','
','h');
edButtons[123]=new QTags.TagButton('tab','TAB',"\t",'','tab');
edButtons[130] = null;
edButtons[140] = null;
}
add_action('admin_print_footer_scripts','add_html_shortcode');
endif;
向后台界面中增加新的按钮 ↑
由于wordpress后台编辑器多半是用脚本来实现的,因此我们要做的是通过脚本代码来控制按钮的数量布局和功能。
向后台界面中添加按钮有两个途径,上文中已经介绍了一种,即QTags.addButton('printCode','printCode', '[mycode]', '[/mycode]');,另外还有另外一种增加的方法,即通过在quicktags.js中预留的空间里增加按钮数量。
这两种增加的方法所添加的代码,通过上文所说的两种起效方法都是可以实现的,只要把JS代码放在对应的地方即可。
/wp-includes/js/quicktags.js中定义了后台编辑器的按钮,通过代码解压,我们可以看出这些按钮是怎么起作用的。我们发现在最后的按钮定义的地方:
edButtons[10] = new c.TagButton("strong", "b", "", "", "b");
edButtons[20] = new c.TagButton("em", "i", "", "", "i"),
edButtons[30] = new c.LinkButton(),
edButtons[40] = new c.TagButton("block", "b-quote", "\n\n
", "
\n\n", "q"),
edButtons[50] = new c.TagButton("del", "del", '', "", "d"),
edButtons[60] = new c.TagButton("ins", "ins", '', "", "s"),
edButtons[70] = new c.ImgButton(),
edButtons[80] = new c.TagButton("ul", "ul", "
- \n", "
\n\n", "u"),
edButtons[90] = new c.TagButton("ol", "ol", "
- \n", "
\n\n", "o"),
edButtons[100] = new c.TagButton("li", "li", "\t
", "\n", "l"),
edButtons[110] = new c.TagButton("code", "code", "", "
", "c"),
edButtons[120] = new c.TagButton("more", "more", "", "", "t"),
edButtons[130] = new c.SpellButton(),
edButtons[140] = new c.CloseButton();
是通过对edButtons数组的索引来排序的,我们在这些索引中间增加一些即可实现效果。如我们在上文可以起效的JS内添加这样一段代码:
edButtons[122]=new QTags.TagButton('h3','h3','
','
','h');
这样一来即可实现了在[120]more按钮之后增加一个h3按钮。
修改按钮 ↑
修改按钮的方法我只找到一种,即如上文所述,直接定义一个新的edButtons,用一个相同的索引覆盖掉原来的按钮。同样以h3按钮为例,增加一段代码:
edButtons[120]=new QTags.TagButton('h3','h3','
','
','h');
即可覆盖掉原来的more按钮,被替换为h3按钮。
你可能要问这个格式是什么。在上面的JS代码中,TagButton('h3','h3','
','
','h')有五个参数,第一个是一个代号,第二个是按钮内要显示的文字,第三个是点击第一下按钮显示的标签,第四个不用说就是点击第二下的关闭标签,如果你要增加的是
标签,第四个参数就不填了,第五个参数好像没什么用,可能是一个代号。
删除按钮 ↑
删除按钮的方法非常简单,只是修改按钮的一种特殊情况,即将一个原本有的索引对应的值设置为null即可删除该按钮,如:
edButtons[120]=null;
这样一来,more按钮就不会再出现在按钮一栏中了。
通过上文的讲解,相信你对如何进行后台编辑器的按钮安排已经有了一个非常全面的掌握了。
wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮相关推荐
- wordpress简捷按钮_通过在WordPress帖子中添加快速编辑按钮来节省时间
wordpress简捷按钮 Have you ever made a mistake in your old WordPress posts and realized it when your use ...
- 如何在WordPress区块编辑器(Gutenberg)中添加和对齐图像
Images bring life to your WordPress posts and pages by making them more engaging. However, many begi ...
- html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号 捆包号 品名 规格 材质 重量 业务需求是,从后台获取到订单 ...
- mysql log 记录报错 sql语句_MySQL生产库中添加修改表字段引起主从崩溃的问题总结...
上周末和开发人员对线上库中的部分表的在线DDL和update,这过程中出现了一些意料之外的问题,现将过程.分析和解决方案在这里总结一下 一. 需求背景: 要在如下表中添加字段(modified_at) ...
- Android源码中添加 修改应用
第一部分:添加一个新的应用 1. 在和系统相同版本的SDK目录下开发自己的android应用 2. 把开发的android工程放到源码的packages/apps/目录下 3. 在工程目录下添加And ...
- 在Android应用中添加修改主题功能
1. 内容 娱乐性质的APP如果有修改主题的功能,会给这款APP增色不少.关于Android APP当中,做主题工作相关工作比较好的,要属腾讯QQ了.本文将对APP修改主题做简要分析实现. 2. 实现 ...
- vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法
如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 vue 组件 //我用js在上面div标签中插入一个 text goes here export default { ... mo ...
- discuz后台主导航栏菜单中添加新的菜单项的方法
http://blog.csdn.net/shgly/article/details/11757521
- wordpress添加媒体_如何在WordPress中添加社交媒体共享计数小部件
wordpress添加媒体 Earlier on this blog, we created a Social Media Cheat Sheet for WordPress, but that on ...
最新文章
- 在GridView里做单选按钮,总结了三种方法
- DQN 笔记 State-action Value Function(Q-function)
- java foreach 跳过本次循环_【Java】对foreach循环的思考
- std::future ---C++17 多线程
- 天不知道地知道你不知道我知道谜底_温州这里有个7000平方米的“寻宝”地,你不知道就亏大了!...
- 修改oracle实例名orcl为demo
- Linux---如何创建文本文件
- html数据透视,高级Excel – 数据透视表工具
- 简单典型二阶系统_反馈控制系统的性能
- C语言-求阶乘的两种方法
- Linux下WebLogic12安装
- 关于网络游戏的影响(腾讯游戏)
- 283页K8S实战指南,内容详实,代码齐全可复制!
- 各大网盘搜索资源神器免费送!!!
- 烤仔创作者联盟 | NFT是市场的下一个答案?或迎来新一轮“造福潮”
- java存根_java – Mockito在测试方法之外的存根
- 攻防世界-pwn-forgot
- SNS:95 后社交方式新主张
- 如何解决:对路径的訪问被拒绝这个问题.
- java寂静岭 攻略,GBA版《寂静岭》HARRY篇图文流程攻略