分享一款WordPress本站正在使用的原创卡片式独立友情链接页面

Svlik 2017-12-31 教程, 文章汇总 6,401 2

文章目录[隐藏]

演示效果
功能说明
使用说明
源代码

由于之前友情链接一直是列表菜单式，所以考虑到美化元素，决定自己开发一款卡片式的友情链接源码，于是花了半个通宵成功做出来了一款非常好看的友情链接源码，目前完美支持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

分享一款WordPress本站正在使用的原创卡片式独立友情链接页面

演示效果

功能说明

使用说明

源代码

2 条评论

发表回复取消回复

演示效果

功能说明

使用说明

源代码

相关文章

2 条评论

发表回复 取消回复

发表回复取消回复