首页>建站相关>wordpress文本编辑器添加按钮

wordpress文本编辑器添加按钮

在之前的文章中实现了在wordpress自带编辑器可视化模式下添加一个按钮,步骤较为繁琐,相比之下,在html编辑模式下添加自定义按钮则要方便的多,因为自己常用的html标签不多,笔者准备添加两个标签,第一个是h3,作为文章段落标题,另一个依然是pre标签,用来呈现各类代码:

functions.php文件

很多功能的实现都依赖于这个文件的内容,一般的主题也大多会包含这个文件,虽然wordpress的插件丰富,功能也无所不包,但一般情况下,很多人更倾向于用一小段代码来解决小的需求。而这类代码往往都会要求增加至functions.php文件,所以该文件会被频繁的修改。functions.php是个很敏感的文件,它的出错容易造成全站无法访问,包括后台。在修改它之前,最后对其做一个备份,比如复制一份文件,命名为functions-backup.php,存放于同文件夹内,万一遇到修改该文件出错后全站无法访问,且无法通过网页登录后台的情况,可以删除被修改过的文件,将我们备份文件重命名为functions.php来解决。

生成按钮的代码

/*==========
编辑器增加按钮
==========*/ 
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce() {
?>
<script type="text/javascript">
    QTags.addButton( 'h3', '段落标题', '<h3>', '</h3>');
    QTags.addButton( 'pre', '代码块', '<pre><code class="language-javascript">', '</code></pre>');
</script>
<?php
}

生成新的按钮主要依赖这一句代码“QTags.addButton”,它需要4个参数:首先是按钮的专属名称;第二个参数是按钮的标题,这个标题会被显示在编辑器的按钮界面上;第三个是元素的开启标签;第四个则是元素的闭合标签。如果选择内容之后再点击按钮的话,则会一步到位的在被选内容的前后分别生成开启标签与闭合标签。

后续觉得按钮不够丰富,随时可以进行添加,比如博主又增加了一个h4作为小标题:

add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce() {
?&gt;
<script type="text/javascript">
    QTags.addButton( 'h3', '段落标题', '<h3>', '</h3>');
    QTags.addButton( 'h4', '分段小标题', '<h4>', '</h4>');
    QTags.addButton( 'pre', '代码块', '<pre><code class="language-javascript">', '</code></pre>');
</script>
<?php
}

页面显示效果

wordpress_htmleditor_addbutton

代码在html编辑模式下生成了两个按钮,分别是“段落标题”与“代码块”,尝试点击,功能正常。需要注意的是,笔者使用的wordpress版本是3.6.1版,最新版本的wordpress集成了新的编辑器,可能并不支持这样修改方式。

标签: wordpress

移动端可扫我直达哦~

推荐阅读

wordpress 2025-01-15

利用WordPress Settings API制作主题设置页

关于WordPress设置API在WordPress v2.7中添加了设置API,它允许开发人员创建管理选项页面。界面风格与WordPress后台风格保持一致,只是它使用起来并不那么简单。你不能只定义一个设置数组,您需要编写自己的字段...

建站相关 wordpress

wordpress 2025-01-13

woocommerce历史版本下载页

WooCommerce是一个开源的电子商务插件,专为WordPress网站设计,允许用户在其网站上创建和管理在线商店。自2011年推出以来,WooCommerce迅速成为全球最受欢迎的电商解决方案之一。https://develope...

建站相关 wordpress

wordpress 2025-01-13

关于wp_get_nav_menu_items()这个函数

自己手动书写css的情况,wp的wp_nav_menu()会提供一套分工明确的类,根据其默认类适配css基本就够用了。但应用一些其他框架的时候,不同框架的类名定义显然是不一致的,这个时候wp_nav_menu()提供的自定义功能就有些...

建站相关 wordpress

wordpress 2025-01-10

Wordpress主题中的单例模式

其实对于博主这样的初学者,这个话题是有点超纲的,但如果从零开始想做一个主题。观摩一些成熟的主题是必不可少的,这个时候就有可能遇到这种单例模式的写法,所以即便我们暂时用不到,但了解一下结构,多少能看明白这个类究竟在做些什么事情。单例模式...

建站相关 wordpress

wordpress 2025-01-06

Wordpress主题开发笔记之三 wp_head()

WordPress主题或插件都可以通过给wp_head()函数来向网站的head标签中加入内容,这个函数经常会和wp_footer()函数一起出现,顾名思义,wp_footer()负责在站点的尾部插入内容,这是官方推荐的引入资源的方式...

建站相关 wordpress

wordpress 2025-01-03

Wordpress主题开发笔记之零 劝退函数列表

在ytkah大佬的博客里看到了这个列表,原文地址如下,复制进excel表格内发现一共有951项(含中文小标题),粗略估计有900来个函数吧。当然这并不是Wordpress函数的全貌,但单这900多个函数中的部分函数,可能很多人终其职业...

建站相关 wordpress

wordpress 2024-12-26

从零开始做一个wordpress主题系列

一直想DIY一个wordpress主题,虽然梦想还是要有的,但念念不忘,至今也没有什么回响。博客里倒是攒了几篇相关的文章,眼瞅着孩子快放寒假,假期不再需要迎来送往,可能会空一点,就准备整理一下,顺便重拾这份初心。因为是随手做的笔记,所...

建站相关 wordpress

wordpress 2024-12-26

创建自定义WordPress主题设置页面

WordPress以其灵活性和易用性而闻名,使其成为各种规模网站的热门选择。有助于其灵活性的关键功能之一是能够为您的主题创建自定义设置页面。这使您可以为用户提供一个界面,以自定义主题的各个方面,而无需深入代码。为什么要创建自定义设置页...

建站相关 wordpress