友情页面 | 本站目前使用的友情链接页面 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

近来应访客的需要，把目前使用的友情链接页面代码分享下。感觉好久没有去发这样的文章了，总觉得吧，当初在折腾自己想要的效果时，百度里总能找到答案的。也建议各位多多自己发挥想象，做出自己感觉喜欢的风格就好。

<?php 
/**
 * Template Name: 友情链接
 */
get_header(); ?>
<?php get_template_part('template-parts/post/diy', 'pagetop'); ?>
<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: -30px;
	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:33.3333333%;}
    }
    @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=\"/go?url=".$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>

<?php get_footer(); ?>

<?php

/**

* Template Name: 友情链接

get_header(); ?>

<?php get_template_part('template-parts/post/diy', 'pagetop'); ?>

<?php if (have_posts()): ?>

<?php while (have_posts()) : the_post(); ?>

<?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: -30px;

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:33.3333333%;}

}

@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=\"/go?url=".$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>

</main>

<?php get_footer(); ?>

以上代码是全部的内容，可以根据自己博客主题作出相应的调整，如CSS样式你可以写到style.css中。

效果图如下：