自定义文章短代码

幻灯片 cyanprobe 9年前 (2014-11-29) 3792次浏览 已收录 1个评论

自定义文章短代码

自定义文章短代码

文章内容中经常出现特定css格式内容,一次次复制太过麻烦,不如使用短代码吧。

1.打开主题中的functions.php文件。如不存在此文件,创建一个。2.定义hello()函数,返回字符串

1
2
3
function hello() {
return ‘Hello, World!’;
}

3.使用add_shortcode()函数将你的hello()函数绑定为短代码,并命名为“hw”

1
add_shortcode(‘hw’, ‘hello’);

4.收工,测试。在你的文章中直接输入[hw]见证奇迹的出现。

当然,在实际写文章的时候你不会去弄个函数来输出个常量。比如我要实现上面的效果怎么办呢?首先你要一个图片。
然后更改上面的函数:

1
2
3
4
5
6
7
function hello($atts, $content=null, $code=“”) {
// 这里content参数便是你要写的文字。
$return = ‘<div class=”hello_short”>’;
$return .= $content;
$return .= ‘</div>’;
return $return;
}

当然还有应该有相应的CSS

1
2
3
4
5
6
.hello_short{margin:20px 0px;padding: 15px 15px 15px 70px; font-size:12px;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}
.hello_short a{}
.hello_short a:hover{}
.hello_short b,.hello_short strong{padding:0px; margin:0px;  background: none; font-weight: bold;border-radius:0px;-moz-border-radius:0px;}
.hello_short{background: url(images/shortcode/XXXX.png) no-repeat 20px 20px #fff0b5;border: 1px solid #eac946;color: #b09e56;}
.hello_short a{ color:#A84A1E;}

现在你在文章中输入
[hello]宫磊是条大黑狗[/hello]
就能实现

gls

这样的效果了。
你们学会了么? 来电进阶教程添加至function.php

[task]
 /*绿色提醒框*/ 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 '<a class="greenbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>'; } add_shortcode('gb' , 'toi' ); /*蓝色按钮*/ function toj($atts, $content=null) { extract(shortcode_atts(array("href" => 'http://'), $atts)); return '<a class="bluebtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>'; } add_shortcode('bb' , 'toj' ); /*黄色按钮*/ function tok($atts, $content=null) { extract(shortcode_atts(array("href" => 'http://'), $atts)); return '<a class="yellowbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>'; } 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');
 [/task]
 CSS样式代码添加进主题style.css文件,你也可以自己新建一个css文件,然后在需要用到的地方引用,比如我就是在single.php里面引用的。

 

<span class="com">/*通知框*/</span>
<span class="com">#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:</span>
<span class="lit">15px</span> <span class="lit">15px</span> <span class="lit">15px</span> <span class="lit">35px</span><span class="pun">;}</span>
<span class="com">#sc_pink {color: #131418;background: #ef4b86;border: 1px solid #cb2027;overflow:</span><span class="pln">
hidden</span><span class="pun">;</span><span class="pln">margin</span><span class="pun">:</span> <span class="lit">10px</span> <span class="lit">0</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span>
<span class="lit">15px</span> <span class="lit">15px</span> <span class="lit">15px</span> <span class="lit">35px</span><span class="pun">;}</span>
<span class="pun">.</span><span class="pln">sc_act</span><span class="pun">{</span><span class="pln">margin</span><span class="pun">:</span><span class="lit">10px</span> <span class="lit">0</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">10px</span> <span class="lit">15px</span><span class="pun">;</span><span class="pln">background</span><span class="pun">:</span><span class="com">#FFF;border:1px solid</span>
<span class="com">#E3E3E3;border-left:3px solid #3DABCE}</span>
<span class="pun">.</span><span class="pln">sc_act</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">{</span><span class="pln">background</span><span class="pun">:</span><span class="com">#fcfcfc;}</span>
<span class="com">/*!彩色按钮样式 */</span>
<span class="pun">.</span><span class="pln">greenbtn</span><span class="pun">{-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span> <span class="lit">10px</span> <span class="lit">14px</span> <span class="pun">-</span><span class="lit">7px</span> <span class="com">#3e7327;-webkit-box-shadow:0 10px</span>
<span class="lit">14px</span> <span class="pun">-</span><span class="lit">7px</span> <span class="com">#3e7327;box-shadow:0 10px 14px -7px</span>
<span class="com">#3e7327;background:-webkit-gradient(linear,left top,left</span><span class="pln">
bottom</span><span class="pun">,</span><span class="pln">color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0.05</span><span class="pun">,</span><span class="com">#77b55a),color-stop(1,#72b352));background:-moz-linear-gr</span><span class="pln">
adient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#77b55a 5%,#72b352</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#77b55a 5%,#72b352</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#77b55a 5%,#72b352</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#77b55a 5%,#72b352</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to bottom</span><span class="pun">,</span><span class="com">#77b55a 5%,#72b352</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#77b55a'</span><span class="pun">,</span><span class="pln">
endColorstr</span><span class="pun">=</span><span class="str">'#72b352'</span><span class="pun">,</span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#77b55a;-moz-border-radiu</span><span class="pln">
s</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">4px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid
</span><span class="com">#4b8f29;display:inline-block;cursor:pointer;color:#fff !important;</span>
<span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln">arial</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">13px</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln">bold</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">6px</span>
<span class="lit">12px</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span> <span class="lit">1px</span> <span class="lit">0</span>
<span class="com">#5b8a3c}.greenbtn:hover{background:-webkit-gradient(linear,left top,left</span><span class="pln">
bottom</span><span class="pun">,</span><span class="pln">color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0.05</span><span class="pun">,</span><span class="com">#72b352),color-stop(1,#77b55a));background:-moz-linear-gr</span><span class="pln">
adient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#72b352 5%,#77b55a</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#72b352 5%,#77b55a</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#72b352 5%,#77b55a</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#72b352 5%,#77b55a</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to bottom</span><span class="pun">,</span><span class="com">#72b352 5%,#77b55a</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#72b352'</span><span class="pun">,</span><span class="pln">
endColorstr</span><span class="pun">=</span><span class="str">'#77b55a'</span><span class="pun">,</span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#72b352;}.greenbtn:active{</span><span class="pln">
position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln">top</span><span class="pun">:</span><span class="lit">1px</span><span class="pun">;}</span>
<span class="pun">.</span><span class="pln">bluebtn</span><span class="pun">{-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln">inset </span><span class="lit">0</span> <span class="lit">1px</span> <span class="lit">0</span> <span class="lit">0</span> <span class="com">#54a3f7;-webkit-box-shadow:inset 0 1px</span>
<span class="lit">0</span> <span class="lit">0</span> <span class="com">#54a3f7;box-shadow:inset 0 1px 0 0</span>
<span class="com">#54a3f7;background:-webkit-gradient(linear,left top,left</span><span class="pln">
bottom</span><span class="pun">,</span><span class="pln">color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0.05</span><span class="pun">,</span><span class="com">#007dc1),color-stop(1,#0061a7));background:-moz-linear-gr</span><span class="pln">
adient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#007dc1 5%,#0061a7</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#007dc1 5%,#0061a7</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#007dc1 5%,#0061a7</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#007dc1 5%,#0061a7</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to bottom</span><span class="pun">,</span><span class="com">#007dc1 5%,#0061a7</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#007dc1'</span><span class="pun">,</span><span class="pln">
endColorstr</span><span class="pun">=</span><span class="str">'#0061a7'</span><span class="pun">,</span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#007dc1;-moz-border-radiu</span><span class="pln">
s</span><span class="pun">:</span><span class="lit">3px</span><span class="pun">;-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">3px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">3px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid
</span><span class="com">#124d77;display:inline-block;cursor:pointer;color:#fff !important;</span>
<span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln">arial</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">13px</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">6px</span>
<span class="lit">24px</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span> <span class="lit">1px</span> <span class="lit">0</span>
<span class="com">#154682}.bluebtn:hover{background:-webkit-gradient(linear,left top,left</span><span class="pln">
bottom</span><span class="pun">,</span><span class="pln">color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0.05</span><span class="pun">,</span><span class="com">#0061a7),color-stop(1,#007dc1));background:-moz-linear-gr</span><span class="pln">
adient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#0061a7 5%,#007dc1</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#0061a7 5%,#007dc1</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#0061a7 5%,#007dc1</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#0061a7 5%,#007dc1</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to bottom</span><span class="pun">,</span><span class="com">#0061a7 5%,#007dc1</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#0061a7'</span><span class="pun">,</span><span class="pln">
endColorstr</span><span class="pun">=</span><span class="str">'#007dc1'</span><span class="pun">,</span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#0061a7;}.bluebtn:active{p</span><span class="pln">
osition</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln">top</span><span class="pun">:</span><span class="lit">1px</span><span class="pun">;}</span>
<span class="pun">.</span><span class="pln">yellowbtn</span><span class="pun">{-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln">inset </span><span class="lit">0</span> <span class="lit">1px</span> <span class="lit">0</span> <span class="lit">0</span> <span class="com">#fff6af;-webkit-box-shadow:inset 0</span>
<span class="lit">1px</span> <span class="lit">0</span> <span class="lit">0</span> <span class="com">#fff6af;box-shadow:inset 0 1px 0 0</span>
<span class="com">#fff6af;background:-webkit-gradient(linear,left top,left</span><span class="pln">
bottom</span><span class="pun">,</span><span class="pln">color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0.05</span><span class="pun">,</span><span class="com">#ffec64),color-stop(1,#ffab23));background:-moz-linear-gr</span><span class="pln">
adient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffec64 5%,#ffab23</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffec64 5%,#ffab23</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffec64 5%,#ffab23</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffec64 5%,#ffab23</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to bottom</span><span class="pun">,</span><span class="com">#ffec64 5%,#ffab23</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#ffec64'</span><span class="pun">,</span><span class="pln">
endColorstr</span><span class="pun">=</span><span class="str">'#ffab23'</span><span class="pun">,</span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ffec64;-moz-border-radiu</span><span class="pln">
s</span><span class="pun">:</span><span class="lit">6px</span><span class="pun">;-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">6px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">6px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid
</span><span class="com">#fa2;display:inline-block;cursor:pointer;color:#333 !important;</span>
<span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln">arial</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln">bold</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">6px</span>
<span class="lit">24px</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span> <span class="lit">1px</span> <span class="lit">0</span>
<span class="com">#fe6}.yellowbtn:hover{background:-webkit-gradient(linear,left top,left</span><span class="pln">
bottom</span><span class="pun">,</span><span class="pln">color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0.05</span><span class="pun">,</span><span class="com">#ffab23),color-stop(1,#ffec64));background:-moz-linear-gr</span><span class="pln">
adient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffab23 5%,#ffec64</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffab23 5%,#ffec64</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffab23 5%,#ffec64</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="com">#ffab23 5%,#ffec64</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">background</span><span class="pun">:</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to bottom</span><span class="pun">,</span><span class="com">#ffab23 5%,#ffec64</span>
<span class="lit">100</span><span class="pun">%);</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#ffab23'</span><span class="pun">,</span><span class="pln">
endColorstr</span><span class="pun">=</span><span class="str">'#ffec64'</span><span class="pun">,</span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ffab23;}.yellowbtn:active</span>
<span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln">top</span><span class="pun">:</span><span class="lit">1px</span><span class="pun">;}
</span>

 短代码按钮编辑(注意请把本段代码中的所有<改成[,否则不能用)

<span class="com">//添加自定义编辑器按钮//</span>
<span class="kwd">function</span><span class="pln"> appthemes_add_quicktags</span><span class="pun">()</span> <span class="pun">{</span>
<span class="pun">?></span>
<span class="pun"><</span><span class="pln">script type</span><span class="pun">=“</span><span class="pln">text</span><span class="pun">/</span><span class="pln">javascript</span><span class="pun">”></span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="pun">‘</span><span class="pln">hr</span><span class="pun">’,</span> <span class="pun">‘</span><span class="pln">hr</span><span class="pun">’,</span> <span class="pun">‘</span><span class="pln">\n</span><span class="pun"><</span><span class="pln">hr </span><span class="pun">/></span><span class="pln">\n</span><span class="pun">’,</span> <span class="pun">”</span> <span class="pun">);</span> <span class="com">//添加分隔线</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="pun">‘</span><span class="pln">h1</span><span class="pun">′,</span> <span class="pun">‘</span><span class="pln">h1</span><span class="pun">′,</span> <span class="pun">‘</span><span class="pln">\n</span><span class="str"><h1></span><span class="pun">’,</span> <span class="pun">‘</</span><span class="pln">h1</span><span class="pun">></span><span class="pln">\n</span><span class="pun">’</span> <span class="pun">);</span> <span class="com">//快捷输入h1标签</span>
<span class="pun"></</span><span class="pln">script</span><span class="pun">></span>
<span class="pun"><?</span><span class="pln">php
</span><span class="pun">}</span><span class="pln">
add_action</span><span class="pun">(‘</span><span class="pln">admin_print_footer_scripts</span><span class="pun">’,</span> <span class="pun">‘</span><span class="pln">appthemes_add_quicktags</span><span class="pun">’</span> <span class="pun">);</span>
<span class="pun">?>
</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="pun">‘</span><span class="pln">hr</span><span class="pun">’,</span> <span class="pun">‘</span><span class="pln">hr</span><span class="pun">’,</span> <span class="pun">‘</span><span class="pln">\n</span><span class="pun"><</span><span class="pln">hr </span><span class="pun">/></span><span class="pln">\n</span><span class="pun">’,</span> <span class="pun">”</span> <span class="pun">);</span> <span class="com">//添加分隔线
上句一共有四对引号,分别是【按钮的ID】、【显示名称】、【点一下输入的内容】、【再点一下输入的内容】(此留空则一次输入全部内容)以上知识介绍主题目录一定有js文件直接添加即可
</span>
 <span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'ilinks'</span><span class="pun">,</span> <span class="str">'链接按钮'</span><span class="pun">,</span> <span class="str">"<dm href='']"</span><span class="pun">,</span> <span class="str">"[/dm]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'idownload'</span><span class="pun">,</span> <span class="str">'下载按钮'</span><span class="pun">,</span> <span class="str">"<dl href='']"</span><span class="pun">,</span> <span class="str">"[/dl]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'ikaiyuan'</span><span class="pun">,</span> <span class="str">'开源按钮'</span><span class="pun">,</span> <span class="str">"<gt href='']开源地址[/gt]"</span><span class="pun">,</span> <span class="str">""</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_notice'</span><span class="pun">,</span> <span class="str">'绿色通知框'</span><span class="pun">,</span> <span class="str">"<v_notice]"</span><span class="pun">,</span> <span class="str">"[/v_notice]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_error'</span><span class="pun">,</span> <span class="str">'红色警告框'</span><span class="pun">,</span> <span class="str">"<v_error]"</span><span class="pun">,</span> <span class="str">"[/v_error]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_warn'</span><span class="pun">,</span> <span class="str">'黄色错误框'</span><span class="pun">,</span> <span class="str">"<v_warn]"</span><span class="pun">,</span> <span class="str">"[/v_warn]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_tips'</span><span class="pun">,</span> <span class="str">'灰色提示框'</span><span class="pun">,</span> <span class="str">"<v_tips]"</span><span class="pun">,</span> <span class="str">"[/v_tips]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_blue'</span><span class="pun">,</span> <span class="str">'蓝色提示框'</span><span class="pun">,</span> <span class="str">"<v_blue]"</span><span class="pun">,</span> <span class="str">"[/v_blue]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_act'</span><span class="pun">,</span> <span class="str">'蓝边文本框'</span><span class="pun">,</span> <span class="str">"<v_act]"</span><span class="pun">,</span> <span class="str">"[/v_act]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_organge'</span><span class="pun">,</span> <span class="str">'橙色文本框'</span><span class="pun">,</span> <span class="str">"<v_organge]"</span><span class="pun">,</span> <span class="str">"[/v_organge]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_qing'</span><span class="pun">,</span> <span class="str">'青色文本框'</span><span class="pun">,</span> <span class="str">"<v_qing]"</span><span class="pun">,</span> <span class="str">"[/v_qing]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'v_pink'</span><span class="pun">,</span> <span class="str">'粉色文本框'</span><span class="pun">,</span> <span class="str">"<v_pink]"</span><span class="pun">,</span> <span class="str">"[/v_pink]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'gb'</span><span class="pun">,</span> <span class="str">'绿色按钮'</span><span class="pun">,</span> <span class="str">"<gb href='']"</span><span class="pun">,</span> <span class="str">"[/gb]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'bb'</span><span class="pun">,</span> <span class="str">'蓝色按钮'</span><span class="pun">,</span> <span class="str">"<bb href='']"</span><span class="pun">,</span> <span class="str">"[/bb]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'yb'</span><span class="pun">,</span> <span class="str">'黄色按钮'</span><span class="pun">,</span> <span class="str">"<yb href='']"</span><span class="pun">,</span> <span class="str">"[/yb]"</span> <span class="pun">);</span>
<span class="typ">QTags</span><span class="pun">.</span><span class="pln">addButton</span><span class="pun">(</span> <span class="str">'music'</span><span class="pun">,</span> <span class="str">'音乐按钮'</span><span class="pun">,</span> <span class="str">"<music]"</span><span class="pun">,</span> <span class="str">"[/music]"</span> <span class="pun">);</span>
<span class="com">在相应的主题js文件中添加,搜索主题addButton即可找到js文件。
<a href="https://blogcdn.cyantu.com/2014/11/d2ffdde12dc7f95.jpg"><img class="alignnone wp-image-741 size-full" src="https://blogcdn.cyantu.com/2014/11/d2ffdde12dc7f95.jpg" alt="xiaog" width="613" height="653" /></a>
</span>

素材图片

sc_blue sc_error sc_notice sc_tips sc_warn
 
自行下载吧。。。。
 


CyanProbe , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:自定义文章短代码
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 看不懂呀
    多努力网2015-03-30 09:35 回复