WordPress短代码添加闪光按钮

 2017年06月21日 18:20  1,497  3  打印本文  
达令家

效果图:

蓝色闪光 红色闪光 橙色闪光 绿色闪光

将以下代码添加到style.css文件里:

  1. [class*=sgbtn]{display:inline-block;text-indent:0;position:relative;color:#fff;padding:0 10px 0 10px;min-width:160px;height:38px;line-height:38px;opacity:.8;text-align:center;font-family:Ubuntu,sans-serif;font-size:15px;text-decoration:none;border-radius:2px;overflow:hidden;-webkit-transition:all .15s ease-in;transition:all .15s ease-in}[class*=sgbtn]:before{content:'';position:absolute;background:#fff;width:25px;height:50px;top:0;left:-45px;opacity:.3;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}[class*=sgbtn]:hover{opacity:.65}[class*=sgbtn]:hover:before{width:45px;left:205px}.sgbtn_blue{background:#1cb2f5}.sgbtn_red{background:#C00}.sgbtn_orange{background:#F90}.sgbtn_lv{background:#096}a[class*=sgbtn]{color:#fff}a[class*=sgbtn]:hover{color:#fff}

将以下代码添加到functions.php里:

  1. /*添加蓝色闪光按钮*/
  2. function sg_blue($atts$content = null) {
  3.     extract(shortcode_atts(array(
  4.         "href" => 'http://'
  5.     ) , $atts));
  6.     return '<a class="sgbtn_blue" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
  7. }
  8. add_shortcode('sgbtn_blue', 'sg_blue');
  9. /*添加红色闪光按钮*/
  10. function sg_red($atts$content = null) {
  11.     extract(shortcode_atts(array(
  12.         "href" => 'http://'
  13.     ) , $atts));
  14.     return '<a class="sgbtn_red" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
  15. }
  16. add_shortcode('sgbtn_red', 'sg_red');
  17. /*添加橙色闪光按钮*/
  18. function sg_orange($atts$content = null) {
  19.     extract(shortcode_atts(array(
  20.         "href" => 'http://'
  21.     ) , $atts));
  22.     return '<a class="sgbtn_orange" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
  23. }
  24. add_shortcode('sgbtn_orange', 'sg_orange');
  25. /*添加绿色闪光按钮*/
  26. function sg_lv($atts$content = null) {
  27.     extract(shortcode_atts(array(
  28.         "href" => 'http://'
  29.     ) , $atts));
  30.     return '<a class="sgbtn_lv" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
  31. }
  32. add_shortcode('sgbtn_lv', 'sg_lv');

使用方法:

在文章编辑时插入以下代码即可,注意修改下括号

  1. {sgbtn_blue href='链接地址']链接标题[/sgbtn_blue}    /*蓝色闪光*/
  2. {sgbtn_red href='链接地址']链接标题[/sgbtn_red}    /*红色闪光*/
  3. {sgbtn_orange href='链接地址']链接标题[/sgbtn_orange}    /*橙色闪光*/
  4. {sgbtn_lv href='链接地址']链接标题[/sgbtn_lv}    /*绿色闪光*/

更多炫酷按钮点这里

相关推荐:

WordPress短代码给文章添加彩色美化框+按钮
[v_xuk]        看到很多博客都在用这个美化框,感觉不错,九哥也用上了,自己拓展了一下,增加了几个,并在后台文章文本编辑器添加了自定义快捷标签按钮。WP自带的摘要也太素了,而且看着感觉不清...
阅读全文

历史上的今天:

weinxin
99八十一微信公众号
扫一扫关注99八十一微信公众号,打开微信简简单单即可查看99八十一所有内容,更快捷更方便。
九哥

吐槽一下

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前吐槽:3   其中:访客  1   博主  1   引用   1

    • avatar voice站点 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信 【小白】

      括号怎么修改啊?

    • 来自外部的引用: 1

      • 瞎记些东西 – Zyl'Blog