avatar
A-A+
摘要:

这几天在研究wordpress短代码的功能,做了几个在自己的blog中,都是初级应用,供自己学习,也一并分享,感谢前辈们的贡献,真的,没有你们无私的分享精神,IT不会进步这么快,我也没法学习到这些。

这几天在研究wordpress短代码的功能,做了几个在自己的blog中,都是初级应用,供自己学习,也一并分享,感谢前辈们的贡献,真的,没有你们无私的分享精神,IT不会进步这么快,我也没法学习到这些:
下面代码都是添加到主题的functions.php中。

一、优酷去广告
//优酷短代码
function youku_video($atts, $content=null){   
    return '<p style="text-align: center;"><embed src=http://static.youku.com/v1.0.0149/v/swf/qplayer_rtmp.swf?VideoIDS='.$content.'ID&winType=adshow&isAutoPlay=true" quality="high" width="610" height="460" align="middle" wmode="transparent" allowScriptAccess="never" allowNetworking="internal" autostart="0" type="application/x-shockwave-flash"/></p>';   
}
add_shortcode('youku','youku_video');  
{youku]XNTIxMDE3MzEy[/youku}
//将{和}替换成[和]

就是优酷地址中:http://v.youku.com/v_show/id_XNTIxMDE3MzEy.html,id_后面的这段代码:XNTIxMDE3MzEy,效果如下:

二、显示警告
//warning短代码
function warning($atts, $content=null, $code="") {
    $return = '<div class="warning_short">';
    $return .= $content;
    $return .= '</div>';
    return $return;
}
add_shortcode('wr', 'warning');
{wr]黄绮珊的The power of Love[/wr}
//将{和}替换成[和]

看如下效果:

黄绮珊的The power of Love

记得添加style.css如下代码:

.warning_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;}
.warning_short a{}
.warning_short a:hover{}
.warning_short b,.warning_short strong{padding:0px; margin:0px;  background: none; font-weight: bold;border-radius:0px;-moz-border-radius:0px;}
.warning_short{background: url("images/warning.png") no-repeat 15px 15px #fff0b5;border: 1px solid #eac946;color: #b09e56;}
.warning_short a{ color:#A84A1E;}
三、Download下载效果代码
function download($atts, $content=null) {
return '';
}
add_shortcode('dl','download'); 

应用方式是:

{dl]链接URL[/dl}
//将{和}替换成[和]

案例:黑夜传说4的下载:


记得添加style.css如下代码:

.vv_demo{width:200px;background-color: #3d3d3d; display: inline-block;padding:12px 25px 12px 25px;-moz-border-radius:6px; -webkit-border-radius: 10px;border-radius:10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); text-shadow: 1px 1px 1px rgba(0,0,0,0.25);background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,0.4)),to(rgba(59,59,59,1)));background: -moz-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));background: -ms-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));background: -o-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));border:1px solid #9e9e9e;text-decoration:none;
}
 .vv_demo span{font-family:"Verdana";font-size:22px;line-height:32px; float:right; padding-left:8px;text-shadow: 0 1px #333; color:#f8f8f8;}
 .vv_demo:hover{background-color:#5c5c5c;background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,1)),to(rgba(59,59,59,0.4)));background: -moz-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));background: -ms-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));background: -o-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));text-decoration:none;border:1px solid #777;}
.vv_demo:active {background: #4a4a4a;}
.v_demo{text-align: center; margin:10px 0 10px 0}
.v_demo a:hover{text-decoration:none;}

文件下载

  • 本文为原创文章,版权归 金励君   博客所有,转载引用请注明以下信息:
  • 本文作者:
  • 本文标题: 短代码功能测试
  • 本文地址: http://www.jinlijun.com/test-shortcode.html +复制链接
  • 本文标签:

4 条留言  访客:2 条  博主:2 条

  1. avatar
    板凳
    悦享人   

    博主的博客很多时髦的内容在里面,学习下
    有空也上些短代码

    2013/03/25 14:13 回复
    • avatar
      Kin   

      惭愧,其实原本我一直认为wordpress只是一个写博客的工具,并不知道有那么多需要学习的东西和那么多牛人,我平常常去看大前端、T.tt等博客,受益良多,推荐一下!

      2013/03/26 13:39 回复
  2. avatar
    沙发
    豆浆机   

    研究代码好辛苦的哦 :smile:

    2013/03/19 11:40 回复
    • avatar
      Kin   

      研究下试试,你就会知道了,哈哈!

      2013/03/19 21:21 回复

发表评论

(教你设置自己的个性头像)

疑问? 吃西瓜。 生闷气! 偷看。 Hi OK 吃惊。 飞吻! 不要啊! 膜拜! 泡泡糖。 抛钱。 献花。 抓狂! 纠结! 不理你。 抛媚眼。 调皮。 恭喜! 忍! 委屈。 吃饭。

快捷键:Ctrl+Enter