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 = '

';
$cateargs = array(
'hide_empty' => $hide_empty
);
$categories = get_categories($cateargs);
foreach($categories as $category) {
$output .= '

' . $category->name.'

'. $category->description . '

'. $category->count . '

';
$args = array(
'category' => $category->term_id,
'numberposts' => -1
);
$output .= '

';
$posts = get_posts($args);
foreach($posts as $post){
$output .= '

'.$post->post_title.'

';
}
$output .= '

';
}
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]
如果和你的样式发生了冲突也可以采用以下代码来调用自定义页面。

共有 12 条评论

发表评论

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