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

简介

文章内容以及效果图来自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>  
  79.    
  80. <?php get_footer(); ?>  

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

效果图

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论
个人博客 论坛专区 主机两折 爆款主机
关注我们
  • 官方客服:289553844一键联系
  • 扫一扫加公众号
    扫一扫加小程序