WordPress 归档页面

CludeChn
2014-09-04 / 0 评论 / 238 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2014年09月05日,已超过3469天没有更新,若内容或图片失效,请留言反馈。

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

代码部分

1、PHP部分

<div id="archives">      
    <div id="archives-content">      
    <?php       
       $the_query = new WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1' );      
        $year=0; $mon=0; $i=0; $j=0;      
        $all = array();      
        $output = '';      
        while ( $the_query->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 .= '</div></div>';      
            if ($year != $year_tmp) { // 输出年份      
                $year = $year_tmp;      
                $all[$year] = array();      
            }      
            if ($mon != $mon_tmp) { // 输出月份      
                $mon = $mon_tmp;      
                array_push($all[$year], $mon);      
                $output .= "<div class='archive-title' id='arti-$year-$mon'><h3>$year-$mon</h3><div class='archives archives-$mon' data-date='$year-$mon'>";      
            }      
            $output .= '<div class="brick"><a href="'.get_permalink() .'"><span class="time">'.get_the_time('n-d').'</span>'.get_the_title() .'<em>('. get_comments_number('0', '1', '%') .')</em></a></div>';      
        endwhile;      
        wp_reset_postdata();      
        $output .= '</div></div>';      
        echo $output;      
     
        $html = "";      
        $year_now = date("Y");      
        foreach($all as $key => $value){// 输出 左侧年份表      
            $html .= "<li class='year' id='year-$key'><a href='#' class='year-toogle' id='yeto-$key'>$key</a><ul class='monthall'>";      
            for($i=12; $i>0; $i--){      
                if($key == $year_now && $i > $value[0]) continue;      
                $html .= in_array($i, $value) ? ("<li class='month monthed' id='mont-$key-$i'>$i</li>") : ("<li class='month'>$i</li>");      
            }      
            $html .= "</ul></li>";   
        }      
    ?>     
    </div>      
    <div id="archive-nav">      
        <ul class="archive-nav"><?php echo $html;?></ul>      
    </div>      
</div><!-- #archives --> 

2、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  
} 

3、JS部分

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")   
            }   
        })   
    })   
});  

0

评论 (0)

取消