• 博客設置
  • 編輯管理
  • 返回首頁
焚花祭秋
Wordpress Typecho 以及周邊知識的一個筆記,成長的過程中相互學習,共同進步!
首頁 歸檔 關於 友鏈 留言
分類
  • 博客.技巧
  • 網絡.主機
  • HOME
  • 博客.技巧
  • Wordpress 個性關於頁面展示及實現方法

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

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

字體大小選擇: [ 超大字體 中型字體 默認字體 ]

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<? /* 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(有些個人博客信息一樣需要親自己手動更改了)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
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裏面,隨個人喜好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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裏所需要的圖片,順便也把我自己已經實現的縣城代碼分享出來,需要的朋友就勇猛的折騰吧,下載後直接複製進主題根目錄裏即可使用,新建模板-選擇關於模板-確定,即可搞定!

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

上一篇: LinuxVPS 如何搭建SSH進行無國界瀏覽 下一篇: 兩個無線路由器無線橋接實現網絡共享的方法
    分享到: QQ空間 新浪微博 騰訊微博 開心網 人人網 淘江湖 百度空間
訂閱本站:焚花祭秋
文本標籤:沫, about頁面, 關於頁面, 焚花祭秋
友情聲明:本站所有文章皆為原創,圖文皆為網絡搜索傳播,轉載請以鏈接形式標明原文出處地址,謝謝合作!
本文鏈接:http://tc.muo.me/wordpress-about-page.html [复制]

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

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

    不错哦 收藏了

  2. 韓麥斯 韓麥斯
    August 24th, 2012 At Friday 07:02 PM    ReplyTa

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

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

    哥們現在有多少個網站了,我淩亂了!

  4. 南風 南風
    June 25th, 2012 At Monday 11:48 AM    ReplyTa

    喔,都頂上天了= =

  5. 亞麻汽車坐墊 亞麻汽車坐墊
    June 16th, 2012 At Saturday 10:39 AM    ReplyTa

    收藏了,你的域名好短呀,

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

    哇,看到這麽多代碼就頭痛啊

  7. 小雲子 小雲子
    June 13th, 2012 At Wednesday 05:23 PM    ReplyTa

    專業的文章,學習學習

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

    咋都是繁體了?


  1. 1
  2. 2
  3. 3
  4. 后一页 »
取消回复
My WeChat

簡繁切換

    • WordPress,作者函數(Author tags)在模板中的使用
    • WordPress Smile評論表情再次分享五套免費下載
    • 快易互聯,美國VPS
    • WordPress博客中Gravatar頭像不顯示的便捷解決方法
    • Wordpress文章內容過長分頁顯示文章方法
    • WodPress 利用Jquery實現圖片顯隱,標題加載中提示等特效

  • YueTing.Org
    悦听有声,路过看看
  • 自由草
    简繁转换功能在也没刷新下会失效
  • 天地华宇
    好东西 谢谢分享先收藏一下下 ...
  • flippy
    主题蛮好看的,好像轻博客一样
  • flippy
    不错呀
  • qkwu
    不错哦 收藏了
文章 RSS And 评论 RSS
焚花祭秋 Is Powered By Wordpress Theme Desgin By 沫(Muo.me)