wp_list_categories span für die Anzahl und CSS Lösung

wp_list_categories span

Weil ich das die Tage wieder gefragt wurde, wie ich es gemacht habe, dass auf meiner Bastelseite, die Artikelanzahl innerhalb einer Kategorie dargestellt wird. Schön am rechten Rand und dennoch die Links gut klickbar sind. Ich bringe hier die simple Lösung für die functions.php – und meine CSS Lösung. Bei beidem gibts sicher mehrere Möglichkeiten, keine Frage, ich bringe eben eine.

Vorgabe ist also: die Anzahl der Artikel pro Kategorie soll angezeigt werden. Diese Ziffern sollen rechtsbündig sein, weil man so besser lesen kann, es auch besser aussieht. Und die Links sollen Blockelemente sein, damit sie eine große Klickfläche haben.

In die functions.php des verwendeten Themes oder besser als Modul in das Toolbox Plugin kommt folgendes:


add_filter('wp_list_categories', 'cat_count_span');
function cat_count_span($links) {
  $links = str_replace('</a> (', '</a> <span class="catspan">(', $links);
  $links = str_replace(')', ')</span>', $links);
  return $links;
}

Somit wird überall wo Du wp_list_categories verwendet und die Anzahl der Artikel pro Kategorie anzeigen läßt diese Zahlen in ein span mit der CSS Klasse catspan angezeigt.

ich zeige hier nur die letzten Teile des relevanten HTML an.

...abgelegten Artikel ansehen">Karten</a> <span class="catspan">(111)</span>
 
...abgelegten Artikel ansehen">Scrapbooking</a> <span class="catspan">(4)</span>


Jetzt habe ich die Gelegenheit diese Zahlen eigens zu gestalten.

CSS für dieses Beispiel

Diese Kategorienauflistung ist in der Sidebar, also gibts die übergeordnete CSS Klasse „widget“ oder jede andere CSS Klasse, die sich dazu eignet genau diese Links anzusprechen.

.widget a{
display:inline-block; 
    *display: inline; 
    *zoom: 1;
width:75%;
}
.widget li{
clear:right;
}
.catspan{
float:right;
display:inline-block; 
    *display: inline; 
    *zoom: 1;
font-size:.9em;
}

Auf meiner Bastelseite sind 99% aller Breitenangaben in Prozent angegeben. Sie hat ein responsive Layout und so machte ich es daher auch bei den Links. 75% der verfügbaren Fläche der Listenelemente li werden für die Links verwendet.

Die Listenelemente müssen das „Fließen“ wieder aufheben, das die span Tags haben, sonst zerfließt die Sidebar eventuell ;) Das sieht oftmals sehr kreativ aus.

Das wars. Ich hoff das hat die Frage beantwortet, die ich bekommen hatte via E-Mail und vielleicht hilfts auch den ein oder anderen weiter.

1

Ein Beitrag zu “wp_list_categories span für die Anzahl und CSS Lösung

  1. Kommentar Autor
    Lukas Liegebank
    Kommentar

    Oha, dass ich da auch nicht von selbst drauf gekommn bin! :) Hatte den Bindestrich bei „font-size“ vergessen…. *schäm*

    Danke und lieben Gruß,
    Lukas