利用wordpress自带归档函数新建归档archive页面

本文由清尘发表于2019-01-17 00:40属于WordPress分类

新建一个页面模板,调用归档函数wp_get_archives

日志归档效果

函数详情使用可参考官方文档:
https://developer.wordpress.org/reference/functions/wp_get_archives/

HTML代码:

    <div class="archive_page">
    <div class="archive_box" id="archive_box"></div>
    <ul class="archive_list hid" id="archive_list">
<?php 
$args = array(
    'type'            => 'monthly',
    'limit'           => '',
    'format'          => 'html', 
    'before'          => '',
    'after'           => '',
    'show_post_count' => true,
    'echo'            => 1,
    'order'           => 'DESC'
);
wp_get_archives( $args );
?>

</ul>
    </div>

通过JS重新组合了HTML结构(为方便写CSS美化)

(function($){
    // 重组归档列表
    var archive_box = $('#archive_box'),
        curyear = (new Date()).getFullYear(),
        yearArr = [],
        cacheArr = [],
        blogUrl = "<?php bloginfo('url'); ?>";

    for (var i = 2003; i<=curyear;i++){
        yearArr.push(i);
    }
    yearArr.reverse();
    $('#archive_list li').each(function(i){
        var textArr = ($(this).html()).split('&nbsp;'),
            star_index = textArr[1].indexOf('(') + 1,
            end_index = textArr[1].indexOf(')');
        textArr[1] = '<span class="num">'+textArr[1].substring(star_index,end_index)+'</span>';
        $(this).html(textArr.join(''));
        
    })


    for(var i = 0 ; i<yearArr.length; i++){
        var str = yearArr[i];
        $('#archive_list li').each(function(){
            var text = $(this).html();
            if(!(text.indexOf(yearArr[i]) == -1)){
                cacheArr.push('<li>'+text+'</li>');
            }
        })

        if(!(cacheArr.length == 0)){
            archive_box.append('<ul class="'+str+'">'+cacheArr.join('')+'</ul>');
        }

        cacheArr = [];
    }

    archive_box.find('ul').each(function(){
        var tagName = $(this).attr('class');
        $(this).append('<li class="year_tag"><a href="'+blogUrl+'/date/'+tagName+'">'+tagName+'</a></li>')
    })

})(jQuery)
/* archive css */
.archive_box{padding-top: 15px;}
.archive_box ul{position: relative; padding-left: 120px; margin-bottom: 10px;}
.archive_box li{padding-bottom: 8px;}
.archive_box .num{color: #fff; font-size: 10px; background-color: #009944; border-radius: 50%; display: inline-block; margin-left: 5px; width: 22px; height: 22px; line-height: 22px; text-align: center; font-family: Arial;}
.archive_box .year_tag{position: absolute; left: 0; top:-5px; background-color: #009944; padding:2px 10px; border-radius: 5px; color: #fff;}
.archive_box .year_tag a{color: #fff; font-family: Arial;}
.archive_box ul:nth-child(odd) .year_tag{background-color: #ffa900;}
.archive_box ul::before{content: ''; position: absolute; left: 90px; top: 10px; z-index: 0; width: 1px; height: 100%; background-color: #e6e6e6;}
.archive_box ul::after{content: '';position: absolute; left: 83px; top:2px; z-index: 10; width: 13px; height: 13px; line-height: 20px; background-color: #fff; color: #5FB878; border-radius: 50%; text-align: center; cursor: pointer; border:1px solid #5FB878;}

因为本博微博栏目日志无标题,在archive.php模板中做了标题为空的情况下判断输出HTML内容。

<?php if(have_posts()) : ?>
<?php while(have_posts()) :the_post(); ?>
<?php if (strlen(get_the_title()) == 0) : ?>
<li class="item"><span class="other"><span class="time">
            <?php the_time('Y/m/d H:i'); ?></span>
        <?php edit_post_link(); ?></span><a href="<?php the_permalink() ?>" class="tit" title="<?php the_title(); ?>">微博无标题日志</a></li>
<?php else: ?>
<li class="item"><span class="other"><span class="time">
            <?php the_time('Y/m/d H:i'); ?></span>
        <?php edit_post_link(); ?></span><a href="<?php the_permalink() ?>" class="tit" title="<?php the_title(); ?>">
        <?php the_title(); ?></a></li>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

最终效果图:

归档