Beiträge in WordPress optisch trennen.

letztes Update:14.12.06 von

Es tauchte die Frage auf, wie man Beiträge in WordPress optisch trennen kann. Hier eine Lösung für das default Theme von WordPress.

Manch einer mag die Beiträge auf der Startseite seines Blogs oder beim Aufruf eines Archives optisch trennen. Andere Hintergrundfarbe, anderes Bild vielleicht.
In meiner Lösung nutze ich eine geordnete Liste. Im Prinzip genauso wie auch Kommentare jeweils anders dargestellt werden können.

Du findest hier die bereits veränderte Index.php des Original Default Themes (Kubrick) von WordPress. Das Prinzip muss für jede WordPress Version funktionieren. Genauso kannst Du dann auch die archive.php ändern. Nach diesem Code der Index.php zeige ich die nötigen Änderungen in der style.css auf . Wie immer: den Code nicht kopieren!

<?php get_header(); ?>
 
	<?php	$oddpost = 'altpost'; ?>
 
 
			<div id="content" class="narrowcolumn">
<ol class="post" >
	<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post(); ?>
 
 
		<li class="<?php echo $oddpost; ?>" id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
				<p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</li>
	<?php /* dies &auml;ndert die Artikeln  der Reihe nach */
if ('altpost' == $oddpost) $oddpost = 'erstpost';
else $oddpost = 'altpost';
?>
		<?php endwhile; ?>
</ol>
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
		</div>
 
	<?php else : ?>

Wenn Du diesen Code mit Deiner Original Index.php vergleichst erkennst Du was ich änderte.

Eine geordnete Liste liefert automatisch das Zählen. Liefert uns den li tag, der die jeweils unterschiedlichen classen dann erhält.

Wichtig: Die Liste muss vor

<?php if (have_posts()) : ?>

beginnen und nach

<?php endwhile; ?>

geschlossen werden.

Änderungen in der style.css

So sieht die Angabe für die class post aus:

.post {
	margin: 0 0 40px;
	text-align: justify;
	}

Mit der kannst Du das prinzipielle Aussehen Deiner Artikel steuern.
Mit den beiden folgenden classes kannst Du die Farben ändern und mehr, je nachdem was Du magst. Hier sind nur die Farbangaben anders!

.altpost {
	background-color: #f8f8f8;
       color:inherit;
	}
 
.newpost{
      	background-color: #cacaca;
       color:inherit;
     }

So eine geordnete Liste zeigt standardmäßig Zahlen an. Die zählt durch: 1,2,3, . Dies kann man mit der Angabe list-style-type gestalten oder verhindern.

 ol.post li.erstpost,
ol.post li.altpost{list-style-type:none;}

So das wäre es. ;)

…wie immer:Fragen einfach fragen

6 Kommentare zu "Beiträge in WordPress optisch trennen."

  1. goofffy

    30.10.08 um 10:08

    Excellent blog and very interesting information. And the information actual for today?

    tovar.dn.ua

  3. Thomas

    16.03.09 um 19:00

    Hallo Monika,

    wieder einmal bin ich durch deine Seite inspiriert… :) Eine Frage… Geht das auch ohne eine “OL” also nur mit “DIV’s”? Dann bräuchte ich nicht wieder meine index umschreiben… :)

    Viele Grüße
    Thomas

  5. David

    23.11.09 um 20:54

    Kann ich das auch abwechselnd machen? Jetzt ist ja immer der Erste Post anders oder?
    Ich möchte jeden 2ten Artikel in einen andernen hintergrundfarbe haben wie setz ich das um?

  6. texto

    24.11.09 um 00:47

    das da oben zeigt 1 Artikel so an den nächsten anders, wenn Du die Sache via style.css dann auch stylst.