有朋自远方来,不亦乐乎。
为wordpress主题添加友链独立页面
原创 橘子书  发布于 2年前 ( 2017-07-19 ) 阅读: 3,446 次 评论: 29 条 A+

最近,龙砚庭使用的万网虚拟主机频繁受到黑客的攻击,然后博客各种‘假死’、‘瘫痪’,对此我也只能摊开双手,表示无奈跟麻木。

唉,随他去吧,反正龙砚庭建站至今,也没有从博客当中获得任何盈利,IP与PV更是低得可怜。如果练手的黑客们,一不小心将主机打垮了,那正好可以当作一个退出独立博客的借口。

不过嘛,趁着此次主机被攻击,我趁这个机会学习了一遍如何部署百度云加速这类的CDN,算是祸兮福依吧。所以,访问龙砚庭的时候出现前端移位、css不加载、提交的评论没有立刻显示……那都是CDN缓存的罪,不用太在意那些小细节,最重要的是——龙砚庭还在坚持无盈利地发表博文。

言归正传,前阶段森纯博客的博主问我:龙砚庭博客的页是怎么写的。

今天分享一下部署步骤。

一、独立页面模板

复制一份自用主题的papes.php(也可以是现用主题里面的其他独立页面),命名为links.php。

然后在开头位置添加以下代码:

<?php 
/**
 * Template name: 友链页面
 * Description:   by 龙砚庭
 */
?>

二、php部署

找到links.php文件里面的<?php the_content(); ?>,在其后面添加如下代码:

<div class="lyt_links">
		  	  	  <ul class="links_lyt">
		<?php 
		  	    $bookmarks = get_bookmarks('title_li=&orderby=rating&order=asc');
		  	    if ( !empty($bookmarks) ) {
		  	    foreach ($bookmarks as $bookmark) {
		  	    echo  '<li class="link_lyt"><a class="link_lyt_inner" href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" ><span class="link_lyt_name">'. $bookmark->link_name .'</span><div class="link_lyt_desc">'. $bookmark->link_description .'</div></a></li>';
      }}?>
		  	  </ul></div>

如果想要显示友链的网站图标,需要在上面代码第四行添加代码:

$default_ico = get_template_directory_uri().'/img/favicon.png';

在<li class=”link_lyt”>后面添加html代码:

<img src="'. $bookmark->link_url . '/favicon.ico" onerror="javascript:this.src=\'' . $default_ico . '\'" />

然后在自用主题的img文件夹里面,扔进一张默认的favicon.png(用户随意DIY,这里就不提供样图了)。

三、css部署

本来是想用leo主题的友链样式,不过前几日我逛 知库吧 的时候,觉得它友链的css样式挺有意思的,于是果断、无耻地扒了下来,顺便美其名曰学习一下css。

打开自用主题style.css,扔进以下代码:

.lyt_links {
	margin-bottom: 80px;
}
.lyt_links img {
  position: absolute;
  display: inline-block;
  margin: -5px 0 -10px -9%;
  padding: 1px;
  width: 24px;
  height: 24px;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff;
  vertical-align: bottom;
}/*站点图标样式,自行DIY*/
.lyt_links ul {
	margin: 0;
	list-style: none;
	padding: 0;
	width: 100%;
	display: inline-block;
}
.lyt_links ul li {
	width: 32.60%;
	float: left;
	border: 1px solid #eee;
	padding: 10px 30px;
	margin: 4px 4px;
	position: relative;
	overflow: hidden;
	border-left: 3px #0089fa solid;
	box-shadow: 2px 2px 0 rgba(0,0,0,.05);
}
.links_lyt li {
       width: 50%
}
/*li自定义颜色 begin*/
.lyt_links ul li:nth-child(5n+1) {
	border-left-color: #ff002b
}
.lyt_links ul li:nth-child(5n+2) {
	border-left-color: #ffa900
}
.lyt_links ul li:nth-child(5n+3) {
	border-left-color: #0c0
}
.lyt_links ul li:nth-child(5n+4) {
	border-left-color: #0cf
}
/*li自定义颜色 end*/
span.link_lyt_name {
	color: #000000;
	padding-bottom: 10px;
	display: block;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.link_lyt_desc {
	color: #949494;
	font-size: 13px;
	padding: 10px 0;
	border-top: 1px dashed #ddd;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	line-height: 25px;
}
.lyt_links ul li:hover {
	color: #ffffff;
	background-image: linear-gradient(to right,#eae0e0,#cabdbd);
}
.lyt_links ul li:hover:before {
	width: 180%;
}
.lyt_links ul li:hover .link_lyt_name {
	color: #000;
}
.lyt_links ul li:hover .link_lyt_desc {
	color: #000;
	border-top: 1px dashed #cec8c8;
}
@media screen and (max-width:480px) {
	.lyt_links ul li {
		margin: 4px 0px;
	}
	.lyt_links ul li {
		width: 100%;
	}
}

如果添加了站点图标,那么请自行修改:

.lyt_links img{/*想要移动图标的位置,请使用类似top:10px;left:-20px; 或者用margin:上px 右px 下px 左px  来调试。*/}

如果没添加显示站点图标的话,那么请删掉该段css代码。

另外,以上css代码的li标签只定义了五种颜色,如果想要自定义更多的颜色,请自行根据以下代码格式,修改(5n+1)及其背景色设置:

lyt_links ul li:nth-child(5n+1){border-left-color:#颜色}

四、DEMO

友链demo

END。

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

目前评论:29   其中:访客  15   博主  14

发表评论

莫慌,小狮子正在努力加载评论...
  1. 晓庄
    晓庄2 ( 2017.07.23 14:17:17 )  9楼

    过来瞧一瞧复活的。

  2. BanYuner
    BanYuner1 ( 2017.07.22 21:56:25 )  8楼

    其实可能是因为你使用了CDN的问题,某种情况下,当CDN回源失败的话,就会不断回源调取文件,直接造成服务器满负荷,至少我之前是这样的

    • 橘子书
      橘子书渣渣橘 ( 2017.07.22 22:02:31 )

      @BanYuner :mrgreen: 不是这个缘故。因为之前我都没用过CDN,要不是这次出现状况,估计我都不会碰CDN这块。

  3. 龙笑天
    龙笑天3 ( 2017.07.22 0:43:15 )  7楼

    居然活了,可喜可贺~ :evil:

  4. 姜辰
    姜辰1 ( 2017.07.21 22:54:33 )  6楼

    被攻击,加个CDN?