为WordPress制作个性的About页面

hd 发布于 2012-08-08 203 次阅读

偶然看到牧风的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