我为一位客户做了这件事,看起来是这样的:
PHP代码:
<dl class="tree-accordion">
<?php
$currentyear = date("Y");
$years = range($currentyear, 1950);
foreach($years as $year) { ?>
<dt><a href=""><i class="fa fa-fw fa-plus-square-o" aria-hidden="true"></i> <?php echo $year; ?></a></dt>
<?php
$archi = wp_get_archives(\'echo=0&show_post_count=1&type=monthly&year=\' . $year);
$archi = explode(\'</li>\', $archi);
$links = array();
foreach($archi as $link) {
$link = str_replace(array(\'<li>\', "\\n", "\\t", "\\s"), \'\' , $link);
if(\'\' != $link)
$links[] = $link;
else
continue;
}
$fliplinks = array_reverse($links);
if(!empty($fliplinks)) {
echo \'<dd>\';
foreach($fliplinks as $link) {
echo \'<span>\' . $link . \'</span>\';
}
echo \'</dd>\';
} else {
echo \'<dd class="tree-accordion-empty"></dd>\';
}
?>
<?php } ?>
</dl>
存档覆盖筛选器:
/*
* Add filter to query archives by year
*/
function newmarket_getarchives_filter($where, $args) {
if(isset($args[\'year\'])) {
$where .= \' AND YEAR(post_date) = \' . intval($args[\'year\']);
}
return $where;
}
add_filter(\'getarchives_where\', \'newmarket_getarchives_filter\', 10, 2);
CSS代码:
.tree-accordion {
line-height: 1.5;
}
.tree-accordion dt, .tree-accordion dd {}
.tree-accordion dt a {
display: block;
}
.tree-accordion .fa {
color: #666666;
}
.tree-accordion dd a {}
.tree-accordion dd span {
display: block;
}
.tree-accordion dd {
margin: 0 0 0 20px;
}
Javascript代码:
jQuery(document).ready(function(){
var allPanels = jQuery(\'.tree-accordion > dd\').hide();
jQuery(\'.tree-accordion > dt > a\').click(function() {
$target = jQuery(this).parent().next();
if(!$target.hasClass(\'active\')) {
allPanels.removeClass(\'active\').slideUp();
$target.addClass(\'active\').slideDown(100);
}
return false;
});
jQuery(\'.tree-accordion-empty\').prev().hide();
});
UPDATE: 逐年逐月删除:
更改此行:
$link = str_replace(array(\'<li>\', "\\n", "\\t", "\\s"), \'\' , $link);
收件人:
$link = str_replace(array(\'<li>\', "\\n", "\\t", "\\s"), \'\', $link);
$link = str_replace($year, \'\', $link);
最终结果: