为博客网站增加一个友情链接页面

0

今天看到朋友页面一直空着打不开,索性折腾一下,把原来的朋友页面弄回来。

找到爱CSS大佬的网站,找回他之前分享的友情链接页面。

轻车熟路的就把朋友页面弄好了。

完美修复!

感谢爱CSS大佬的分享。简单好看!

代码是:

<?php 
/**
 * Template Name: 友情链接
 */
get_header(); ?>

<div class="content">
    
    <main class="container">
    <div class="page-friends page-common">
        <?php if (have_posts()): ?>
            <?php while (have_posts()) : the_post(); ?>
                <article class="page-content">
                    <?php the_content(); ?>
                </article>
            <?php endwhile;  ?>
        <?php endif; ?>
<style>
    .clearfix {zoom:1;}
    .clearfix:after {content:'.';display:block;visibility:hidden;height:0;clear:both;}
    .readers-list {list-style:none;}
    .readers-list *{margin:0;padding:0;}
    .readers-list li{position:relative;float:left;margin-top:20px!important;padding:0 10px;}
    .readers-list li a{display:block;border:1px solid #eee;border-left: 3px solid #FF002B;border-radius:7px;padding-left:15px;transition:all .3s;}
    .readers-list li:nth-of-type(6n+1) a{border-left-color:#FF002B;}
    .readers-list li:nth-of-type(6n+2) a{border-left-color:#FFA900;}
    .readers-list li:nth-of-type(6n+3) a{border-left-color:#00CC00;}
    .readers-list li:nth-of-type(6n+4) a{border-left-color:#00CCFF;}
    .readers-list li:nth-of-type(6n+5) a{border-left-color:#0089FA;}
    .readers-list li:nth-of-type(6n+6) a{border-left-color:#404040;}
    .readers-list li a div{padding:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#999;}
    .readers-list li a div:first-child{border-bottom:1px dashed #eee;font-size:1.3em;color:#666;}
    .readers-list li a:hover {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0,0,0,0.3);
}
    .link-title {
    position: relative;
    left: 0px;
    display: inline-block;
    margin: 20px 0;
    font-size: 15px;
    padding: 0 30px 0 25px;
    height: 45px;
    line-height: 45px;
    border-radius: 0 35px 35px 0;
    background: #404040;
    color: #fff;
    }
    @media(min-width:768px){
        .readers-list li{width:31%;}
    }
    @media(max-width:767px){
        .readers-list li{width:100%;}
    }
</style>
<div>
<?php
global $wpdb;
$linkcats = $wpdb->get_results("SELECT T1.name AS name FROM $wpdb->terms T1, $wpdb->term_taxonomy T2 WHERE T1.term_id = T2.term_id AND T2.taxonomy = 'link_category' and T2.count>0");
    if($linkcats){
        foreach($linkcats as $linkcat){
            echo "<div class=\"link-title wow rollIn\">".$linkcat->name."</div>";
            $links = get_bookmarks('orderby=id&category_name=' . $linkcat->name);
            $output1='';
                if($links) {
                    foreach ($links as $comment){   
                    $tmp = "<li class=\"wow slideInUp\"><a rel=\"".$comment->link_rel."\" title=".$comment->link_notes." target=\"_blank\" href=\"".$comment->link_url."\"><div>".$comment->link_name."</div><div>".$comment->link_notes."</div></a></li>";   
                    $output1 .= $tmp;   
                     }    
                    $output1 = "<ul class=\"readers-list clearfix\">".$output1."</ul>";
                    echo $output1;
                }
        }
    }
?>
</div>
</div>
</main>

</div><!--/.content-->


<?php get_footer(); ?>
该代码原地址:友情链接  
有需要自行取用,请感谢分享博主爱CSS
效果如上