由于之前友情链接一直是列表菜单式，所以考虑到美化元素，决定自己开发一款卡片式的友情链接源码，于是花了半个通宵成功做出来了一款非常好看的友情链接源码，目前完美支持wpdx模板，其他模板可能需要部分小小的改动，如果有什么问题可以在底部评论区留言咨询，也可直接联系博主进行有偿修改等。
演示效果
演示地址：https://www.svlik.com/links
功能说明
1.基于H5代码。
2.带有动态JQ特效，鼠标滑过以及点击都有特效。
3.基于原生WordPress自带的链接添加友链。
4.完美支持wpdx模板，其他模板理论支持，
5.完美支持IE浏览器。
6.使用Favicon获取API自动获取友链站图标，即使友链非https，本站也不会丢失小绿锁。
使用说明
1.将下方源代码保存为UTF-8无BOM编码，改名为page-links.php，并保存至你的模板根目录。
2.在后台创建一个新的页面设置，固定链接设置为links，然后模板选择Svlik 链接模版发布文章即可。
源代码
<?php
/*
Template Name: Svlik 链接模版
*/
get_header(); ?>
<div id="content-header">
<?php cmp_breadcrumbs();?>
</div>
<div class="container-fluid">
<!--正文开始-->
<style type="text/css">
/* 以下是按钮CSS */
.demo{width:760px; margin:20px auto 0 auto; height:70px;}
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
}
/* blue */
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
/* orange */
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
/* 以下是友链CSS */
{
padding: 0;
margin: 0;
font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
.more-title {
text-align: center;
font-weight: normal;
font-size: 25px;
margin: 20px 0 0 0;
}
/*放置链接框的区域*/
.link-box-area {
padding-top: 25px;
overflow: hidden;
zoom: 1;
}
/*链接框*/
.link-box {
border-radius: 10px;
width: 30%;
display: inline-block;
background-color: #bbe0e2;
height: 172px;
margin-left: 2.5%;
margin-bottom: 25px;
float: left;
text-decoration: none!important;
/*这里这么处理是因为受下面的display: -webkit-box;
影响，下划线又会回来*/
overflow: hidden;
-webkit-transition: all .2s linear;
/*渐变效果*/
transition: all .2s linear;
}
/*链接区域鼠标滑动浮起效果*/
.link-box:hover {
z-index: 2;
/*设置在顶层显示*/
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
/*添加阴影*/
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-webkit-transform: translate3d(0, -2px, 0);
/*向上浮动*/
transform: translate3d(0, -2px, 0);
}
/*链接名字*/
.link-box .link-name {
font-size: 20px;
color: #15AAEA;
width: 100%;
display: inline-block;
text-align: center;
margin: 18px 0;
/*超过一行的内容被自动截断并加上省略号*/
text-overflow: -o-ellipsis-lastline;
/*最后一行加省略号*/
overflow: hidden;
text-overflow: ellipsis;
/*无法容纳的被加上省略号*/
display: -webkit-box;
-webkit-line-clamp: 1;
/*超出三行截断*/
-webkit-box-orient: vertical;
}
/*链接小图标*/
.link-box .link-name .link-favicon {
display: inline-block;
max-width: 20px;
height: 20px;
margin: -3px 2px 0 2px;
vertical-align: middle;
border: none;
}
/*链接描述*/
.link-box .link-direction {
/*首行缩进30个PX*/
text-indent: 30px;
display: inline-block;
padding: 0 14px;
font-size: 15px;
line-height: 25px;
color: #555;
/*超过三行的内容被自动截断并加上省略号*/
text-overflow: -o-ellipsis-lastline;
/*最后一行加省略号*/
overflow: hidden;
text-overflow: ellipsis;
/*无法容纳的被加上省略号*/
display: -webkit-box;
-webkit-line-clamp: 3;
/*超出三行截断*/
-webkit-box-orient: vertical;
}
/*网页宽度大于900px,每列显示3个*/
@media screen and (min-width:900px) {
.link-box[data-role=.link-box-area]:nth-child(3n) {
clear:both;
}
}
/*网页宽度在900px到600px之间,每列显示2个*/
@media screen and (max-width:900px) and (min-width:600px) {
.link-box[data-role=.link-box-area]:nth-child(2n) {
clear:both;
}
.link-box {
width: 40%;
height: 150px;
margin-left: 6.5%;
}
}
/*网页宽度小于600px,每列显示1个*/
@media screen and (max-width:600px) {
.link-box {
width: 90%;
height: 150px;
margin-left: 5%;
clear:both;
}
}
</style>
<br><br><br><br>
<div class="container">
<p style="text-align: center;">
<span style="font-size: 36px;"><?php the_title(); ?></span>
</p>
<br>
<div class="link-box-area">
<?php
$bookmarks = get_bookmarks('orderby=date&orderby=id');
//print_r($bookmarks); //测试输出专用
if ( !empty($bookmarks) ) {
foreach ($bookmarks as $bookmark) {
echo '
<a class="link-box" href="'.$bookmark->link_url.'" target="'.$bookmark->link_target.'">
<span class="link-name">
<img class="link-favicon" height="30px" width="30px" src="https://www.svlik.com/t/favicon/ico.php?'.$bookmark->link_url.'" onerror="javascript:this.onerror=null;this.src=\'https://www.svlik.com/wp-content/uploads/2017/12/link20171230001249.png\'" />
'.$bookmark->link_name.'
</span>
<hr style="display: block; margin: 0.2em 0; padding: 0; height: 0.2px; border: 0; border-top: 1px solid #EDEDED;">
<p align="center">
'.$bookmark->link_url.'
</p>
<hr style="display: block; margin: 0.2em 0; padding: 0; height: 0.2px; border: 0; border-top: 1px solid #EDEDED;">
<span class="link-direction">
'.$bookmark->link_description.'
</span>
</a>
';
}
}
?>
</div>
</div>
<hr style="border-top: 1px solid #c7c7c7;">
<div style="text-align:center">
<span style="font-size: 20px;">如果您网站或博客的内容与云计算、编程开发、物联网技术相关，欢迎申请友情链接！</span>
<br><br>
<a href="https://www.svlik.com/guestbook" class="button white">申请友情链接</a>
</div>
<br><br>
<!--正文结束-->
</div>
</div>
<?php get_footer(); ?>
声明：本文为原创，作者为 Svlik，转载时请保留本声明及附带文章链接：https://www.svlik.com/1188.html
请问这个页面我按照教程做的，怎么最后发布页面是空白呀
2018-05-26 23:25