偶然看到牧风的About页面搭建攻略，感觉挺不错的，前几天给自己的博客弄了一个。看效果直接 点击这里 。
下面分享下制作过程，代码原作者：牧风源代码打包下载：http://vdisk.weibo.com/s/a7Wln1.首先要新建文件page-about.php,复制下面的代码：
<? /* Template Name: About模板 */ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>About</title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta name="keywords" content="<?php bloginfo('name'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>//cdn.handong.net/about.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>//cdn.handong.net/js/about.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="a1">hd的博客</div>
<div id="a2"></div>
<div id="a3" data-days="<?php $Date_1="2012-6-12";$Date_2=date("Y-m-d");$d1=strtotime($Date_1);$d2=strtotime($Date_2);$Days=round(($d2-$d1)/3600/24);echo $Days;?>"></div>
<div id="a4" data-month="<?php $Year_1 = 2012;$Year_2 = date("Y");$Month_1 = 5;$Month_2 = date("m");echo ($Year_2-$Year_1)*12 + $Month_2 - $Month_1;?>"></div>
<div id="a5"></div>
<?php
global $wpdb,$month;
$lastpost = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC LIMIT 1");
$output = get_option('SHe_archives2_'.$lastpost);
if(empty($output)){
$output = '';
$wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE 'SHe_archives2_%'");
$q = "SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date ASC";
$monthresults = $wpdb->get_results($q);
if ($monthresults) {
foreach ($monthresults as $monthresult) {
$thismonth = zeroise($monthresult->month, 2);
$thisyear = $monthresult->year;
$q = "SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE '$thisyear-$thismonth-%' AND post_date AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC";
$postresults = $wpdb->get_results($q);
if ($postresults) {
$postcount = count($postresults);
$output .= '<div class="post-count" data-count="'.$postcount.'"><span class="count">0</span><span class="height"></span></div>';
}
}
update_option('SHe_archives2_'.$lastpost,$output);
}
}
echo $output;
?>
<div id="a7"><?php bloginfo('name'); ?> · <?php bloginfo('description'); ?></div>
<div id="a8">
<a id="home" href="http://hd.lc" title="Home"></a>
<a id="weibo" title="新浪微博" target="_blank" href="http://weibo.com/u/389201"></a>
<a id="gplus" title="赞助hd" target="_blank" href="http://me.alipay.com/hdlc"></a>
<!--<a title="twitter" id="twitter" target="_blank" href="twitter地址"></a>-->
</div>
<?php wp_footer();?>
</body>
</html>
2.新建about.css, 复制下面的代码：
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{background:transparent;border:0;margin:0;outline:0;padding:0;vertical-align:baseline;}
html,body{width:100%;height:100%;}
body{background:#04395a url('http://hd.lc/images/bg_img.svg') 50% 50% fixed;background-size: 100% 100%;color:#ffffff;font:9pt/1.5 'Microsoft YaHei','Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;text-align:center;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;}
ol,ul{list-style:none outside none;}
#a1,#a2{font-size:70px;width:100%;height:100px;line-height:100px;position:absolute;top:50%;margin-top:-80px;}
#a2,#a3,#a4,#a6,#a7,#a8{display:none;}
#a3,#a4,#a5,#a6,#a7,#a8{width:100%;font-size:60px;position:absolute;top:50%;}
#a5,#a6,#a7{top:50%;margin-top:-80px;}
.post-count{width:50px;float:left;margin:0 10px;text-align:center;position:absolute;bottom:-50px;}
.post-count span.count{width:50px;height:10px;padding-bottom:5px;color:#666;font-size:15px;}
.post-count span.height{width:50px;height:2px;background-color:#888;display:block;}
#a1,#a8{left:0;}
#a8 a{display:inline-block;width:75px;height:70px;background-repeat:no-repeat;background-image:url(http://hd.lc/images/sns.png)}
a#home{background-position:0 0;}
a#gplus{background-position:-75px 0;}
a#weibo{background-position:-150px 0;}
a#twitter{background-position:-225px 0;}
a#home:hover{background-position:0 -80px;}
a#gplus:hover{background-position:-75px -80px;}
a#weibo:hover{background-position:-150px -80px;}
a#twitter:hover{background-position:-225px -80px;}
/*colorTips*/
.colorTip{display:none;color: #fff;position:absolute;left:50%;top:80px;padding:2px 6px;z-index:9999;background-color:#999a9c;font-size:15px;font-style:normal;height:20px;line-height:20px;text-decoration:none;text-align:center;white-space:nowrap;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}
.pointyTip{border:6px dashed transparent;border-bottom-color:#999a9c;top:-12px;height:0;left:50%;margin-left:-6px;position:absolute;width:0;overflow:hidden;}
.colorTipContainer{position:relative;text-decoration:none!important;_zoom:1;}
3.新建js/about.js, 复制下面的代码:
jQuery.extend(jQuery.easing, {
easeInOutBack: function(e, f, a, i, h, g) {
if (g == undefined) {
g = 1.70158
}
if ((f /= h / 2) < 1) {
return i / 2 * (f * f * (((g *= (1.525)) + 1) * f - g)) + a
}
return i / 2 * ((f -= 2) * f * (((g *= (1.525)) + 1) * f + g) + 2) + a
}
});~ (function(f) {
f.fn.colorTip = function(a) {
var b = {
color: "black",
timeout: 800
};
a = f.extend(b, a);
return this.each(function() {
var l = f(this);
if (!l.attr("title")) {
return true
}
l.addClass(a.color);
var c = new e();
var j = l.attr("title"),
k = new d(j);
l.append(k.generate()).addClass("colorTipContainer");
l.hover(function() {
l.removeAttr("title");
k.show();
c.clear()
},
function() {
c.set(function() {
k.hide();
l.attr("title", j)
},
a.timeout)
})
})
};
function e() {}
e.prototype = {
set: function(b, a) {
this.timer = setTimeout(b, a)
},
clear: function() {
this.timer = null;
clearTimeout(this.timer)
}
};
function d(a) {
this.content = a;
this.shown = false
}
d.prototype = {
generate: function() {
return this.tip || (this.tip = f('<span class="colorTip"><span class="pointyTip"></span>' + this.content + '</span>'))
},
show: function() {
if (this.shown) {
return
}
this.tip.css("margin-left", -this.tip.outerWidth() / 2).fadeIn("fast");
this.shown = true
},
hide: function() {
this.tip.fadeOut();
this.shown = false
}
}
})(jQuery);
jQuery(document).ready(function($) {
var a1 = $('#a1'),
a2 = $('#a2'),
a3 = $('#a3'),
a4 = $('#a4'),
a5 = $('#a5'),
a7 = $('#a7'),
a8 = $('#a8'),
a0 = $('.post-count'),
data_year = '博客建立于2012-06-12',
data_month = a4.attr('data-month'),
data_days = a3.attr('data-days'),
w = a1.width(),
h = a1.height(),
n = a0.length,
l = (w - n * 70) / 2
aniDataA = 600,
aniDataB = 600;
a2.text(data_year).css({
left: w
});
a3.text('一共' + data_days + '天').css({
left: w
});
a4.text(data_month + '个月啦~').css({
left: w
});
a5.text(data_month + '个文章存档').css({
left: w
});
a0.each(function() {
$(this).css({
left: l
});
l += 70;
});
setTimeout(function() {
a1.animate({
left: -w
},
800, 'easeInOutBack',
function() {
a1.hide();
a2.show().animate({
left: 0
},
800, 'easeInOutBack',
function() {
setTimeout(function() {
a2.animate({
'margin-top': '-=50px'
},
800, 'easeInOutBack',
function() {
a3.show().animate({
left: 0
},
800,
function() {
a3.animate({
left: '-=100px'
},
800, 'easeInOutBack');
a4.show().animate({
left: 220
},
800, 'easeInOutBack',
function() {
setTimeout(function() {
a2.animate({
left: -w
},
800, 'easeInOutBack',
function() {
a2.hide();
});
setTimeout(function() {
a3.animate({
left: -w
},
800, 'easeInOutBack',
function() {
a3.hide();
});
setTimeout(function() {
a4.animate({
left: -w
},
800, 'easeInOutBack',
function() {
a4.hide();
setTimeout(function() {
a5.animate({
left: 0
},
800, 'easeInOutBack',
function() {
setTimeout(function() {
a5.animate({
'margin-top': '-=100px'
},
600, 'easeInOutBack');
ani_a();
setTimeout(ani_b, 1300);
setTimeout(function() {
a5.animate({
'margin-top': '-=600px'
},
1200, 'easeInOutBack',
function() {
a5.hide();
});
a0.animate({
bottom: '-1000px'
},
1200, 'easeInOutBack',
function() {
a0.hide();
});
setTimeout(function() {
a7.fadeIn(800,
function() {
setTimeout(function() {
a7.animate({
'margin-top': '-=50px'
},
800);
a8.fadeIn(800,
function() {
$("#a8 a").colorTip({});
});
},
800);
});
},
800);
},
7000);
},
1000);
});
},
300);
});
},
200)
},
200)
},
2000);
});
});
});
},
400);
});
})
},
2000);
function ani_a() {
a0.each(function(index) {
$(this).animate({
bottom: 50
},
aniDataA, 'easeInOutBack');
aniDataA += 50;
});
}
function ani_b() {
a0.each(function(index) {
var txt = $(this).attr('data-count');
$(this).children('span.height').animate({
height: txt * 40
},
aniDataB, 'easeInOutBack');
ani_c($(this).children('span.count'), txt, aniDataB / txt);
aniDataB += 200;
});
}
function ani_c(elem, x, t) {
var k = parseInt(elem.text());
if (k < x) {
k++;
elem.text(k);
setTimeout(function() {
ani_c(elem, x)
},
t);
} else {
return false;
}
}
});
4.修改page-about.php和about.css里面的网站名称、时间以及背景图片。
5.把这3个文件上传至主题所在的根目录。最新版的WordPress会自动套用模版，新的about页面就制作完成。
源代码打包下载：http://vdisk.weibo.com/s/a7Wln
Comments 23 条评论
到此一游
这个About页面貌似很火
折腾时间到？
呵呵，咱现在是懒得做这些个性化的东西了！主要是变懒了！
这个真的好强大~~
学习了~~~
以前见过这种，还以为是主题自带的，原来是自己制作的，挺简单的，不过太炫，内容不丰富，建议保留原有about，制作好这个炫的页面后，单独导航提出来，或者给一个链接，提供给愿意点开看的童鞋
其实，你还少了两个图片……
我只找到了一个图片。
@小金鱼儿 不少啊，一个背景图，一个图标文件。链接都在about.css。可以自己修改。
nga到此一游![[ali做鬼脸]](https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/3c/alizuoguilian_org.gif "[ali做鬼脸]")
@smwd 14T的么![[阴险]](https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_org.gif "[阴险]")