Balkendiagramm Archiv mit PHP und CSS

Vor zwei Tagen hat David mein Archiv auf seiner Webseite empfohlen. Darüber haben sich noch andere Leute gefunden, die gerne ein ähnliches Archiv haben wollen würden. Am besten mit Wordpress. Von daher arbeitet ich in meinem Tutorial hier auch mt einigen Wordpress-internen Funktionen. Das ganze kann man sich aber leicht für andere CMS' umschreiben (hab noch eine Processwire-Version auf Lager).

Spezielle Funktionen definieren

Damit man für jeden Monat ein passenden Balken generieren kann, brauch man noch ein paar Informationen aus der Datenbank, die man au normalem Wege so nicht abrufen könnte. Von daher muss man die functions.php seines Themes noch um zwei Funktionen erweitern:

if(!function_exists('get_archiv_array')) {

    function get_archiv_array() {

        global $wpdb;

        $prefix = $wpdb->prefix;

        $querystr = "   SELECT YEAR(post_date) AS 'year',

                        MONTH(post_date) AS 'month',

                        count(ID) as posts FROM ".$prefix."posts

                        INNER JOIN ".$prefix."term_relationships ON(".$prefix."posts.ID = ".$prefix."term_relationships.object_id)

                        INNER JOIN ".$prefix."term_taxonomy ON(".$prefix."term_relationships.term_taxonomy_id = ".$prefix."term_taxonomy.term_taxonomy_id)

                        WHERE ".$prefix."term_taxonomy.taxonomy = 'category'

                        AND ".$prefix."posts.post_status = 'publish'

                        AND ".$prefix."posts.post_type = 'post'

                        AND post_date >=DATE_SUB(NOW(),INTERVAL 12 MONTH)

                        GROUP BY YEAR(post_date), MONTH(post_date)

                        ORDER BY post_date DESC";

$years = $wpdb->get_results($querystr);
return object2array($years);
}
}

if(!function_exists('object2array')) {
function object2array($obj) {
$_arr = is_object($obj) ? get_object_vars($obj) : $obj;
foreach ($_arr as $key => $val) {
$val = (is_array($val) || is_object($val)) ? object2array($val) : $val;
$arr[$key] = $val;
}
return $arr;
}
}

Archiv-Template erstellen

Ich denke, wie man für eine Seite in Wordpress ein spezielles Template auswählt sollte klar sein. Deshalb gehe ich darauf hier nicht weiter ein.

Für das Archiv sollte man sich unbedingt ein extra Template anlegen. Der folgende Code muss dann einfach an der Stelle eingefügt werden, an der das Diagramm erscheinen soll.

<div id="archives">

<?php

$month_names = array(

       '1' => 'Jan',

       '2' => 'Feb',

       '3' => 'Mrz',

       '4' => 'Apr',

       '5' => 'Mai',

       '6' => 'Jun',

       '7' => 'Jul',

       '8' => 'Aug',

       '9' => 'Sep',

       '10' => 'Okt',

       '11' => 'Nov',

       '12' => 'Dez',

);

$max_width = 600; // Die Breite, die das Diagramm haben soll
$domain_url = 'http://domain.de/'; // Hier einfach die URL eures Wordpress-Blogs eintragen

$archives = get_archiv_array();
krsort($archives);
$width = floor(($max_width-count($archives))/count($archives));
foreach($archives as $month) {
echo '<div class="month" style="width:'.($width+1).'px;">
<a href="'.$domain_url.$month['year'].'/'.str_pad($month['month'], 2, "0", STR_PAD_LEFT).'/" class="bar" style="left:'.(($width+1)*$i).'px;width:'.$width.'px;height:'.((int)$month['posts']*3).'px;">'.$month['posts'].'</a>
<span class="name"><a href="'.$domain_url.$month['year'].'/'.str_pad($month['month'], 2, "0", STR_PAD_LEFT).'/">'.$month_names[$month['month']].'
'.$month['year'].'</a></span>
</div>';
$i++;
}
?>
</div>

Das Design

Das Design könnt ihr natürlich beliebig anpassen. Hier mal der CSS-Teil meines etwas älteren Wordpress-Themes für das Archiv:

#archives {

height:200px;

float:left;

display:block;

position:relative;

}

#archives .month {
float:left;
height:245px;
text-align:center;
}

#archives .month a.bar {
float:left;
border-bottom:0px !important;
background:#000;
margin-right:1px;
display:block;
bottom:0px;
position:absolute;
opacity:0.4;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
color:#fff !important;
padding-top:5px;
font-size:12px;
}

#archives .month a.bar:hover {
opacity:1;
}

#archives .month span.name {
float:left;
margin-top:205px;
text-align:center;
float: left;
width: 100%;
font-size:12px;
color:#999;
line-height: 18px !important;
}

#archives .month span.name a {
color:#999;
}

#archives .month span.name a:hover {
border-bottom:1px solid #ddd;
color:#333;
}

So sollte das eigentlich funktionieren. Falls ihr noch Probleme oder Fragen haben solltet könnt ihr mich gerne per E-Mail, Twitter, Facebook oder Google+ kontaktieren - der Kommentarbereich ist zur Zeit im Umbau.