当前位置:首页 > 转自点点  >> WordPress 归档页面
29日

WordPress 归档页面

作者:皇家元林 时间:2013年09月29日 围观者: 347 人 【0条评论】

食用方法:自定一个模板,复制php、css、js 部分到自定的模板中,然后新建页面,启用该模板即可。

PHP部分:

have_posts() ) : $the_query->the_post(); $year_tmp = get_the_time('Y'); $mon_tmp = get_the_time('n'); $y=$year; $m=$mon; if ($mon != $mon_tmp && $mon > 0) $output .= '
'; if ($year != $year_tmp) { // 输出年份 $year = $year_tmp; $all[$year] = array(); } if ($mon != $mon_tmp) { // 输出月份 $mon = $mon_tmp; array_push($all[$year], $mon); $output .= "

$year-$mon

"; } $output .= ''; endwhile; wp_reset_postdata(); $output .= '
'; echo $output; $html = ""; $year_now = date("Y"); foreach($all as $key => $value){// 输出 左侧年份表 $html .= "
  • $key
      "; for($i=12; $i>0; $i--){ if($key == $year_now && $i > $value[0]) continue; $html .= in_array($i, $value) ? ("
    • $i
    • ") : ("
    • $i
    • "); } $html .= "
  • "; } ?>

    CSS部分:

    #archives:after {   
            clear: both;   
            display: block;   
            visibility: hidden;   
            height: 0!important;   
            content: " ";   
            font-size: 0!important;   
            line-height: 0!important 
        } 
              
        #archives {   
            zoom: 1 
        } 
              
        #archives-content {   
            float: right;   
            width: 550px 
        } 
              
        #archive-nav {   
            float: left;   
            width: 50px 
        } 
              
        .archive-nav {   
            display: block;   
            position: fixed;   
            background: #f9f9f9;   
            width: 40px;   
            padding: 5px;   
            border: 1px solid #eee;   
            text-align: center 
        } 
              
        .year {   
            border-top: 1px solid #ddd 
        } 
              
        .month {   
            color: #ccc;   
            padding: 5px;   
            cursor: pointer;   
            background: #f9f9f9 
        } 
              
        .month.monthed {   
            color: #777 
        } 
              
        .month.selected,.month:hover {   
            background: #f2f2f2 
        } 
              
        .monthall {   
            display: none 
        } 
              
        .year.selected .monthall {   
            display: block 
        } 
              
        .year-toogle {   
            display: block;   
            padding: 5px;   
            text-decoration: none;   
            background: #eee;   
            color: #333;   
            font-weight: bold 
        } 
              
        .archive-title {   
            padding-bottom: 40px 
        } 
              
        .brick {   
            margin-bottom: 10px 
        } 
              
        .archives a {   
            position: relative;   
            display: block;   
            padding: 10px;   
            background-color: #f9f9f9;   
            color: #333;   
            font-style: normal;   
            line-height: 18px 
        } 
              
        .time {   
            color: #888;   
            padding-right: 10px 
        } 
              
        .archives a:hover {   
            background: #eee 
        } 
              
        #archives h3 {   
            padding-bottom: 10px 
        } 
              
        .brick em {   
            color: #aaa;   
            padding-left: 10px 
        }

    JQ部分:

    jQuery(document).ready(function($) {   
            var old_top = $("#archives").offset().top,   
                _year = parseInt($(".year:first").attr("id").replace("year-", ""));   
            $(".year:first, .year .month:first").addClass("selected");   
            $(".month.monthed").click(function() {   
                var _this = $(this),   
                    _id = "#" + _this.attr("id").replace("mont", "arti");   
                if (!_this.hasClass("selected")) {   
                    var _stop = $(_id).offset().top - 10,   
                        _selected = $(".month.monthed.selected");   
                    _selected.removeClass("selected");   
                    _this.addClass("selected");   
                    $("body, html").scrollTop(_stop)   
                }   
            });   
            $(".year-toogle").click(function(e) {   
                e.preventDefault();   
                var _this = $(this),   
                    _thisp = _this.parent();   
                if (!_thisp.hasClass("selected")) {   
                    var _selected = $(".year.selected"),   
                        _month = _thisp.children("ul").children("li").eq(0);   
                    _selected.removeClass("selected");   
                    _thisp.addClass("selected");   
                    _month.click()   
                }   
            });   
            $(window).scroll(function() {   
                var _this = $(this),   
                    _top = _this.scrollTop();   
                if (_top >= old_top + 10) {   
                    $(".archive-nav").css({   
                        top: 10   
                    })   
                } else {   
                    $(".archive-nav").css({   
                        top: old_top + 10 - _top   
                    })   
                }   
                $(".archive-title").each(function() {   
                    var _this = $(this),   
                        _ooid = _this.attr("id"),   
                        _newyear = parseInt(_ooid.replace(/arti-(\d*)-\d*/, "$1")),   
                        _offtop = _this.offset().top - 40,   
                        _oph = _offtop + _this.height();   
                    if (_top >= _offtop && _top < _oph) {   
                        if (_newyear != _year) {   
                            $("#year-" + _year).removeClass("selected");   
                            $("#year-" + _newyear).addClass("selected");   
                            _year = _newyear   
                        }   
                        var _id = _id = "#" + _ooid.replace("arti", "mont"),   
                            _selected = $(".month.monthed.selected");   
                        _selected.removeClass("selected");   
                        $(_id).addClass("selected")   
                    }   
                })   
            })   
        });

    Via:http://mufeng.me/wordpress-archives.html

    标签:,

    Leave a Reply

    

    1905