виджет должен отображать пост-архив по годам и по клику также по месяцам

Я хочу отобразить архивы сообщений, как показано на этой картинке. Показанный год и по щелчку, он должен открыть месяцы. Я не уверен, как подойти к этому, вы бы настроили стандартный виджет WordPress Archives?

введите описание изображения здесь

Solutions Collecting From Web of "виджет должен отображать пост-архив по годам и по клику также по месяцам"

Я сделал это для клиента, и он выглядел так:

Код 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(); }); 

Конечный результат:

введите описание изображения здесь

Виджет «Архивы» использует wp_get_archives() который, учитывая правильные аргументы (в частности format аргумент format ), может предоставить необходимую разметку. Я бы сказал, что настройка Widget – хорошее место для начала.