WordPress 按分类排序的文章归档

BY BIGFA：上次写的时光轴归档流传范围之广远超我的想象，但是已经因为某些原因西去了，自从恢复博客我也没新建归档页面，恰好看见 z 大写了写的归档，琢磨着自己也写一个，考虑到按照时间的已经没什么可折腾的了索性写了个按照分类的。

感受地址：http://www.lesliehsia.com/archive

说明

• 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:” 珞凡 Nuomens”;
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); ?>

以上！