WordPress & Webwork

WordPress: einzelne Artikel in der Übersicht kategorierbasiert stylen

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.

11 Reaktion(en)

  1. Perun

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

  2. Klaus

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

  3. Pingback: Tweets that mention Peruns Weblog -- Topsy.com

  4. Pingback: WordPress: einzelne Artikel in der Übersicht kategorierbasiert stylen | Peruns Weblog

  5. Pingback: Tutorial: Post kategoriebasiert gestalte… | Wordpress Lesezeichen

  6. Pingback: Kommentare auf Seiten (Pages) | WordPress-Buch

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!