[灯笼]七夕节倒计时[灯笼]
2019年七夕节时间:2019年8月7日 星期三 农历七月初七#(玫瑰)
#(太阳)距离2019年七夕节还有[aru_89]
给WordPress编辑器添加彩色提示框短代码教程来自网络,网上流行的短代码都需要切换到文本模式,第一操作不方便,第二视觉不美观,不吹牛了[aru_36],看看再说吧
演示图

文章编辑器

上图中,我们看到,编辑器中多了一个“插入短代码”,点击之后,可以看到很多短代码快捷方式,操作简单。操作没有问题了,大家再看看我送给大家的短代码效果怎么样,如果觉得不美观,可以自行修改css样式。
第一步:下载js文件(shortcode.js)
js文件已为大家打包好,直接下载放入主题js文件夹里即可! 点击下载
第二步:编辑短代码文件(shortcode.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> 文件名称:' . $file . '</td><td><i class="fa fa-th-large"></i> 文件大小:' . $size . '</td></tr><tr><td colspan="2"><i class="fa fa-volume-up"></i> 下载声明:'. $git .'</td></tr><tr><td colspan="2"><i class="fa fa-download"></i> 下载地址:' . $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>
红包
本文作者为南山大王,转载请注明。
2019年七夕节时间:2019年8月7日 星期三 农历七月初七#(玫瑰)
#(太阳)距离2019年七夕节还有[aru_89]
给WordPress编辑器添加彩色提示框短代码教程来自网络,网上流行的短代码都需要切换到文本模式,第一操作不方便,第二视觉不美观,不吹牛了[aru_36],看看再说吧
演示图

文章编辑器

上图中,我们看到,编辑器中多了一个“插入短代码”,点击之后,可以看到很多短代码快捷方式,操作简单。操作没有问题了,大家再看看我送给大家的短代码效果怎么样,如果觉得不美观,可以自行修改css样式。
第一步:下载js文件(shortcode.js)
js文件已为大家打包好,直接下载放入主题js文件夹里即可! 点击下载
第二步:编辑短代码文件(shortcode.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> 文件名称:' . $file . '</td><td><i class="fa fa-th-large"></i> 文件大小:' . $size . '</td></tr><tr><td colspan="2"><i class="fa fa-volume-up"></i> 下载声明:'. $git .'</td></tr><tr><td colspan="2"><i class="fa fa-download"></i> 下载地址:' . $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>
红包
本文作者为南山大王,转载请注明。
#(太阳)距离2019年七夕节还有[aru_89]
给WordPress编辑器添加彩色提示框短代码教程来自网络,网上流行的短代码都需要切换到文本模式,第一操作不方便,第二视觉不美观,不吹牛了[aru_36],看看再说吧
演示图

文章编辑器

上图中,我们看到,编辑器中多了一个“插入短代码”,点击之后,可以看到很多短代码快捷方式,操作简单。操作没有问题了,大家再看看我送给大家的短代码效果怎么样,如果觉得不美观,可以自行修改css样式。
第一步:下载js文件(shortcode.js)
js文件已为大家打包好,直接下载放入主题js文件夹里即可! 点击下载
第二步:编辑短代码文件(shortcode.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> 文件名称:' . $file . '</td><td><i class="fa fa-th-large"></i> 文件大小:' . $size . '</td></tr><tr><td colspan="2"><i class="fa fa-volume-up"></i> 下载声明:'. $git .'</td></tr><tr><td colspan="2"><i class="fa fa-download"></i> 下载地址:' . $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>
红包
本文作者为南山大王,转载请注明。
给WordPress编辑器添加彩色提示框短代码教程来自网络,网上流行的短代码都需要切换到文本模式,第一操作不方便,第二视觉不美观,不吹牛了[aru_36],看看再说吧
演示图
文章编辑器
上图中,我们看到,编辑器中多了一个“插入短代码”,点击之后,可以看到很多短代码快捷方式,操作简单。操作没有问题了,大家再看看我送给大家的短代码效果怎么样,如果觉得不美观,可以自行修改css样式。
第一步:下载js文件(shortcode.js)
js文件已为大家打包好,直接下载放入主题js文件夹里即可! 点击下载
第二步:编辑短代码文件(shortcode.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> 文件名称:' . $file . '</td><td><i class="fa fa-th-large"></i> 文件大小:' . $size . '</td></tr><tr><td colspan="2"><i class="fa fa-volume-up"></i> 下载声明:'. $git .'</td></tr><tr><td colspan="2"><i class="fa fa-download"></i> 下载地址:' . $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>红包

本文作者为南山大王,转载请注明。
博主是一个高手啊