Mit einem Zähler kann jeder Artikel auf der Startseite von Wordpress über die CSS-Datei unterschiedlich gestaltet werden. So kann im Design, zum Beispiel, der erste, der zweite und der dritte Artikel ein anderes Aussehen bekommen.
In Wordpress hat jeder Artikel mit “the_id()” seine eigene Identifikation und mit “post_class()” werden verschiedene Klassen vergeben. Das nützt aber wenig wenn zum Beispiel die ersten drei Artikel auf der Startseite jeweils eine andere Ansicht haben sollen.
Um die Ansicht in der style.css gestalten zu können, wird mit Hilfe von einem Zähler, jedem Beitrag eine eigene ID gegeben.
Der Code erstellt für jeden Artikel automatisch eine eigene div-id. Eingefügt wird der Code dort wo der Loop(Schleife) ist, das ist meist in der “loop.php” oder in der “index.php”.
Beispiel:
<?php get_header(); ?>
<div id="content">
<?php $counter = 0; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); // Anfang des Loop ?>
<div id="post-style_<?php echo $counter; ?>">
<?php $counter++; ?>
.....
</div>
<?php endwhile; // Ende des Loop ?>
- “$counter = 0” muss vor dem Loop(Schleife) stehen.
- “<div id="post-style_” wurde wegen der besseren Übersicht, mit einem Unterstrich versehen.
- “echo $counter” wird direkt an die ID angefügt, vor dem “>.
- “$counter++” erhöht die Zahl um eins in der ID für jeden Beitrag.
- “</div>” vor dem Ende des Loop(Schleife).
Jetzt steht der kreativen Gestaltung nichts mehr im Weg.
In der style.css kann das Design nach eigenen Wünschen verändert werden.
Beispiel style.css
#post-style_0 {
background: red;
}
#post-style_1 {
background: green;
}
Unterschiedliche Hintergrundfarbe für den ersten und zweiten Artikel.
Weitere Informationen:
Sidebar oder Footer-Widget erstellen
Sidebar in verschiedenen Seiten
Navigationsmenü in Wordpress Themes einbauen
Formatvorlagen PostFormats in Wordpress