焚花祭秋 » Wordpress 個性關於頁面展示及實現方法

Wordpress 個性關於頁面展示及實現方法

作者：焚花祭秋 / 发布时间：June 2, 2012 / 分类：博客.技巧 / 29 Comments

最近貌似沒怎麼折騰Wordpress了,今天看到牧風曾經發過的一個關於頁面,無聊蛋疼的就折騰下,不折騰不打緊,這一折騰,還真TMD會上癮,下面就是一張關於頁面的展示圖,具體效果請移步關於頁面一探究竟!下面就具體說下此頁面的實現方法!

首先:就是在主題裏建立一個page模板複製進去以下代碼(有些個人博客信息就需要親自己手動更改了)

<? /* Template Name: 關於模板 */ ?>
<!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'); ?>/js/about.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div id="a1">Hi,My Friend!</div>
    <div id="a2"></div>
    <div id="a3" data-days="<?php $Date_1="2006-12-25";$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 = 2006;$Year_2 = date("Y");echo $Year_2-$Year_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_archives3_'.$lastpost);
    if(empty($output)){
        $output = '';
        $wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE 'SHe_archives3_%'");
         $q = "SELECT DISTINCT YEAR(post_date) AS year, 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) ORDER BY post_date ASC";
        $monthresults = $wpdb->get_results($q);
         if ($monthresults) {
             foreach ($monthresults as $monthresult) {
             $thisyear    = $monthresult->year;
             $q = "SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE '$thisyear-%' 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_archives3_'.$lastpost,$output);
         }
     }
     echo $output;
    ?>
    <div id="a7" style="font-size:50px;">素年錦時.相濡以沫</div>
    <div id="a8">
        <a id="home" title="博客主頁" target="_blank" href="http://muo.me/"></a>
        <a id="gplus" title="騰訊微博" target="_blank" href="http://t.qq.com/landywon"></a>
        <a id="weibo" title="新浪微博" target="_blank" href="http://www.weibo.com/landywon"></a>
        <!--<a title="twitter" id="twitter" target="_blank" href="twitter地址"></a>-->
    </div>
<?php wp_footer();?>
</body>
</html>

其次:就是在主題裏建立一個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 = '博客建立於2006-12-25,聖誕節!',
  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 = 3000,
  aniDataB = 3000;
  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': '-=600px'
                              },
                              600, 'easeInOutBack');
                              ani_a();
                              setTimeout(ani_b, 1300);
                              setTimeout(function() {
                                a5.animate({
                                  'margin-top': '-=100px'
                                },
                                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;
    }
  }
});

最後:就是就是比較重要的樣式了,提供一個我自己的,大家可以根據自己的喜好重新寫css樣式,新建或者直接寫到sytle.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/about.png) repeat;color:#353535;font:9pt/1.5 'Century Gothic','Microsoft YaHei',Verdana;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:40px;width:100%;height:100px;line-height:100px;position:absolute;top:40%;margin-top:-80px;}
#a2,#a3,#a4,#a6,#a7,#a8{display:none;}
#a3,#a4,#a5,#a6,#a7,#a8{width:100%;font-size:30px;position:absolute;top:40%;}
#a5,#a6,#a7{top:40%;margin-top:-80px;}
 
.post-count{width:50px;float:left;margin:0 10px;text-align:center;position:absolute;bottom:-50px;height:-50%;}
.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:75px;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裏所需要的圖片,順便也把我自己已經實現的縣城代碼分享出來,需要的朋友就勇猛的折騰吧,下載後直接複製進主題根目錄裏即可使用,新建模板-選擇關於模板-確定,即可搞定!

現成代碼下載----點我

哇!已經有29枚讓人不淡定的評論! »

qkwu

August 9th, 2015 At Sunday 07:36 PM ReplyTa

不错哦收藏了
韓麥斯

August 24th, 2012 At Friday 07:02 PM ReplyTa

你的評論框可以這樣，昵稱（這個必須有）郵箱（這個也得有）網址（這個可以有）
---------------------------------
這個about我試了試，真不錯，跑到原作那裏的也試了下，令我無奈的是那個沒成功，折騰半天還是沒動靜，代碼真心看不懂。你這個統計年的令我無奈啊，我博客裏顯示0年情何以堪。怎麽改成月份可以簡單指導下麽，還有如果以後不想讓統計了，直接跳過那一步刪除哪段代碼呢，那個統計真心慢啊
Kayo

July 10th, 2012 At Tuesday 02:48 PM ReplyTa

哥們現在有多少個網站了，我淩亂了！
南風

June 25th, 2012 At Monday 11:48 AM ReplyTa

喔，都頂上天了＝＝
亞麻汽車坐墊

June 16th, 2012 At Saturday 10:39 AM ReplyTa

收藏了，你的域名好短呀，
Ian

June 14th, 2012 At Thursday 02:44 PM ReplyTa

哇，看到這麽多代碼就頭痛啊
小雲子

June 13th, 2012 At Wednesday 05:23 PM ReplyTa

專業的文章，學習學習
wmtimes

June 13th, 2012 At Wednesday 03:04 PM ReplyTa

咋都是繁體了？