WordPress归档按分类排序

接着昨天的话说,今天还是仍不住来一发!话说,这个博从12年初到现在,转眼都快要三年了,240多篇文章放在归档里一长列,许多人包括我自己都觉得这个梯子太长了,即不美观,也影响浏览欲望,所以打算换个形式。前段时间在大发那看到了按分类排序的方法,觉得不错,于是打算转来折腾。

为了保护脑蛋白,先把方法转在这,明晚再折腾。效果感受地址http://www.xinsenz.com/fenlei,方法来自:http://fatesinger.com/73788

效果说明:

  • 使用了CSS 隐藏了部分文章(参考文章),使每个分类只显示5篇文章,当然hover 的时候会全部显示
  • 函数自带一个hide_empty参数,是否隐藏没有文章的分类

实现方法:
下面的代码加入到functions.php中

function get_archive_by_category($hide_empty = false){
    $output = '<div class="archive-category-groups">';
    $cateargs = array(
        'hide_empty' => $hide_empty
    );
    $categories = get_categories($cateargs);
    foreach($categories as $category) {
        $output .= '<div class="archive-category-group"><h2 class="archive-category-title"><a href="' . get_category_link( $category->term_id ) . '" title="' . $category->name . '" ' . '>' . $category->name.'</a> </h2><h3 class="archive-category-description">'. $category->description . '</h3><div class="archive-category-postcount v-textAlignCenter">'. $category->count . '</div>';
        $args = array(
            'category' => $category->term_id,
            'numberposts' => -1
        );
        $output .= '<div class="archive-category-posts">';
        $posts = get_posts($args);
        foreach($posts as $post){
            $output .= '<div class="archive-category-post"><a class="archive-category-post-title" href="'.get_permalink($post->ID).'">'.$post->post_title.'</a><time class="archive-category-post-time">'.human_time_diff(strtotime($post->post_date_gmt),time()).' ago </time></div>';
        }
        $output .= '</div></div>';
    }
    return $output;

}
function archive_by_category_shortcode($atts, $content=null){
    extract( shortcode_atts( array(
            'hide_empty' => false,
        ),
        $atts ) );
    return get_archive_by_category($hide_empty);
}
add_shortcode('archivebc','archive_by_category_shortcode');

css代码:

.archive-category-groups {
    margin:20px 0
}
.archive-category-groups:after {
    content:"Code by bigfa";
    display:block;
    text-align:right;
    font-style:italic;
    color:rgba(0,0,0,0.6);
    margin-top:10px;
    font-size:12px;
}
.archive-category-title {
    font-size:22px;
    margin-top:20px
}
.archive-category-postcount {
    height:41px;
    width:41px;
    background-color:#eee;
    border-radius:100%;
    font-family:fatesinger;
    line-height:40px
}
.archive-category-posts {
    border-left:1px #eee solid;
    margin-left:20px;
    padding:20px;
    position:relative;
}
.archive-category-posts:after {
    background-color:#eee;
    border-radius:100%;
    content:"";
    height:9px;
    left:-5px;
    position:absolute;
    bottom:0px;
    width:9px;
}
.archive-category-post {
    margin:5px;
    position:relative
}
.archive-category-post:before {
    background-color:#eee;
    border-radius:100%;
    content:"";
    height:7px;
    left:-29px;
    position:absolute;
    top:10px;
    width:7px;
}
.archive-category-post:nth-child(n+6){
    display:none
}
.archive-category-group:hover .archive-category-post:nth-child(n+5){
    display:block
}
.archive-category-post-title:hover {
    color:#c80f32
}
.archive-category-post-time {
    font-size:12px;
    font-style:italic;
    margin-left:5px;
    color:rgba(0,0,0,0.6)
}
.archive-category-description {
    color:rgba(0,0,0,0.6);
    margin-bottom:10px
}
.archive-category-description:before {
    display:block;
    width:30%;
    height:1px;
    background-color:#eee;
    margin:10px 0;
    content:""
}

使用方法:
新建页面,添加以下短代码即可

[archivebc hide_empty = 0]

如果和你的样式发生了冲突也可以采用以下代码来调用自定义页面。

<?php echo get_archive_by_category(true); ?>

共有 12 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注