很多主题没有自带友链模板,Links这个插件就很好的弥补了这个缺陷,添加友链的方式也很方便,快捷。

Links插件使用

首先在主题目录创建一个PHP文件,套入你的主题page.php,使用以下方式输出友情链接。

    <div class="tab-content">
         <?php
        $mypattern = <<<eof
      <div class="link-item">
        <img src="{image}" style="cursor: pointer; display: block; margin: 0 auto;">
        <a href="{url}" target="_blank"  titile="{description}" style="margin: 0;">
        <div class="name">{name}</div>
        <div class="info">{description}</div>
        </a></div>
        eof;
             Links_Plugin::output($mypattern, 0, "");
         ?></div>

css样式

    /*友链*/
    .link-item {outline: none;text-decoration: none;color: #444;float: left;width: 32%;text-align: center;border-radius: 5px;transition: all .3s ease-in-out;margin: 5px 2px;cursor: pointer;}   
    a:link,a:visited {text-decoration: none;}   
    @media only screen and (min-width:650px) and (max-width:1250px) {.link-item {width:49%;}}  
    @media only screen and (min-width:450px) and (max-width:650px) {.link-item {width: 49%;}} 
    @media only screen and (max-width:450px) {.link-item {width: 99%;}} 
    .link-item:hover{box-shadow: 0px 0px 10px #6f9fc7;-moz-box-shadow: 0px 0px 10px #6f9fc7;-webkit-box-shadow: 0px 0px 10px #6f9fc7;}  
    .link-item img {width: 70px;height: 70px;border-radius: 70px;margin: 5px !important;float: left;}    
    @media only screen and (min-width:450px) and (max-width:650px) {.link-item img {width: 60px;height: 60px;border-radius: 60px;}}
    @media only screen and (max-width:450px) {.link-item img {width: 55px;height: 55px;border-radius: 55px;}}  
    .link-item .name{font-weight: bold;font-size: 20px;padding: 10px 0px;cursor: pointer;color: #6f9fc7;font-weight:400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    @media only screen and (min-width:450px) and (max-width:650px) {.link-item .name {font-size: 17px;padding: 10px 0px 5px 0px !important;}.link-item .info {padding: 0px 0px 5px 0px;}}   
    @media only screen and (max-width:450px)
    {.link-item .name {font-size: 16px;padding: 5px 0px !important;}}  
    .link-item .info {color: #777;padding-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;}
    .link-item img {box-shadow: 0 0 1px #888;-webkit-border-radius: 50%;border-radius: 50%;margin: .5rem 1rem 0 0;position: relative;float: left;transition: all 0.8s ease;background-color: #fff;} 
    .link-item:hover img {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);}
    .links-commtens{margin:0;padding:0;padding-top:2em;display:inline-flex}#links-inside{overflow: hidden; }
    .tab-content{overflow: hidden;  }

如果还想自定义更多,请访问友情链接插件帮助文档
插件下载:下载