站点图标

WordPress友情链接模板

2018-08-28折腾记录PHP / MySQL / Web
本文最后更新于 607 天前,文中所描述的信息可能已发生改变

没错又是一篇水文 (逃

使用此模板需要安装Link Manager插件,模板文件已上传至Github,可以直接取用。

最终效果请自行查看本站友情链接页面

代码部分


_142
_142
<?php
_142
/\*
_142
\* Template Name: 友情链接
_142
\*/
_142
get\_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
  • 许可协议

    BY-NC-SA

  • 发布于

    2018-08-28

  • 本文作者

    Otstar Lin

转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!

VSCode配置C/C++ GDB调试环境[Windows]Intel Optane 傲腾内存体验