简介

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

代码

  1. <?php
  2. /**
  3.  * Template Name: 友情链接
  4.  */
  5. get_header(); ?>
  6. <?php get_template_part(‘template-parts/post/diy’, ‘pagetop’); ?>
  7. <main class=“container”>
  8.     <div class=“page-friends page-common”>
  9.         <?php if (have_posts()): ?>
  10.             <?php while (have_posts()) : the_post(); ?>
  11.                 <article class=“page-content”>
  12.                     <?php the_content(); ?>
  13.                 </article>
  14.             <?php endwhile;  ?>
  15.         <?php endif; ?>
  16. <style>
  17.     .clearfix {zoom:1;}
  18.     .clearfix:after {content:‘.’;display:block;visibility:hidden;height:0;clear:both;}
  19.     .readers-list {list-style:none;}
  20.     .readers-list *{margin:0;padding:0;}
  21.     .readers-list li{position:relative;float:left;margin-top:20px!important;padding:0 10px;}
  22.     .readers-list li a{display:block;border:1px solid #eee;border-left: 3px solid #FF002B;border-radius:7px;padding-left:15px;transition:all .3s;}
  23.     .readers-list li:nth-of-type(6n+1) a{border-left-color:#FF002B;}
  24.     .readers-list li:nth-of-type(6n+2) a{border-left-color:#FFA900;}
  25.     .readers-list li:nth-of-type(6n+3) a{border-left-color:#00CC00;}
  26.     .readers-list li:nth-of-type(6n+4) a{border-left-color:#00CCFF;}
  27.     .readers-list li:nth-of-type(6n+5) a{border-left-color:#0089FA;}
  28.     .readers-list li:nth-of-type(6n+6) a{border-left-color:#404040;}
  29.     .readers-list li a div{padding:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#999;}
  30.     .readers-list li a div:first-child{border-bottom:1px dashed #eee;font-size:1.3em;color:#666;}
  31.     .readers-list li a:hover {
  32.     -webkit-transform: translateY(-6px);
  33.     transform: translateY(-6px);
  34.     box-shadow: 0 26px 40px -24px rgba(0,0,0,0.3);
  35. }
  36.     .link-title {
  37.     position: relative;
  38.     left: -30px;
  39.     display: inline-block;
  40.     margin: 20px 0;
  41.     font-size: 15px;
  42.     padding: 0 30px 0 25px;
  43.     height: 45px;
  44.     line-height: 45px;
  45.     border-radius: 0 35px 35px 0;
  46.     background: #404040;
  47.     color: #fff;
  48.     }
  49.     @media(min-width:768px){
  50.         .readers-list li{width:33.3333333%;}
  51.     }
  52.     @media(max-width:767px){
  53.         .readers-list li{width:100%;}
  54.     }
  55. </style>
  56. <div>
  57. <?php
  58. global $wpdb;
  59. $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”);
  60.     if($linkcats){
  61.         foreach($linkcats as $linkcat){
  62.             echo “<div class=\”link-title wow rollIn\”>”.$linkcat->name.“</div>”;
  63.             $links = get_bookmarks(‘orderby=id&category_name=’ . $linkcat->name);
  64.             $output1=”;
  65.                 if($links) {
  66.                     foreach ($links as $comment){
  67.                     $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>”;
  68.                     $output1 .= $tmp;
  69.                      }
  70.                     $output1 = “<ul class=\”readers-list clearfix\”>”.$output1.“</ul>”;
  71.                     echo $output1;
  72.                 }
  73.         }
  74.     }
  75. ?>
  76. </div>
  77. </div>
  78. </main>
  80. <?php get_footer(); ?>

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

效果图

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