前言

“友情链接”在wordpress站点中,一般都是通过“小工具”来插入实现的。有的主题自带“友情链接”小工具,但也有的主题是不带“友情链接”小工具的,三月的主题就是如此。

不带“友情连接”小工具也没关系,我们可以自己造嘛。

wordpress中内置了一个“自定义HTML”的小工具,我们可以通过它来实现“友情链接”的功能。

过程

添加额外CSS代码

  1. 在外观>自定义>额外css代码
  2. 在编辑>style.css中添加

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

*注:代码中的颜色代码均为十六进制颜色码

可以在https://www.sioe.cn/yingyong/yanse-rgb-16/  中转换代码

添加文本小工具以及代码

    1. 外观>小工具>文本
    2. 添加小工具之后在文本小工具中切换可视化为文本并添加以下代码
    3. <ul style=”padding: 12px 13px 10px 0px;” class=”wailian”><li><a href=”http://www.taitaiblog.com” target=”_blank”>泰泰博客</a></li>
      <li><a href=”https://zgboke.org” target=”_blank”>中国博客联盟</a></li>
      <li><a href=”https://shop.flyingteam.top” target=”_blank”>飞舞杂货铺</a></li>
      <li><a href=”https://isenchun.cn” target=”_blank”>森纯博客</a></li>
      <li><a href=”http://www.dianhv.com” target=”_blank”>电狐加速器</a></li>

      </ul>

    4. 然后切换成可视化之后编辑连接跟文字即可

完成后

发表评论

共有 0 条评论