• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

本网站使用的WordPress短代码,彩色按钮方案

WordPress 云落 3年前 (2014-10-08) 1794次浏览 已收录 12个评论
文章目录[隐藏]

使用短代码(shortcode)功能,为文章添加更多精彩

本网站使用的 WordPress 短代码,彩色按钮方案

前言

目前本网站采用的主题是欲思主题,但是主题本身并没有短代码方案,不过好在 WordPress 可以自己扩展功能,今天云落给朋友们推荐个简单的方案,其实是早就想写的,没啥时间

函数代码

以下代码全部添加进 function.php,怎么添加都知道吧

/*绿色提醒框*/
function toz($atts, $content=null){
    return '<div id="sc_notice">'.$content.'</div>';
}
add_shortcode('v_notice','toz');
/*红色提醒框*/
function toa($atts, $content=null){
    return '<div id="sc_error">'.$content.'</div>';
}
add_shortcode('v_error','toa');
/*黄色提醒框*/
function toc($atts, $content=null){
    return '<div id="sc_warn">'.$content.'</div>';
}
add_shortcode('v_warn','toc');
/*灰色提醒框*/
function tob($atts, $content=null){
    return '<div id="sc_tips">'.$content.'</div>';
}
add_shortcode('v_tips','tob');
/*蓝色提醒框*/
function tod($atts, $content=null){
    return '<div id="sc_blue">'.$content.'</div>';
}
add_shortcode('v_blue','tod');
/*蓝边文本框*/
function toe($atts, $content=null){
    return '<div  class="sc_act">'.$content.'</div>';
}
add_shortcode('v_act','toe');
/*橙色文本框*/
function tof($atts, $content=null){
    return '<div id="sc_organge">'.$content.'</div>';
}
add_shortcode('v_organge','tof');
/*青色文本框*/
function tog($atts, $content=null){
    return '<div id="sc_qing">'.$content.'</div>';
}
add_shortcode('v_qing','tog');
/*粉色文本框*/
function toh($atts, $content=null){
    return '<div id="sc_pink">'.$content.'</div>';
}
add_shortcode('v_pink','toh');
/*绿色按钮*/
function toi($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
	return ''.$content.'';
}
add_shortcode('gb' , 'toi' );
/*蓝色按钮*/
function toj($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
	return ''.$content.'';
}
add_shortcode('bb' , 'toj' );
/*黄色按钮*/
function tok($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
	return ''.$content.'';
}
add_shortcode('yb' , 'tok' );
/*添加音乐按钮*/
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');

样式代码

