WordPress文章中添加彩色提示框可插入短代码

南山大王 3,997 1

[灯笼]七夕节倒计时[灯笼]

2019年七夕节时间：2019年8月7日 星期三 农历七月初七#(玫瑰)

#(太阳)距离2019年七夕节还有[aru_89]

给WordPress编辑器添加彩色提示框短代码教程来自网络，网上流行的短代码都需要切换到文本模式，第一操作不方便，第二视觉不美观，不吹牛了[aru_36]，看看再说吧

演示图

WordPress文章中添加彩色提示框可插入短代码

文章编辑器

WordPress文章中添加彩色提示框可插入短代码

上图中，我们看到，编辑器中多了一个“插入短代码”，点击之后，可以看到很多短代码快捷方式，操作简单。操作没有问题了，大家再看看我送给大家的短代码效果怎么样，如果觉得不美观，可以自行修改css样式。

第一步：下载js文件（shortcode.js）

js文件已为大家打包好，直接下载放入主题js文件夹里即可！ 点击下载

第二步：编辑短代码文件（shortcode.php）

温馨提示

把下面代码直接放到主题function.php中即可（第三步直接跳过）

如果不想或不知怎么添加代码，我这也提供了下载，如果是下载的，把shortcode.php文件直接放在主题根目录就行了，放好了文件就请看第三步
/*乐者博客 www.98qcw.cn*/
 
//注册按钮
function wd_add_mce_button() {  
// check user permissions   
 if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {  
        return;  
    }  
    if ( 'true' == get_user_option( 'rich_editing' ) ) {  
        add_filter( 'mce_external_plugins', 'wd_add_tinymce_plugin' );  
        add_filter( 'mce_buttons', 'wd_register_mce_button' );  
    }  
}  
add_action('admin_head', 'wd_add_mce_button');  
function wd_add_tinymce_plugin( $plugin_array ) {  
    $plugin_array['wd_mce_button'] = get_template_directory_uri() .'/js/shortcode.js';  
    return $plugin_array;  
}  
function wd_register_mce_button( $buttons ) {  
    array_push( $buttons, 'wd_mce_button' );  
    return $buttons;  
}
 
//解析短代码 
 
//为WordPress添加展开收缩功能
function scollapse($atts, $content = null) {
    extract(shortcode_atts(array( "title" => "" ) , $atts));
    return '<div style="margin: 0.5em 0;"><div class="sControl"><a href="javascript:void(0)" class="collapseButton xButton"><i class="fa fa-plus-square"></i> ' . $title . '</a><div style="clear: both;"></div></div><div class="sContent" style="display: none;">' . $content . '</div></div>';
}
add_shortcode('ncollapse', 'scollapse');
 
//为WordPress添加虚线标题框
function xbtkuang($atts, $content = null) {
    extract(shortcode_atts(array( "title" => "" ) , $atts));
    return '<div class="fieldset"> <tt>' . $title . '</tt><a>' . $content . '</a></div>';
}
add_shortcode('btkuang', 'xbtkuang');
 
 
/*短代码信息框 开始*/
 
/*绿色提醒框*/
function toa($atts, $content=null){
    return '<div id="sc_notice">'.$content.'</div>';
}
add_shortcode('v_notice','toa');
/*红色错误框*/
function tob($atts, $content=null){
    return '<div id="sc_error">'.$content.'</div>';
}
add_shortcode('v_error','tob');
/*黄色警告错误框*/
function toc($atts, $content=null){
    return '<div id="sc_warn">'.$content.'</div>';
}
add_shortcode('v_warn','toc');
/*蓝色计划框*/
function tod($atts, $content=null){
    return '<div id="sc_tips">'.$content.'</div>';
}
add_shortcode('v_tips','tod');
/*灰色问题框*/
function toe($atts, $content=null){
    return '<div id="sc_question">'.$content.'</div>';
}
add_shortcode('v_question','toe');
/*橘色虚线框*/
function tof($atts, $content=null){
    return '<div id="sc_xuk">'.$content.'</div>';
}
add_shortcode('v_xuk','tof');
/*绿边提示框*/
function tog($atts, $content=null){
    return '<div id="sc_lvb">'.$content.'</div>';
}
add_shortcode('v_lvb','tog');
/*红边提示框*/
function toh($atts, $content=null){
    return '<div id="sc_redb">'.$content.'</div>';
}
add_shortcode('v_redb','toh');
/*蓝边提示框*/
function toi($atts, $content=null){
    return '<div id="sc_lanb">'.$content.'</div>';
}
add_shortcode('v_lanb','toi');
/* 短代码信息框 完毕*/
 
/*添加音乐按钮*/
function tol($atts, $content = null) {
    return '<audio style="width:100%;max-height:40px;" src="' . $content . '" controls preload loop>您的浏览器不支持HTML5的 audio 标签，无法为您播放！</audio>';
}
add_shortcode('music', 'tol');
 
/*添加视频按钮*/
function too($atts, $content = null) {
    return '<video style="width:100%;" src="' . $content . '" controls preload >您的浏览器不支持HTML5的 video 标签，无法为您播放！</video>';
}
add_shortcode('video', 'too');
 
