WordPress添加侧边栏名片小工具
应某同学和部分主题使用者的要求,讲下如何在WordPress添加侧边栏名片小工具。
起初看到这个名片是在DIYgod的博客,当时觉得很不错,就直接扒了下来。
在扒的过程中,我发想他有用balloon.css这个工具,也就一起用上了。如果是用的是我的主题就不用额外引用了,如果不是的话,需要在header.php文件里添加一行代码:<link rel="stylesheet" href="//cdn.bootcss.com/balloon-css/0.4.0/balloon.min.css" />。下面说下添加名片小工具的过程:
2017/9/14后新版
进入WordPress后台,选择“外观->小工具->自定义HTML”,标题为空,内容如下:
<div class="card-bg">
<img src="你的图片地址" />
</div>
<div class="card-info" style="position: relative;min-height: 100px;text-align: center;">
<img class="card-info-avatar" src="你的头像地址" alt="头像" />
<span class="card-info-block card-info-name">@Shawn</span>
<span class="card-info-block">欢迎来到我的博客!</span>
<span class="card-info-block">其他相关信息</span>
</div>
<div class="catch-me">
<div>
<a data-balloon="Rss" data-balloon-pos="up" target="_blank" href="你的订阅地址"><i class="fa fa-rss"></i></a>
<a data-balloon="微博" data-balloon-pos="up" target="_blank" href="你的微博主页" class="external" rel="nofollow"><i class="fa fa-weibo"></i></a>
<a data-balloon="GitHub" data-balloon-pos="up" target="_blank" href="你的GitHub主页" class="external" rel="nofollow"><i class="fa fa-github"></i></a>
<a data-balloon="Email" data-balloon-pos="up" target="_blank" href="mailto:你的邮箱地址" class="external" rel="nofollow"><i class="fa fa-envelope"></i></a>
</div>
</div>
内容定义完成之后,就是样式:
.art .card-bg img {
width: 100%;
height: auto;
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.art .card-info-avatar {
position: relative;
width: 100px;
max-width: 100%;
border-radius: 50%;
border: 2px solid #e4dede;
display: block;
margin: 0 auto;
-webkit-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.3), 2px 2px 3px rgba(0, 0, 0,0.2), 3px 3px 6px rgba(0, 0, 0,0.2);
box-shadow:1px 1px 1px rgba(0, 0, 0, 0.3), 2px 2px 3px rgba(0, 0, 0,0.2), 3px 3px 6px rgba(0, 0, 0,0.2);
margin-top: -50px;
}
.art .card-info-avatar:hover {
-webkit-animation: profilepic 0.15s linear infinite alternate;
-moz-animation: profilepic 0.15s linear infinite alternate;
-ms-animation: profilepic 0.15s linear infinite alternate;
animation: profilepic 0.15s linear infinite alternate;
}
.art .card-info-block {
display: block;
text-align: center;
}
.art .card-info-name {
font-family: Comic Sans MS, PingFang SC, Helvetica, Avenir Next, Helvetica, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
}
2017/9/14前旧版
进入WordPress后台,选择“外观->小工具->自定义HTML”,标题为空,内容如下:
<div class="left-pic">
<img src="/wp-content/themes/Memory/img/avatar.png" alt="">
</div>
<div class="right-info">
<ul>
<li><span>姓名:</span>Shawn</li>
<li><span>性别:</span>男</li>
<li><span>生日:</span>1996年2月7日</li>
<li><span>爱好:</span>炉石,音乐,小说</li>
</ul>
</div>
<div class="catch-me">
<div>
<a data-balloon="Rss" data-balloon-pos="up" target="_blank" href="你的订阅地址"><i class="fa fa-rss"></i></a>
<a data-balloon="微博" data-balloon-pos="up" target="_blank" href="你的微博主页" class="external" rel="nofollow"><i class="fa fa-weibo"></i></a>
<a data-balloon="GitHub" data-balloon-pos="up" target="_blank" href="你的GitHub主页" class="external" rel="nofollow"><i class="fa fa-github"></i></a>
<a data-balloon="Email" data-balloon-pos="up" target="_blank" href="mailto:你的邮箱地址" class="external" rel="nofollow"><i class="fa fa-envelope"></i></a>
</div>
</div>
内容定义完成之后,就是样式:
.art .left-pic {
float: left;
padding: 5px 8px 5px 0;
width: 40%;
text-align: center;
}
.art .right-info {
width: 60%;
float: right;
display: block;
padding: 8px 0 5px 0;
text-align: left;
line-height: 20px;
}
.art .right-info ul {
list-style: none;
}
.art .right-info ul li {
border-bottom: 1px dotted rgba(0, 0, 0, .5);
}
.art .right-info ul li span {
color: rgba(0, 0, 0, .5);
font-weight: bold;
}
.art .left-pic img {
width: 100px;
max-width: 100%;
border-radius: 50%;
border: 1px solid #ddd;
padding: 2px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}
.art .catch-me {
clear: both;
border-top: 3px solid #eee;
padding-top: 7px;
}
.art .catch-me, .art .catch-me a {
text-align: center
}
.art .catch-me a {
display: inline-block;
margin-bottom: 7px;
text-decoration: none;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.art .catch-me div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.art .catch-me i {
display: inline-block;
font-size: 16px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 40px;
color: rgba(0, 0, 0, .5);
background-color: rgba(0, 0, 0, .1);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
font-style: normal
}
.art .catch-me i:hover {
background-color: #0bf;
color: #fff
}
大功告成!当然这只是我的名片样式,你可以自由发挥啦~


原文链接:WordPress添加侧边栏名片小工具
诗与酒 版权所有,转载请注明出处。
博主大佬|´・ω・)ノ