简介
文章内容以及效果图来自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]
效果图
文章链接：https://www.sbkko.com/1-106.html
文章标题：wordpress添加友情链接页面CSS样式带效果图
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：wordpress添加友情链接页面CSS样式带效果图
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
