Codeschnippsel II – Grafik bei aktuellstem Beitrag anzeigen

Um beim neusten Beitrag der Seite eine Grafik anzuzeigen, muss am Template geschraubt werden (und natürlich eine passende Grafik hochgeladen werden…). Also Eins nach dem Andern:

1. Schöne Grafik basteln (wie links gezeigt), wiedererkennbar benennen und – am besten ins Templateverzeichnis – hochladen.

2. Die CSS-Datei des Templates bearbeiten und folgende Zeilen hinzufügen. Anschließend speichern – klar!

.entry_firstpost{
background: url(bilder/latest.gif) no-repeat bottom right;
border: 1px solid #fff;
padding: 0px;
margin: 0px;
}

3. Die eigentliche Änderung im Template, also in der index.php, wird im dritten Schritt erledigt. In der Regel wird es in deiner index.php irgendwo einen <div>-Container geben, der die Postings enthält. Wahrscheinlich nennt er sich <div class="post"> oder ähnlich. In diesen Container, also zwischen <div> und </div> muss der folgende Code kopiert werden (wie immer kann das bei dir völlig anders aussehen, dies dient nur mal als grobe Struktur).

<div class="entry<?php if(is_home() && $post==$posts[0] && !is_paged()) echo '_firstpost';?>">
<h3 class="storytitle" id="post-<?php the_ID(); ?>"><a xhref="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="storycontent">
<?php the_content(__('(mehr...)')); ?>
</div>
</div>

Sämtlicher grün dargestellter Code stammt aus meinem bestehenden Template – wichtig ist, dass um den Container der Postings ein weiterer gelegt wird. Im Prinzip prüft die Zeile nur, ob der angezeigte Beitrag der erste ist und setzt, wenn dies zutrifft, eine DIV-Klasse entry_firstpost. Dieser Klasse haben wir in der css das Hintergrundbild latest.gif mit den festen Koordinaten „unten rechts“ (bottom right) zugeordnet. Angezeigt wird das Bild nicht typischerweise als Kacheln, sondern nur ein einziges Mal (no-repeat). Das war’s auch schon, speichern und los!