wordpress添加友情链接页面CSS样式带效果图

简介

文章内容以及效果图来自icss，这个界面风格还是挺好的，有兴趣的可以参考一下！

代码

<?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(); ?>

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

效果图