Wordpress 個性關於頁面展示及實現方法
作者:焚花祭秋 / 发布时间:June 2, 2012 / 分类:博客.技巧 / 29 Comments
最近貌似沒怎麼折騰Wordpress了,今天看到牧風曾經發過的一個關於頁面,無聊蛋疼的就折騰下,不折騰不打緊,這一折騰,還真TMD會上癮,下面就是一張關於頁面的展示圖,具體效果請移步關於頁面一探究竟!下面就具體說下此頁面的實現方法!
首先:就是在主題裏建立一個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裏所需要的圖片,順便也把我自己已經實現的縣城代碼分享出來,需要的朋友就勇猛的折騰吧,下載後直接複製進主題根目錄裏即可使用,新建模板-選擇關於模板-確定,即可搞定!
不错哦 收藏了
你的評論框可以這樣,昵稱(這個必須有)郵箱(這個也得有)網址(這個可以有)
---------------------------------
這個about我試了試,真不錯,跑到原作那裏的也試了下,令我無奈的是那個沒成功,折騰半天還是沒動靜,代碼真心看不懂。你這個統計年的令我無奈啊,我博客裏顯示0年情何以堪。怎麽改成月份可以簡單指導下麽,還有如果以後不想讓統計了,直接跳過那一步刪除哪段代碼呢,那個統計真心慢啊
哥們現在有多少個網站了,我淩亂了!

喔,都頂上天了= =
收藏了,你的域名好短呀,
哇,看到這麽多代碼就頭痛啊
專業的文章,學習學習
咋都是繁體了?