现在的位置: 首页 > Wordpress > WP技巧 > 正文
给WordPress搭建一个动态的About页面
2012年06月01日 WP技巧 ⁄ 共 8994字 评论数 2 ⁄ 被围观 5,844+

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

第一、新建一个About的模版文件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'); ?>/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>

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

第二、添加页面效果JavaScript文件,新建一个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-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;
    }
  }
});

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

第三、新建一个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:#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;}

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

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

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

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

点我下载



目前有 2 条留言 其中:访客:2 条, 博主:0 条

  1. 大修子 : 2012年06月11日20:12:58  -9楼

    这篇文章,确实很长


    • 管理员
      admin : 2012年06月11日21:01:28  地下1层

      只要看最后一行就可以了


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×