当前位置:秋硕笔记 > 记录 > 正文

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

演示:

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

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

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


add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce() {
?>

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

[cc]
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’
));
};
[/cc]

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

[cc]
.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;}
[/cc]

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

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论抢沙发