前言
今天折腾了一下博客,添加了几个比较酷炫一点的按钮,同时也给这些按钮弄上了短代码,这样在编辑文章的时候更方便的进行操作,更能够增强文章的色彩性。
还没有看见是什么样式的?看看以下的按钮就知道了(PS:鼠标经过会进行光线划过)
:

CSS代码
将以下代码添加到你的主题的
style.css
文件里面。/* * From:憧憬点滴记忆 * Url:https://licoy.cn/2006.html * Notice:转载请注明出处 */ [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}
PHP代码
将以下代码添加到主题的
functions.php
文件里面。/* * From:憧憬点滴记忆 * Url:https://licoy.cn/2006.html * Notice:转载请注明出处 */ /*添加蓝色闪光按钮*/ function sg_blue($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ) , $atts)); return '<a class="sgbtn_blue" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>'; } add_shortcode('sgbtn_blue', 'sg_blue'); /*添加红色闪光按钮*/ function sg_red($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ) , $atts)); return '<a class="sgbtn_red" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>'; } add_shortcode('sgbtn_red', 'sg_red'); /*添加橙色闪光按钮*/ function sg_orange($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ) , $atts)); return '<a class="sgbtn_orange" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>'; } add_shortcode('sgbtn_orange', 'sg_orange'); /*添加绿色闪光按钮*/ function sg_lv($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ) , $atts)); return '<a class="sgbtn_lv" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>'; } add_shortcode('sgbtn_lv', 'sg_lv');
使用方法
链接标题 /*蓝色闪光*/ 链接标题 /*红色闪光*/ 链接标题 /*橙色闪光*/ 链接标题 /*绿色闪光*/
后记
现在的网站越来越注重UI方面的设计了,这几天我一直都在纠结要不要更换主题或者是自己DIY主题呢,现在都是一个脑袋两个大了。

感谢分享,谢谢站长!!@绿软吧
@软件分享 不客气
@小安 要将函数以及css都要带上哦
鸟哥的主题还是不要换了!绝对是值得拥有的主题!短代码我也很喜欢,最近想研究一下如何集成到WordPress的编辑器上去!
@明月登楼的博客 集成到编辑器一个函数就OK。
« 1 2