WordPress友情链接模板
没错又是一篇水文 （逃
使用此模板需要安装
Link Manager插件，模板文件已上传至Github，可以直接取用。
最终效果请自行查看本站友情链接页面
代码部分
_142_142<?php_142/\*_142 \* Template Name: 友情链接_142 \*/_142get\_header(); ?>_142_142<main class="container">_142 <div class="page-friends page-common row">_142 <?php if (have\_posts()): ?>_142 <?php while (have\_posts()) : the\_post(); ?>_142 <h1 class="page-title" style="margin-top:100px;text-align:center;font-size:37px;font-style:italic">_142 <?php the\_title(); ?>_142 </h1>_142 <article class="page-content" style="text-align:center;">_142 <?php the\_content(); ?>_142 </article>_142 <?php endwhile; ?>_142 <?php endif; ?>_142<style>_142 .clearfix {_142 zoom:1;_142 }_142_142 .clearfix:after {_142 content:”.”;_142 display:block;_142 visibility:hidden;_142 height:0;_142 clear:both;_142 }_142_142 .readers-list {_142 list-style:none;_142 }_142_142 .readers-list \*{_142 margin:0;_142 padding:0;_142 }_142_142 .readers-list li{_142 position:relative;_142 float:left;_142 margin:6px 6px;_142 height:205px;!important;_142 }_142_142 .readers-list li > a {_142 border: 1px solid #eee;_142 display: block;_142 width: 100%;_142 height: 100%;_142 text-align: center;_142 transition:all .5s;_142 -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);_142 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);_142 }_142_142 .readers-list li>a {_142 -webkit-transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);_142 transition: -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);_142 transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);_142 transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1), -webkit-box-shadow .25s cubic-bezier(.4, 0, .2, 1);_142 will-change: box-shadow;_142 }_142_142 .readers-list li>a:hover,_142 .readers-list li>a:focus {_142 -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);_142 box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);_142 }_142_142 #links\_info {_142 position: absolute;_142 bottom: 0px;_142 padding-bottom: 10px;_142 background: #000;_142 width: 100%;_142 height: 200px;_142 -webkit-mask : -webkit-gradient(linear, center top, center bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.7)));_142 }_142_142 #links\_icon {_142 width: 70px;_142 height: 70px;_142 position: absolute;_142 border-radius: 50%;_142 top: 15px;_142 right: 15px;_142 }_142_142 .readers-list em{_142 position: absolute;_142 top: 110px;_142 left: 15px;_142 font-size: 25px;_142 color: #fff;_142 }_142_142 .readers-list span {_142 position: absolute;_142 top:155px;_142 font-size: 18px;_142 left: 15px;_142 width: auto;_142 color: #fff;_142 font-style: italic;_142 }_142_142 @media(min-width:750px){_142 .readers-list {margin: 0px auto;width:750px;}_142 .readers-list li{width:355px;}_142 }_142_142 @media(max-width:749px){_142 .readers-list {margin: 0px auto;width:375px;}_142 .readers-list li{width:355px;}_142 }_142_142</style>_142 <div>_142 <?php_142 global $wpdb;_142 $qlink="select link\_url,link\_name,link\_image,link\_notes,link\_description,link\_rss from wp\_links where link\_visible='Y' order by link\_id";_142 $links = $wpdb->get\_results($qlink);_142 if(empty($links)) {_142 echo '<p>暂无友链数据！</p>';_142 }_142 foreach ($links as $comment){_142 $tmp = "<li><a rel=\\"nofollow\\" title=".$comment->link\_url." target=\\"\_blank\\" href=\\"$comment->link\_url\\" style=\\"background-image:url($comment->link\_image);background-size: cover;\\"><div id=\\"links\_info\\"></div><em>".$comment->link\_name."</em><span>".$comment->link\_notes."</span><img id=\\"links\_icon\\" src=\\"$comment->link\_rss\\"></img></a></li>";_142 $output1 .= $tmp;_142 }_142 $output1 = "<ul class=\\"readers-list clearfix\\">".$output1."</ul>";_142 echo $output1;_142 ?>_142 </div>_142 <div style="text-align:center;font-size:18px;margin:10px 0px;">此页模板由<a href="https://www.ixk.me">Otstar-Lin</a>于2018制作,源码已上传至<a href="https://github.com/syfxlin/wp-links-template">Github</a></div>_142 </div>_142</main>_142_142<?php get\_footer(); ?>
使用方法
安装Link Manager插件并激活，在主题模板的文件夹新建一个 PHP 文件，将上面的代码复制进去并保存，或者去Github下载已经弄好的文件，并确定文件权限无误，进入 WordPress 后台，添加一个页面，选择友情链接模板进行创建，之后就可以在链接菜单进行添加了。
图像地址对应背景图 RSS地址对应友人头像 备注对应友链简介
保留the_content()函数，可以在编辑器中添加内容。
WordPress友情链接模板
https://blog.ixk.me/post/wordpress-links-template许可协议
发布于
2018-08-28
本文作者
Otstar Lin
转载或引用本文时请遵守许可协议，注明出处、不得用于商业用途！