背景

由于wordpress主题的多样性,所以部分主题上没有直接添加友情链接的地方,wordpress上虽然有插件但是因为我的博客机器性能一般,插件安装过多加载就会变慢很多,就想到了利用wordpress小工具来解决这个问题。

实施步骤

1:准备

打开后台——外观——自定义——小工具——自定义HTML

2:添加HTML代码

<ul style="padding: 12px 13px 10px 0px;" class="wailian">
	<li><a href="http://2life.top" target="_blank">2life爱生活</a></li>
	<li><a href="http://www.google.com" target="_blank">谷歌</a></li>
</ul>

现在就已经可以了,但是为了让链接更加美观所以我们可以尝试添加一下css

3:添加额外的css美化

在自定义页面直接点击——额外css复制粘贴下面的代码就行了

/******* 友情链接 css 控制  ******/
.wailian li{ float:left}
.wailian li a {
    background: #FAFAFA;
    border: 1px solid #e9e9e9;
    display: block;
    text-align: center;
    margin-left: 15px;
    margin-bottom: 5px;
    padding: 0 4px;
    border-radius: 2px;
    width:120px;
    color: #5e5e5e;
    line-height: 30px;
    white-space:nowrap;
    overflow:hidden;
	}
.wailian li a:hover {
    color: #fff;
    background: #428BCA;
    }

具体效果可以参照本站友链

最后修改:2020 年 02 月 21 日
如果觉得我的文章对你有用,请随意赞赏