CSS 样式代码添加进主题 style.css 文件,你也可以自己新建一个 css 文件,然后在需要用到的地方引用,比如我就是在 single.php 里面引用的

 /*通知框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; }#sc_warn { color: #ad9948; background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; }#sc_error { color: #c66; background: #ffecea url('img/sc_error.png') -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; }#sc_tips {color: #777;background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat;border: 1px solid #ccc;overflow: hidden;margin: 10px 0;padding: 15px 15px 15px 35px;}#sc_blue {color: #4D99D2;background: #dbe7f8 url('img/sc_blue.png') -1px -1px no-repeat;border: 1px solid #b7d2f2;overflow: hidden;margin: 10px 0;padding: 15px 15px 15px 35px;}#sc_organge {color:#1c2b49;background: #ffbc06;border: 1px solid #e9ac1a;overflow: hidden;margin: 10px 0;padding: 15px 15px 15px 35px;} #sc_qing {color: #131418;background: #009856;border: 1px solid #1065e6;overflow: hidden;margin: 10px 0;padding:
15px 15px 15px 35px;}
#sc_pink {color: #131418;background: #ef4b86;border: 1px solid #cb2027;overflow:
hidden;margin: 10px 0;padding:
15px 15px 15px 35px;}
.sc_act{margin:10px 0;padding:10px 15px;background:#FFF;border:1px solid
#E3E3E3;border-left:3px solid #3DABCE}
.sc_act:hover{background:#fcfcfc;}
/*!彩色按钮样式 */
.greenbtn{-moz-box-shadow:0 10px 14px -7px #3e7327;-webkit-box-shadow:0 10px
14px -7px #3e7327;box-shadow:0 10px 14px -7px
#3e7327;background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#77b55a),color-stop(1,#72b352));background:-moz-linear-gr
adient(top,#77b55a 5%,#72b352
100%);background:-webkit-linear-gradient(top,#77b55a 5%,#72b352
100%);background:-o-linear-gradient(top,#77b55a 5%,#72b352
100%);background:-ms-linear-gradient(top,#77b55a 5%,#72b352
100%);background:linear-gradient(to bottom,#77b55a 5%,#72b352
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a',
endColorstr='#72b352',GradientType=0);background-color:#77b55a;-moz-border-radiu
s:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid
#4b8f29;display:inline-block;cursor:pointer;color:#fff !important;
;font-family:arial;font-size:13px;font-weight:bold;padding:6px
12px;text-decoration:none;text-shadow:0 1px 0
#5b8a3c}.greenbtn:hover{background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#72b352),color-stop(1,#77b55a));background:-moz-linear-gr
adient(top,#72b352 5%,#77b55a
100%);background:-webkit-linear-gradient(top,#72b352 5%,#77b55a
100%);background:-o-linear-gradient(top,#72b352 5%,#77b55a
100%);background:-ms-linear-gradient(top,#72b352 5%,#77b55a
100%);background:linear-gradient(to bottom,#72b352 5%,#77b55a
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352',
endColorstr='#77b55a',GradientType=0);background-color:#72b352;}.greenbtn:active{
position:relative;top:1px;}
.bluebtn{-moz-box-shadow:inset 0 1px 0 0 #54a3f7;-webkit-box-shadow:inset 0 1px
0 0 #54a3f7;box-shadow:inset 0 1px 0 0
#54a3f7;background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#007dc1),color-stop(1,#0061a7));background:-moz-linear-gr
adient(top,#007dc1 5%,#0061a7
100%);background:-webkit-linear-gradient(top,#007dc1 5%,#0061a7
100%);background:-o-linear-gradient(top,#007dc1 5%,#0061a7
100%);background:-ms-linear-gradient(top,#007dc1 5%,#0061a7
100%);background:linear-gradient(to bottom,#007dc1 5%,#0061a7
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1',
endColorstr='#0061a7',GradientType=0);background-color:#007dc1;-moz-border-radiu
s:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid
#124d77;display:inline-block;cursor:pointer;color:#fff !important;
;font-family:arial;font-size:13px;padding:6px
24px;text-decoration:none;text-shadow:0 1px 0
#154682}.bluebtn:hover{background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#0061a7),color-stop(1,#007dc1));background:-moz-linear-gr
adient(top,#0061a7 5%,#007dc1
100%);background:-webkit-linear-gradient(top,#0061a7 5%,#007dc1
100%);background:-o-linear-gradient(top,#0061a7 5%,#007dc1
100%);background:-ms-linear-gradient(top,#0061a7 5%,#007dc1
100%);background:linear-gradient(to bottom,#0061a7 5%,#007dc1
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7',
endColorstr='#007dc1',GradientType=0);background-color:#0061a7;}.bluebtn:active{p
osition:relative;top:1px;}
.yellowbtn{-moz-box-shadow:inset 0 1px 0 0 #fff6af;-webkit-box-shadow:inset 0
1px 0 0 #fff6af;box-shadow:inset 0 1px 0 0
#fff6af;background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#ffec64),color-stop(1,#ffab23));background:-moz-linear-gr
adient(top,#ffec64 5%,#ffab23
100%);background:-webkit-linear-gradient(top,#ffec64 5%,#ffab23
100%);background:-o-linear-gradient(top,#ffec64 5%,#ffab23
100%);background:-ms-linear-gradient(top,#ffec64 5%,#ffab23
100%);background:linear-gradient(to bottom,#ffec64 5%,#ffab23
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',
endColorstr='#ffab23',GradientType=0);background-color:#ffec64;-moz-border-radiu
s:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid
#fa2;display:inline-block;cursor:pointer;color:#333 !important;
;font-family:arial;font-size:15px;font-weight:bold;padding:6px
24px;text-decoration:none;text-shadow:0 1px 0
#fe6}.yellowbtn:hover{background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#ffab23),color-stop(1,#ffec64));background:-moz-linear-gr
adient(top,#ffab23 5%,#ffec64
100%);background:-webkit-linear-gradient(top,#ffab23 5%,#ffec64
100%);background:-o-linear-gradient(top,#ffab23 5%,#ffec64
100%);background:-ms-linear-gradient(top,#ffab23 5%,#ffec64
100%);background:linear-gradient(to bottom,#ffab23 5%,#ffec64
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',
endColorstr='#ffec64',GradientType=0);background-color:#ffab23;}.yellowbtn:active
{position:relative;top:1px;}

添加进编辑器

请将本段代码中的所有<改成[,否则不能用[/v_error] 欲思主题的话在js/my-quicktags.js添加一下代码

 QTags.addButton( 'ilinks', '链接按钮', "<dm href='']", "[/dm]" );
QTags.addButton( 'idownload', '下载按钮', "<dl href='']", "[/dl]" );
QTags.addButton( 'ikaiyuan', '开源按钮', "<gt href='']开源地址[/gt]", "" );
QTags.addButton( 'v_notice', '绿色通知框', "<v_notice]", "[/v_notice]" );
QTags.addButton( 'v_error', '红色警告框', "<v_error]", "
" ); QTags.addButton( 'v_warn', '黄色错误框', "<v_warn]", "[/v_warn]" ); QTags.addButton( 'v_tips', '灰色提示框', "<v_tips]", "[/v_tips]" ); QTags.addButton( 'v_blue', '蓝色提示框', "<v_blue]", "[/v_blue]" ); QTags.addButton( 'v_act', '蓝边文本框', "<v_act]", "[/v_act]" ); QTags.addButton( 'v_organge', '橙色文本框', "<v_organge]", "[/v_organge]" ); QTags.addButton( 'v_qing', '青色文本框', "<v_qing]", "[/v_qing]" ); QTags.addButton( 'v_pink', '粉色文本框', "<v_pink]", "[/v_pink]" ); QTags.addButton( 'gb', '绿色按钮', "<gb href='']", "[/gb]" ); QTags.addButton( 'bb', '蓝色按钮', "<bb href='']", "[/bb]" ); QTags.addButton( 'yb', '黄色按钮', "<yb href='']", "[/yb]" ); QTags.addButton( 'music', '音乐按钮', "<music]", "[/music]" );

