SEO只是外表
技术才是我的追求

给wordpress编辑器添加自定义功能按钮

有没有感觉你的文章显示太单调了,除了一些头部标签,加粗标签外,没有更好的选择了。这时,你需要为你的wordpress编辑器增加一些实用的功能,例如一些彩色边框:

绿色边框
蓝色边框
虚线边框

如何实现,下面为你展示。

在wordpress的编辑器增加彩色边框的功能按钮的步骤:

1、在主题的function.php文件添加以下代码:

add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce() {
?>
<script type="text/javascript">
QTags.addButton( 'bs_notice', '绿色边框', '<div class="alert alert-success">', '</div>' );
QTags.addButton( 'bs_error', '蓝色边框', '<div class="alert alert-info">', '</div>' );
QTags.addButton( 'bs_xuxian', '虚线边框', '<div class="alert-xuxian">', '</div>' );
<?php
}
注意:这里共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容)

添加代码后,我们的wordpress编辑器的文本模式看到增加的按钮,点击后效果如下:

提示:这里我们把js代码直接添加了;如果是多个按钮,可以单独建一个js文件,再调用,调用代码如下 (假设js文件名为my_quicktags.js):
add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
wp_enqueue_script('my_quicktags', get_stylesheet_directory_uri() . '/js/my_quicktags.js', array(
'quicktags'
));
};

2、为上面的定义的选择器(alert-success,alert-info,alert-xuxian)添加css样式。在主题的style.css添加以下代码:

.alert{margin-bottom:20px;padding:10px 35px 10px 15px;border:1px solid #fbeed5;border-radius:2px;background-color:#fcf8e3;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.alert-success{border-color:#d6e9c6;background-color:#dff0d8;color:#56af45}
.alert-info{border-color:#bce8f1;background-color:#d9edf7;color:#3a87ad}
.alert-xuxian{border: 2px dashed rgb(41, 170, 227);border-radius:2px; background-color: rgb(248, 247, 245);margin-bottom:20px;padding: 10px 35px 10px 15px;}

这里以3个彩色边框为例子,演示了为wordpress编辑器添加自定义功能按钮的操作过程。同样的,你可以设计更多的css样式,添更多的功能按钮,从而更加地丰富你文章呈现的效果。

未经允许不得转载:棋哥SEO博客 » 给wordpress编辑器添加自定义功能按钮

分享到:更多 ()

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    JS代码呢?

    JS2年前 (2018-08-26)回复
    • js代码已经在function.php中添加了,提示框是说如果js代码太多,需要单独调用js文件时的调用方法(这里可以不用管的)

      qige2年前 (2018-08-28)回复