网页|代码

纯代码实现侧边栏显示社交按钮组

其实想要实现这个功能也是挺简单的,有两种办法。

Social button

方法1:

纯html代码实现(优点:添加很简单,只需把html代码粘贴到小工具中的文本中即可。缺点:更改相对麻烦)把下面内容改成自己的。

1
<div class="textwidget"><a class="tweibo" style="padding-left: 12px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=你的QQ号码&amp;site=qq&amp;menu=yes" target="_blank" rel="external nofollow"><i class="fa fa-qq"></i> 在线服务</a> <a class="tweibo" style="padding-left: 12px;" href="http://weibo.com/你的围脖" target="_blank" rel="external nofollow"><i class="fa fa-weibo"></i> 微博</a> <a class="tweibo" style="padding-left: 12px;" href="http://t.qq.com/你的企鹅围脖" target="_blank" rel="external nofollow"><i class="fa fa-tencent-weibo"></i> 腾讯微博</a> <a class="rss" style="padding-left: 12px;" href="https://laod.cn/go?url=http://laid.cn/s/你的网址" target="_blank"><i class="fa fa-paw"></i> 百度口碑</a></div>

方法2:

通过funtions增加自定义用户资料,然后通过函数调用。

先加代码到当前主题文件夹下的funtions.php中
代码如下:
//自定义用户资料

1
2
3
4
5
6
7
add_filter( 'user_contactmethods', 'yeziting_add_contact_fields' );
function yeziting_add_contact_fields( $contactmethods ) {
$contactmethods['qq'] = 'QQ';
$contactmethods['qq_weibo'] = '腾讯微博';
$contactmethods['sina_weibo'] = '新浪微博';
$contactmethods['donate'] = '百度口碑';
}

然后再加代码到sidebar.php文件中。代码如下。(修改的话直接进后台的个人资料中填写。QQ直接写QQ号即可。微博写如叶子的http://weibo.com/你的围脖地址
腾讯微博同样如此,百度口碑写自己的网址即可如laod.cn

1
2
<div class="textwidget"><a class="tweibo" style="padding-left: 12px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=&lt;?php the_author_meta( 'qq' );?&gt;&amp;site=qq&amp;menu=yes" target="_blank" rel="external nofollow"><i class="fa fa-qq"></i> QQ交谈</a> <a class="tweibo" style="padding-left: 12px;" href="&quot;http://weibo.com/&lt;?php">"
target="
_blank" rel="external nofollow"&gt;<i class="fa fa-weibo"></i> 微博</a> <a class="tweibo" style="padding-left: 12px;" href="http://t.qq.com/&lt;?php the_author_meta( 'qq_weibo' );?&gt;" target="_blank" rel="external nofollow"><i class="fa fa-tencent-weibo"></i> 腾讯微博</a> style="padding-left: 12px;" href="http://koubei.baidu.com/s/<!--?php the_author_meta( 'donate' );?-->" target="_blank"&gt;<i class="fa fa-paw"></i> 百度口碑</div>

CSS代码:

最后,记得把css写下,无论选的是方法1还是方法2都得写

1
2
3
4
5
6
7
8
9
10
.textwidget {
padding: 15px;
color: #777;
}
.textwidget a {
color: #777;
}
.textwidget a:hover {
color: #45B6F7;
}
(0)
Loading收藏(0)

本文由 老D博客 作者:老D 发表,转载请注明来源!

关键词:,
SS推荐

热评文章

发表评论

*

评论: 2 条评论,访客:2 条,博主:0 条

  • skynncn
    skynncn 发布于:  回复

    一般我都用adblock屏蔽的。。。。基本不分享