其他主题的其实也差不多

为你的 WordPress 编辑器添加更多按钮

实际效果

这是一个淡绿色的提示框
这是一个红色的错误提示框
这是一个黄色的警告提示框
这是一个低调的灰色提示框
这是一个高调的蓝色提示框
这是一个带有蓝色边边的文本框

这是一个充满活力的橙色文本框
这是一个充满生机的青色文本框

[v_pink]这是一个羞涩的品红色文本框[/v_pink]我是一个绿色按钮

我是一个蓝色按钮 我是一个黄色按钮

图片素材

本网站使用的 WordPress 短代码,彩色按钮方案
本网站使用的 WordPress 短代码,彩色按钮方案
本网站使用的 WordPress 短代码,彩色按钮方案
本网站使用的 WordPress 短代码,彩色按钮方案
本网站使用的 WordPress 短代码,彩色按钮方案
图片放在主题的 img 目录下,没有的话可以自己新建一个,如果不想新建新目录的话,自己在 CSS 里面修改路径

后语

么么,提示框样式来自cuelog的 WPgo 主题,部分代码从微范那里拿的,按钮部分样式是用工具做的,反正凑合凑合也差不多了

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:本网站使用的 WordPress 短代码,彩色按钮方案
喜欢 (15)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 添加不成功,按钮不显示
    爱看吧2017-08-03 21:02 回复 Windows 8.1 | Chrome 50.0.2661.102
    • 云落
      自己检查,不要用可视化编辑器
      云落2017-08-04 21:25 回复 Linux | Chrome 51.0.2704.106
  2. 真不错,挺喜欢的。
    执念旅行2014-11-29 12:04 回复 Linux | Safari浏览器 534.30
  3. 请问怎么在文章页引用css表啊?
    fangker2014-11-29 11:44 回复 Windows 7 | Chrome 35.0.1916.114
    • 云落
      直接在文章里面引用就可以了
      云落2014-11-29 12:17 回复 Windows 8.1 | Firefox浏览器 31.0
  4. 为什么我按照这个设置之后 仍然没有效果呢。(用的欲思主题)
    小飞2014-11-23 19:09 回复 Windows 8.1 | Maxthon 浏览器4.4.1.5000
    • 云落
      有一个叫缓存的东东
      云落2014-11-23 20:23 回复 Android 4.4.4 | WordPress客户端 android
  5. 希望云落能够在这个里面详细地 :grin:
    李子木2014-11-22 16:12 回复 Windows 8.1 | 搜狗浏览器 2.X
    • 云落
      我觉得已经够详细了,但是我会继续添加的
      云落2014-11-22 19:31 回复 Windows 8.1 | Firefox浏览器 31.0
  6. 为什么我按照这个设置之后 仍然没有效果呢
    WP2014-11-15 15:48 回复 Windows 7 | Chrome 37.0.2062.124
  7. 话说云落不带这样的
    微风里的红叶2014-10-09 23:07 回复 Windows 8.1 | Chrome 31.0.1650.63