it-swarm.com.de

das Widget sollte das Post-Archiv nach Jahr und auf Klick auch nach Monat anzeigen

Ich möchte die Post-Archive wie auf diesem Bild anzeigen. Wird nach Jahr und Klick angezeigt und sollte die Monate eröffnen. Ich bin mir nicht sicher, wie ich das angehen soll. Würden Sie das standardmäßige WordPress-Archiv-Widget anpassen?

 enter image description here 

2
MrKainig

Ich habe das für einen Kunden gemacht und es sah so aus:

Der PHP Code:

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

Das Archiv überschreibt den Filter:

/*
 * 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);

Der CSS-Code:

.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;
}

Der Javascript-Code:

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

Das Endergebnis:

 enter image description here 

1
Ciprian