重要的事情只说一遍：这是本站首个自制的模板-友情墙，使用 wpdb 自定义去查询友情数据表，设计 CSS，首次弄这些，时间花得挺多呀，不熟悉 WP 的手册就是头痛的回事。要使用这种风格的友情链接，只需新建一个 PHP，把下面的代码复过去就行，然后再像其它页面一样添加一个，选上这个模板就 OK 了。

/**

* Template Name: 友情墙

get_header(); ?>

<?php the_title(); ?>

.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;padding:10px;float:left;margin-top:20px!important;}

.readers-list li > a {

border: 1px solid #eee;

display: block;

height: 85px;

text-align: center;

transition:all .5s;

background: #f9f9f9;

}

.readers-list li>a:hover{border-color:#e5e5e5;}

.readers-list a:hover em{top:45px;font-size:1.1em;}

.readers-list a:hover span{opacity:1;left:50%;}

.readers-list img{position:absolute;top:-30px;left:calc(50% - 30px);width:60px;height:60px;border-radius:50%;0px 0px 10px 5px #008EC2;box-shadow:0 0 6px 3px #0081B1;transition:all 1s;background:#fff;}

.readers-list a:hover img {

-webkit-transform:scale(.7);

-moz-transform:scale(.7);

-o-transform:scale(.7);

-ms-transform:scale(.7);

transform:scale(.7);

border-radius: 0;

}

.readers-list em{

position: absolute;

top: 60px;

-webkit-transform: translateX(-50%);

left: 50%;

font-style: normal;

font-size: 1.2em;

color: #818181;

transition: all .3s;

font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"

}

.readers-list span {

position: absolute;

left: 20%;

bottom: 14px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

text-align: center;

-webkit-transform: translateX(-50%);

width: calc(100% - 30px);

opacity: 0;

transition:all .3s;

color: #818181;

font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"

}

@media(min-width:768px){

.readers-list li{width:25%;}

}

@media(max-width:767px){

.readers-list li{width:100%;}

}

global $wpdb;

$qlink="select link_url,link_name,link_image,link_notes,link_description from wp_links where link_visible='Y' order by link_id";

$links = $wpdb->get_results($qlink);

if(empty($links)) {echo '

暂无友链数据！

';}

foreach ($links as $comment){

$tmp = "

link_url."\">".$comment->link_name."".$comment->link_notes."";

$output1 .= $tmp;

}

$output1 = "

".$output1."

echo $output1;

if(comments_open()){

comments_template();

}else{

echo "

评论已经关闭

}

以下是最终的效果图：

友情链接php模板,自定义友情链接页面模板相关推荐

完整的京东联盟自定义推广链接生产程序
2019独角兽企业重金招聘Python工程师标准>>> 前言前文<利用京东联盟API获取自定义推广链接>介绍了如何使用联盟API获取自定义推广链接. 这里我做一个小页面 ...
Mogrt免费模板 20个手绘涂鸦社交媒体链接PR模板
Mogrt免费模板 20个手绘涂鸦社交媒体链接PR模板下载这是一个奇妙的运动图形模板.它包含3种不同样式的20个文本动画.它们非常易于使用,每个都有自己的自定义控制器.你可以在你的拆箱,短剧,模仿, ...
SAE去掉index.php实现自定义固定链接
如果在SAE上安装了wordpress,想实现自定义固定链接(如"/%year%/%monthnum%/%postname%/")时,却发现点击页面会出现404 Not Found ...
如何使 FlashGet 正常合法下载 Session 中的自定义文件链接呢? JSP/Servlet 实现!
<% //============================================================================================ ...
php对接京东宙斯平台,利用京东联盟API获取自定义推广链接
本文将简单介绍下京东联盟.京东宙斯两个平台,以及如何利用京东宙斯平台的京东联盟API来快速获取自定义推广链接. 关于京东联盟京东联盟(去官网看看)是一个CPS模式的营销平台,我们可以使用自己的网站放 ...
微信分享自定义图文链接
时隔多年,再次做这个需求时,又被绕了一大圈(其实主要是后台没做过呀),故总结在此: 效果如下: 1.微信自带的公众号文章分享时效果如下: 2.微信服务号链接自己的域名地址默认分享时是这样的: 所以需求 ...
H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
自定义分享链接是什么? 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片,并且该卡片的标题,内容和图片都可以自己编辑.如下图效果 ● 自定义网页链接示例(带标题,内容简介,缩略图) ● 未 ...
vue微信分享给朋友，朋友圈自定义网页链接url改变了
以下是微信分享给朋友,朋友圈的部分代码 wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客 ...
zabbix系列：解决zabbix模板不能重复链接到其它模板, 即使透过其它模板
有模板A B,想让A继承B,出现"模板不能重复链接到其它模板, 即使透过其它模板" 解决方法: 检查主机上已经应用的模板,存在主机关联了A B,再继承的时候,就发生冲突了.在主机上 ...

友情链接php模板,自定义友情链接页面模板

<?php the_title(); ?>

评论已经关闭

友情链接php模板,自定义友情链接页面模板相关推荐

最新文章

热门文章