欢迎光临
我们一直在努力

wordpress教程之如何自定义编辑器上方按钮

下图就是我添加好的效果了:

wordpress教程之如何自定义编辑器上方按钮

在我们使用wordpress的编辑器的时候,有时候就会为编辑器上标签按钮少为苦恼,有没有什么办法可以在编辑器上增加一些按钮呢,今天,我带来的就是wordpress编辑器上方增加自定义按钮的操作步骤:
首先,我们需要找到wordpress中主题的functio.php文件,在文件中复制下面的这一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php

add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) { //扩充发表文章编辑器的导航标签
   
?>
<script type="text/javascript">
    QTags.addButton( '注意', '注意', "<span class='beCareful'>", "</span>" );
    QTags.addButton( '加密内容', '加密内容', "[secret key='123']", "[/secret]" );
    QTags.addButton( '前言', '前言', "<p class='con_info'>", "</p>" );
    QTags.addButton( '超链接', '超链接', "<a href=''>", "</a>" );
    QTags.addButton( 'a', 'a', "<a href=''>", "</a>" );
    QTags.addButton( 'p', 'p', "<p>", "</p>" );
    QTags.addButton( 'li', 'li', "<li>", "</li>" );
    QTags.addButton( 'span', 'span', "\n<span>", "</span>" );
    QTags.addButton( 'h1', 'h1', "\n<h1>", "</h1>" );
    QTags.addButton( 'h2', 'h2', "\n<h2>", "</h2>" );
    QTags.addButton( 'h3', 'h3', "\n<h3>", "</h3>" );
    QTags.addButton( 'h4', 'h4', "\n<h4>", "</h4>" );
    QTags.addButton( 'h5', 'h5', "\n<h5>", "</h5>" );
    QTags.addButton( 'img', 'img', '\n[caption id="attachment_1827" align="alignnone" ]<img src="" alt=""  class="size-full wp-image-1827" />[/caption]', "" );
  QTags.addButton( '点击', '点击', '\n<h4>效果请猛戳此处:<a href="https://www.huanggr.cn/works///index.html" target="_blank">点击</a></h4>' );
    QTags.addButton( '下载', '下载', '\n<h4>下载请猛戳此处:<a href="https://www.huanggr.cn/works/"  target="_blank">下载</a></h4>' );
    QTags.addButton( 'secret', 'secret', "\n[secret key='123']", "[/secret]" );
    QTags.addButton( 'embed', 'embed', "\n[embed]\n", "\n[/embed]" );
</script>
<?php
}
?>

注意哦,上面的代码都是要复制的呀。

效果图如下:

wordpress教程之如何自定义编辑器上方按钮

代码图如下:

wordpress教程之如何自定义编辑器上方按钮
赞(0) 打赏
未经允许不得转载: » wordpress教程之如何自定义编辑器上方按钮
分享到: 更多 (0)

评论标题 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