友情墙 - 自定义友情链接页面模板

PetitQ WordPress教程 2019-12-17 2.96K 0 1

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

```
<?php 
```
```
/**
```
```
 * Template Name: 友情墙
```
```
 */
```
```
get_header(); ?>
```
```
 
```
```
<main class="container">
```

	<div class="page-friends page-common row">

```
		<?php if (have_posts()): ?>
```

			<?php while (have_posts()) : the_post(); ?>

				<h1 class="page-title"><?php the_title(); ?></h1>

```
				<article class="page-content">
```
```
					<?php the_content(); ?>
```
```
				</article>
```
```
			<?php endwhile;  ?>
```
```
		<?php endif; ?>
```
```
<style>
```
```
    .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%;}
```
```
}
```
```
</style>
```
```
		<div>
```
```
			<?php
```
```
			    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 '<p>暂无友链数据！</p>';}

                foreach ($links as $comment){

                $tmp = "<li><a rel=\"nofollow\" title=".$comment->link_url." target=\"_blank\" href=\"/go?url=".$comment->link_url."\"><img src=".$comment->link_image." alt=\"\"><em>".$comment->link_name."</em><span>".$comment->link_notes."</span></a></li>";

```
                $output1 .= $tmp;   
```
```
                 }    
```

                $output1 = "<ul class=\"readers-list clearfix\">".$output1."</ul>";

```
                echo $output1; 
```
```
            ?>
```
```
		</div>
```
```
		<?php
```
```
			if(comments_open()){
```
```
				comments_template();
```
```
			}else{
```
```
				echo "<h5>评论已经关闭</h5>";
```
```
			}
```
```
		?>
```
```
	</div>
```
```
</main>
```
```
<?php get_footer(); ?>
```

也想出现在这里？联系我们吧

以下是最终的效果图：

友情墙 - 自定义友情链接页面模板

已有 741 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

友情墙 - 自定义友情链接页面模板

友情墙 - 自定义友情链接页面模板

相关文章

WordPress 怎么把网站设置成站点维护模式中

WordPress去除img标签height/width高度宽度让图片自适应

WordPress 5.4可将自定义字段添加到菜单项

发表回复取消回复

热销模板

WordPress教程

友情墙 - 自定义友情链接页面模板

相关文章

发表回复 取消回复

热销模板

发表回复取消回复