//简单的下载面板
function xdltable($atts, $content = null) {
    extract(shortcode_atts(array("file" => "","size" => "","git" => "" ) , $atts));
    return '<table class="dltable"><tbody><tr><td style="background-color:#F9F9F9;" rowspan="3"><dd>文件下载</dd></td><td><i class="fa fa-list-alt"></i>&nbsp;&nbsp;文件名称：' . $file . '</td><td><i class="fa fa-th-large"></i>&nbsp;&nbsp;文件大小：' . $size . '</td></tr><tr><td colspan="2"><i class="fa fa-volume-up"></i>&nbsp;&nbsp;下载声明：'. $git .'</td></tr><tr><td colspan="2"><i class="fa fa-download"></i>&nbsp;&nbsp;下载地址：' . $content . '</td></tr></tbody></table>';
}
add_shortcode('dltable', 'xdltable');
 
 
//使用短代码添加回复后可见内容开始
function reply_to_read($atts, $content = null) {
    extract(shortcode_atts(array(
        "notice" => '<div id="sc_warningbox">注意：本段内容须成功“<a href="' . get_permalink() . '#respond" title="回复本文">回复本文</a>”后“<a href="javascript:window.location.reload();" title="刷新本页">刷新本页</a>”方可查看！</div>'
    ) , $atts));
    $email = null;
    $user_ID = (int)wp_get_current_user()->ID;
    if ($user_ID > 0) {
        $email = get_userdata($user_ID)->user_email;
        //对博主直接显示内容
        $admin_email = get_bloginfo('admin_email');
        if ($email == $admin_email) {
            return $content;
        }
    } else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {
        $email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);
    } else {
        return $notice;
    }
    if (empty($email)) {
        return $notice;
    }
    global $wpdb;
    $post_id = get_the_ID();
    $query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";
    if ($wpdb->get_results($query)) {
        return do_shortcode($content);
    } else {
        return $notice;
    }
}
add_shortcode('reply', 'reply_to_read');

第三步：引用短代码文件

在主题的function.php文件中，添加一段代码

// 调用 shortcode
require get_stylesheet_directory() . '/shortcode.php';

第四步：美化样式和下载图片

把下载的5个小图片，放到主题的img文件夹下，然后在主题的css里添加下列代码（因主题不一样，请根据情况自行修改css里图片路径）

/*短代码*/
#sc_notice{color:#fff;background:#13c330 url(../img/sc_notice.png) -1px -1px no-repeat;border:1px solid #13c330;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px}
#sc_error{color:#fff;background:#ef0f0f url(../img/sc_error.png) -1px -1px no-repeat;border:1px solid #ef0f0f;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px}
#sc_warn{color:#000;background:#f5f813 url(../img/sc_warn.png) -1px -1px no-repeat;border:1px solid #f5f813;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px}
#sc_tips{color:#fff;background:#45b6f7 url(../img/sc_tips.png) -1px -1px no-repeat;border:1px solid #45b6f7;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px}
#sc_question{color:#000;background:#eaeaea url(../img/sc_question.png) -1px -1px no-repeat;border:1px solid #eaeaea;overflow:hidden;margin:10px 0;padding:15px 15px 15px 35px}
#sc_xuk{border: 2px dashed #ff5300;background:#fff;margin: 10px 0;padding: 15px 15px 15px 35px;}
#sc_lvb {margin: 10px 0;padding: 10px 15px;border: 1px solid #e3e3e3;border-left: 5px solid #13c330;background: #FFF;}
#sc_redb {margin: 10px 0;padding: 10px 15px;border: 1px solid #e3e3e3;border-left: 5px solid #ef0f0f;background: #FFF;}
#sc_lanb {margin: 10px 0;padding: 10px 15px;border: 1px solid #e3e3e3;border-left: 5px solid #45b6f7;background: #FFF;}

#sc_warningbox{border: 0;padding: 12px 8px; margin: 15px 0;text-align: center;overflow: hidden;background-color: #fffbf0;border-color: #f7ba2a;color: #fbb91e;border-style: solid;border-left-width: 3px;}
.dltable dd{margin:.001em .001em;width:1px;line-height:30px;}
#bdcs-search-inline{width:100%}
#bdcs-search-form-submit{width:33%}
.dltable a{padding:0 1em 0 0}
.fieldset{padding: 18px 15px;border: 1px dashed #999;}
.fieldset tt{padding:0 5px;margin-top:-32px;position:absolute;background:#fff;font-size:16px;font-family:microsoft yahei;font-weight:bold}
.fieldset a{position:relative;text-decoration: none;color:#999 !important}

好了，至此整个教程也就结束了，刷新下文章页面，是不是已经显示了呢，如果有什么问题，欢迎在下方评论区留言#(勉强)

最新修复bug：

有用户反映隐藏收缩功能没有用，是我忘记添加一段代码了，把下面代码加入footer.php文件</body>之前即可

<!---代码点击显示隐藏功能--->
<script type="text/javascript">
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.sContent').slideToggle('slow');
});
});
</script>
红包

本文作者为南山大王，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 电脑网赚
    电脑网赚 Lv 3

    博主是一个高手啊

    沙发 2019-04-10 09:27 回复
分享
微信
微博
QQ