b2主题的一些DIY-增加彩色提示框

b2主题用的还是经典编辑器,看样子短时间内作者没有适配古腾堡的可能,挺可惜的,古腾堡从刚开始的众人排斥到后来大多数Wordpress站长的接受和喜欢,本人就是其中之一。
下面来些DIY吧!

1,增加提示框,比如这句话,创意来自nirvana主题,很是好看加喜欢

教程如下:
在functions.php里添加如下代码即可搞定。

//短代码信息框//
//蓝色提示
function toz($atts, $content=null){
    return '<div style="color: #ffffff; background: linear-gradient(90deg,#20a0ff,#20b8ff); border: 0px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;border-radius: 34px;box-shadow:0 2px 10px 0 rgba(0, 0, 0, .15);">'.$content.'</div>';
}
add_shortcode('mom-cs','toz');
//绿色提示
function toa($atts, $content=null){
    return '<div style="color: #ffff; background: linear-gradient(90deg,#61be33,#8fce44); border: 0px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;border-radius: 34px;box-shadow:0 2px 10px 0 rgba(0, 0, 0, .15);">'.$content.'</div>';
}
add_shortcode('mom-sv','toa');
//红色提示
function toc($atts, $content=null){
    return '<div style="color: #ffffff; background: linear-gradient(90deg,#ff4949,#ff7849); border: 0px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px;border-radius: 34px;box-shadow:0 2px 10px 0 rgba(0, 0, 0, .15);">'.$content.'</div>';
}
add_shortcode('mom-sb','toc');
//黄色提示
function tob($atts, $content=null){
    return '<div style="color: #ffffff;  background: linear-gradient(90deg, #ff953f, #ffb449);  border: 0px solid #949fd8;  overflow: hidden;  margin: 10px 0;  padding: 15px 15px 15px 35px;border-radius: 34px;box-shadow:0 2px 10px 0 rgba(0, 0, 0, .15);">'.$content.'</div>';
}
add_shortcode('mom-sn','tob');
//添加按钮
add_action('after_wp_tiny_mce', 'my_quicktags');
function my_quicktags($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'blue', '蓝色提示框', '{mom-cs}', '[/mom-cs]' );
QTags.addButton( 'green', '绿色提示框', '{mom-sv}', '[/mom-sv]' );
QTags.addButton( 'red', '红色提示框', '{mom-sb}', '[/mom-sb]' );
QTags.addButton( 'yellow', '黄色提示框', '{mom-sn}', '[/mom-sn]' );
function my_quicktags() {
}
</script>
<?php
}
注意:⚠️第32-35行的大括号{}转换成[]
WordPress

Inpandora-免费WordPress软件下载主题

2020-8-9 13:48:01

WordPress

b2主题的一些DIY-评论回复可见隐藏内容

2020-8-10 18:32:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
搜索