前言

在之前已经做了一个友情页面，阅读本文前需要对以下文章的内容有所了解。

给wordpress添加友情链接页面

关键代码

首先新建页面模板；
然后在输出函数< ?php the_content(); ?>位置添加以下代码:

<h2 class="title-h2" style="text-align:center;font-size:18pt">友情链接</h2>
<p style="text-align:center"><span style="color:#999999">每次刷新随机排序~</span></p>
<div class="linkpage-two">
    <hr/>
    <ul><?php
    $bookmarks = get_bookmarks(array('orderby'=>'rand'));
    if(!empty($bookmarks)){
        foreach($bookmarks as $bookmark){
            $friendimg = $bookmark->link_image;
            if(empty($friendimg)){
                echo '<li><a href="'.$bookmark->link_url.'" target="_blank"><img src="'.get_stylesheet_directory_uri().'/images/avatar.png"><h4>'.$bookmark->link_name.'</h4><p>'.$bookmark->link_description.'</p></a></li>';
            } else {
                echo '<li><a href="'.$bookmark->link_url.'" target="_blank"><img src="'.$bookmark->link_image.'"><h4>'.$bookmark->link_name.'</h4><p>'.$bookmark->link_description.'</p></a></li>';
            }
        }
    } ?>
    </ul>
    <hr/>
</div>
<?php the_content(); ?>

在style.css文件中加入如下样式代码：

/**
* 友情链接页面模板之二CSS
* 由 htts://guihet.com 发布
*/
.linkpage-two ul{color:rgba(255,255,255,.15)}
.linkpage-two ul:after{content:" ";clear:both;display:block}
.linkpage-two li{float:left;width:33.3%;position:relative;transition:all .3s ease-out;border-radius:5px;line-height:1.3;height:90px;display:block}
.linkpage-two h3{margin:15px -25px;padding:0 25px;border-left:5px solid #51aded;background-color:#f7f7f7;font-size:25px;line-height:40px}
.linkpage-two li:hover{background:rgba(230,244,250,.5)}
.linkpage-two li a{padding:0 10px 0 90px}
.linkpage-two li a img{width:60px;height:60px;border-radius:5%;position:absolute;top:15px;left:10px;transition:0.5s;-webkit-transtion:1.5s}
.linkpage-two li a h4{color:#333;font-size:18px;margin:0 0 7px 0;padding-left:80px}
.linkpage-two li a h4:hover{color:#51aded}
.linkpage-two li a h4,.linkpage li a p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.4}
.linkpage-two li a p{font-size:12px;color:#999;padding-left:80px}
.linkpage-two li a:hover img{transform:rotate(360deg);-webkit-transform:rotate(360deg);}

2018-04-12
增加移动端适配，否则在手机上显示样式异常..

/** 屏幕大小改变时候动态响应 **/
@media screen and (max-width:480px) {
.linkpage-two li{width:97%}
.linkpage-two ul{padding-left:5px}
}
@media screen and (min-width:480px) and (max-width:768px){
.linkpage-two li{width:48%}
.linkpage-two ul{padding-left:5px}
}
@media screen and (min-width:768px) and (max-width:990px){
.linkpage-two li{width:33%}
.linkpage-two ul{padding-left:5px}
}
@media screen and (min-width:990px) and (max-width:1200px){
.linkpage-two li{width:48%}
.linkpage-two ul{padding-left:5px}
}

以上样式请根据主题和实际使用习惯做相应的调整..

演示

本站友情链接已经改为这个样式..
友情链接页面2演示