给WordPress搭建一个动态的About页面

A+

话说这两天在回访一些朋友的博客时，发现了不少新鲜有趣的东东，比如听我在说的关于页面就比较好看。虽然之前也曾见过，但未得教程，直到今天才发现详细搭建过程，所以记录之，以便查阅。

第一、新建一个About的模版文件page-about.php，将以下内容复制其中。

[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'); ?>/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'); ?>/about.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="a1">Code is Poetry</div>
<div id="a2"></div>
<div id="a3" data-days="<?php $Date_1="2010-12-07";$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 = 2010;$Year_2 = date("Y");$Month_1 = 12;$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="博客地址" title="Blog"></a>
<a id="gplus" title="google+" target="_blank" href="g+地址"></a>
<a id="weibo" title="weibo" target="_blank" href="微博地址"></a>
<a title="twitter" id="twitter" target="_blank" href="twitter地址"></a>
</div>
<?php wp_footer();?>
</body>
</html>[/php]

需要注意的是，要将其中的部分代码修改成自己的。比如博客成立时间、自己博客的地址等。

第二、添加页面效果JavaScript文件，新建一个about.js文件，复制下面的内容到文件中：

[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-04-24',
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;
}
}
});[/js]

同样注意需要依据自己的实际情况修改部分内容。

第三、新建一个about.css文件，将以下内容复制其中：
[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:#f0f0f0 url('images/bg.png');color:#888;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(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;}[/css]

注意其中的两个images文件，需要下载到自己的网站才可引用。

第四、在WordPress后台新增一个页面，然后模板选择“About模板”，内容为空，保存之后便大功告成了。

至于效果如何，可以看看分文网的关于页面。

对于懒人，可以一次性下载以下文件，再做修改。

点我下载

给WordPress搭建一个动态的About页面

发表评论取消回复

目前评论：2 其中：访客 2 博主 0

发表评论取消回复

目前评论：2 其中：访客 2 博主 0

登录 找回密码

登录找回密码