wordpress折腾日记:为文章添加自定义按钮

作者:tianzhenwang     发布于「wordpress心得」 - 天真网

作者:tianzhenwang

年轻,无所畏惧!

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

摘要:wordpress折腾日记:为文章添加自定义按钮

预览

链接标题
链接标题
链接标题
链接标题

上边的按钮是不是很好看?

如果给文章添加一个这样的按钮,最起码可以增色不少吧?

最起码让人看着舒心!

方法

一、将以下代码放入主题的functions.php中
[cc]
/*添加蓝色闪光按钮*/
function sg_blue($atts, $content = null) { extract(shortcode_atts(array( “href” => ‘https://’ ) , $atts));
return ‘‘ . $content . ‘‘;}
add_shortcode(‘sgbtn_blue’, ‘sg_blue’);
/*添加红色闪光按钮*/
function sg_red($atts, $content = null) { extract(shortcode_atts(array( “href” => ‘https://’ ) , $atts));
return ‘‘ . $content . ‘‘;}
add_shortcode(‘sgbtn_red’, ‘sg_red’);
/*添加橙色闪光按钮*/
function sg_orange($atts, $content = null) { extract(shortcode_atts(array( “href” => ‘https://’ ) , $atts));
return ‘‘ . $content . ‘‘;}
add_shortcode(‘sgbtn_orange’, ‘sg_orange’);
/*添加绿色闪光按钮*/
function sg_lv($atts, $content = null) { extract(shortcode_atts(array( “href” => ‘https://’ ) , $atts));
return ‘‘ . $content . ‘‘;}
add_shortcode(‘sgbtn_lv’, ‘sg_lv’);[/cc]
二、再将下边的代码放入style.css中或者页面引入的css文件中
[cc]/*tzw520.cn*/
[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;text-decoration:none;}a[class*=sgbtn]:hover{color:#fff;text-decoration:none;}

[/cc]

调用方法

[cc][sgbtn_bl删ue href=’链接地址’]链接标题[/sgbtn_blue]
[sgbtn_r删ed href=’链接地址’]链接标题[/sgbtn_red]
[sgbtn_or删ange href=’链接地址’]链接标题[/sgbtn_orange]
[sgbtn_l删v href=’链接地址’]链接标题[/sgbtn_lv][/cc]

调用的时候,去除删字即可!
至于整合到编辑器中,还请自己查找方法!

分享到:
未经允许不得转载:

作者:tianzhenwang, 转载或复制请以 超链接形式 并注明出处 天真网
原文地址:《wordpress折腾日记:为文章添加自定义按钮》 发布于2019-03-23

评论 1

私密评论 8 + 9 =
  1. #1

    已经使用,谢谢博主

    叱咤风云4个月前 (08-02)回复
wordpress折腾日记:为文章添加自定义按钮

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

这绝对不是广告!

优惠券小程序,购物更省钱!

现在,网购已经成为了主流购物趋势,淘宝京东苏宁老牌电商,拼多多后起之秀。 但你知道其实90%的商品都有大额的优惠券么?

了解一下
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册