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

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

  1. <?php
  2. /**
  3.  * Template Name: 友情墙
  4.  */
  5. get_header(); ?>
  6. 
    
  7. <main class="container">
  8. 	<div class="page-friends page-common row">
  9. 		<?php if (have_posts()): ?>
  10. 			<?php while (have_posts()) : the_post(); ?>
  11. 				<h1 class="page-title"><?php the_title(); ?></h1>
  12. 				<article class="page-content">
  13. 					<?php the_content(); ?>
  14. 				</article>
  15. 			<?php endwhile;  ?>
  16. 		<?php endif; ?>
  17. <style>
  18.     .clearfix {zoom:1;}
  19.     .clearfix:after {content:”.”;display:block;visibility:hidden;height:0;clear:both;}
  20.     .readers-list {list-style:none;}
  21.     .readers-list *{margin:0;padding:0;}
  22.     .readers-list li{position:relative;padding:10px;float:left;margin-top:20px!important;}
  23.     .readers-list li > a {
  24. 	border: 1px solid #eee;
  25. 	display: block;
  26. 	height: 85px;
  27. 	text-align: center;
  28. 	transition:all .5s;
  29. 	background: #f9f9f9;
  30. }
  31.     .readers-list li>a:hover{border-color:#e5e5e5;}
  32.     .readers-list a:hover em{top:45px;font-size:1.1em;}
  33.     .readers-list a:hover span{opacity:1;left:50%;}
  34.     .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;}
  35.     .readers-list a:hover img {
  36. 	-webkit-transform:scale(.7);
  37. 	-moz-transform:scale(.7);
  38. 	-o-transform:scale(.7);
  39. 	-ms-transform:scale(.7);
  40. 	transform:scale(.7);
  41. 	border-radius: 0;
  42. }
  43.     .readers-list em{
  44. 	position: absolute;
  45. 	top: 60px;
  46. 	-webkit-transform: translateX(-50%);
  47. 	left: 50%;
  48. 	font-style: normal;
  49. 	font-size: 1.2em;
  50. 	color: #818181;
  51. 	transition: all .3s;
  52. 	font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"
  53. }
  54. .readers-list span {
  55. 	position: absolute;
  56. 	left: 20%;
  57. 	bottom: 14px;
  58. 	overflow: hidden;
  59. 	white-space: nowrap;
  60. 	text-overflow: ellipsis;
  61. 	text-align: center;
  62. 	-webkit-transform: translateX(-50%);
  63. 	width: calc(100% - 30px);
  64. 	opacity: 0;
  65. 	transition:all .3s;
  66. 	color: #818181;
  67. 	font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"
  68. }
  69. @media(min-width:768px){
  70.     .readers-list li{width:25%;}
  71. }
  72. @media(max-width:767px){
  73.     .readers-list li{width:100%;}
  74. }
  75. </style>
  76. 		<div>
  77. 			<?php
  78. 			    global $wpdb;
  79.                 $qlink="select link_url,link_name,link_image,link_notes,link_description from wp_links where link_visible='Y' order by link_id";
  80.                 $links = $wpdb->get_results($qlink);
  81.                 if(empty($links)) {echo '<p>暂无友链数据!</p>';}
  82.                 foreach ($links as $comment){
  83.                 $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>";
  84.                 $output1 .= $tmp;
  85.                  }
  86.                 $output1 = "<ul class="readers-list clearfix">".$output1."</ul>";
  87.                 echo $output1;
  88.             ?>
  89. 		</div>
  90. 		<?php
  91. 			if(comments_open()){
  92. 				comments_template();
  93. 			}else{
  94. 				echo "<h5>评论已经关闭</h5>";
  95. 			}
  96. 		?>
  97. 	</div>
  98. </main>
  99. <?php get_footer(); ?>

以下是最终的效果图:
友情墙 - 自定义友情链接页面模板-云模板

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/87892

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买