WordPress: einzelne Artikel in der Übersicht kategorierbasiert stylen

11 Kommentare

Bei meinem vorletzten WordPress-Auftrag ging es unter anderem darum, dass man die Artikel auf der Startseite (und anderen Übersichtsseiten) so ausgibt, dass die Artikel aus unterschiedlichen Kategorien sich auch visuell unterscheiden.

Also rein theoretisch: jeder einzelne Artikel, der durch den Loop ausgeliefert wurde, musste einen kategorieabhängigen Wert für den Klassenattribut bekommen.

Recht schnell bin ich auf die Lösung von Lorelle VanFossen gestoßen, die auch direkt funktioniert hat. Die Plugin-Suche ergab leider nichts konkretes … kann aber auch sein, dass ich einfach die Suchfunktion mit falschen Begriffen gefüttert habe. Im Endeffekt ist das auch Wurscht, weil sich die Code-Lösung bereits im praktischen Einsatz gut bewährt hat.

Folgenden PHP-Code baut man als erstes in die functions.php ein:

function the_category_unlinked($separator = ' ') {
$categories = (array) get_the_category();
$thelist = '';
foreach($categories as $category) {
$thelist .= $separator . $category->category_nicename;
}
echo $thelist;
}

Mit dem oberen Code hat man eine Funktion mit dem Namen <?php the_category_unlinked(); ?> erstellt, welche die Kategorienamen der einzelnen Artikel ausliest. Zum Einsatz kommt die Funktion get_the_category(). Den ausgelesenen Namen der Kategorie kann man dann zum Beispiel als einen Wert für den Klassenattribut einsetzen: 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="auszug<?php the_category_unlinked(' '); ?>">
<h4><?php the_time('d.m.Y'); ?> | <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>

Der relevante Code-Abschnitt aus dem oberen Bereich ist:

<div class="auszug<?php the_category_unlinked(' '); ?>">

Dadurch bekommt jeder Artikel auf der Startseite bzw. auf den Übersichtsseiten folgenden Klassenwerte: 

<div class="auszug kategoriename">

Nun kann man hergehen und die CSS-Datei mit entsprechenden Regeln füttern, zum Beispiel:

.wordpress { ... }
.internet { ... }
.blog-rss { ... }
...

Das wär’s. Eine sehr einfache Lösung.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

11 Kommentare

  1. WordPress bietet doch post_class() als Funktion bereits an, dass auch die Kategorien als Klassen beinhaltet – wo ist da jetzt der Vorteil zu deiner Lösung?

  3. @Jeriko,

    “meine” Lösung verursacht weniger Code:

    class=”post-1688 post hentry category-wordpress tag-wordpress-anpassung tag-wordpress-tipps”

    gegen, z. B.

    class=”auszug wordpress”

  4. Moin,

    gut zu wissen, wenn ich das mal brauche. 🙂

    Manchmal ist das was WP anbietet einfach zu umständlich.

    ist so ähnlich wie mit der body-class.

    Wenn ich das richtig gelesen habe kann man nur bestimmte Namen vergeben und wenn sie einem über den Weg laufen sind meist ein Strauß von Klassen mit festgetackert.

    ich schreib einfach das in meine header.php:
    <body id="<?php id-ID;?>”>

    Dann bekomme ich eine id pro Artikel und Seite und habe damit mehr als genug zur Gestaltung. 😀

  5. ups, 😳

    okay, aus Sicherheitsgründen hat er meinen geposteten Code nur unvollständig gepostet.

    sorry, da hatte ich nicht dran gedacht.

  6. […] This post was mentioned on Twitter by Sergej Müller, Vladimir Simovic. Vladimir Simovic said: Peruns Weblog: WordPress: einzelne Artikel in der Übersicht kategorierbasiert stylen: Bei meinem vorletzten WordPr… http://bit.ly/83So0I […]

  7. […] WordPress: einzelne Artikel in der Übersicht kategorierbasiert stylen | Peruns Weblog Comments0 Leave a Reply Click here to cancel […]

  9. Hallo Perun, ich würde gerne diese Frage an Dich stellen. Kann man in WordPress die Seiten (keine Artikel) auch kommentieren?

Kommentare sind geschlossen.