Schweizer WordPress Magazin

Anleitungen

Ein Magazin-Theme erstellen: Artikel mit Vorschaubildern

Heute werde ich in einem kleine Crash-Kurs erkären, wie man auf der Blogstartseite neben jedem Beitrag ein kleines Vorschaubild anzeigen lassen kann. Dafür nutzen wir die benutzerdefinierten Felder, welche man bei jedem Beitrag hinzufügen kann.

Wenn du einen neuen Beitrag schreibst, siehst du beim Scrollen die Box „Benutzerdefinierte Felder“. Auf der linken Seite kannst du einen Schlüssel eingeben, rechts den dazu gehörigen Wert. Beim Schlüssel wird übrigens zwischen Gross- Kleinbuchstaben verwenden, also Achtung! In unserem Beitrag nutzen wir den Schlüssel „vorschaubild“ dem wir den Namen eines Bildes zuweisen.

Im Code-Editor deiner Wahl öffnest du home.php im Theme-Ordner. Wenn du keine home.php findest, öffnest du index.php, da dies von WordPress so vorgesehen ist. Gut zu wissen: Das Styling und die Ausrichtung der Bilder bleibt euch überlassen, da man doch sehr unterschiedliche Ergebnisse erzielen kann!

Wir suchen jetzt die berühmte Schleife ("Loop"), die in etwa so aussieht: <?php while (have_posts()) : the_post(); ?>
Die Schleife werden wir jetz tein wenig verändern:  Gleich danach, also in der Schleife drinnen, fügen wir folgendes ein: <?php if ( get_post_meta($post->ID, 'vorschaubild', true) ) { ?>
Wir fragen damit ab, ob es den Meta-Wert (benutzerdefiniertes Feld) „vorschaubild“ bei diesem Beitrag gibt. Das true steht dafür, dass wir nur den ersten Wert des Schlüssels haben wollen, damit bei mehreren Werten nicht gleich alle übergeben werden. Es ist somit kein Array. Am Ende ist übrigens noch eine geschweifte Klammer offen, zwischen die wir unseren Code einfügen. Zum Beispiel:

<div id="vorschaubild">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanenter Link zu <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/vorschaubild/
<?php echo get_post_meta($post->ID, "vorschaubild", true); ?>"
alt="Letzter Beitrag: <?php the_title(); ?>" width="50" height="50" />
</a>
</div>
<? } ?>

Die HTML-Tags dienen nur dem Optischen. Was uns interessiert ist das Bild, also der Wert von vorschaubild. Diesen geben wir mit Hilfe von <?php echo get_post_meta($post->ID, "vorschaubild", true); ?> aus. Allerdings müssen wir noch definieren, wo das Bild denn überhaupt liegt. In unserem Beispiel legen wir die Vorschaubilder immer im Ordner /mein-theme/images/vorschaubild/xy.jpg ab. Die Dateiendung spielt hierbei keine Rolle! Beim <img>-Tag habe ich noch die Höhe und die Breite festgelegt, damit auch wirklich alle Bilder gleich gross sind. Dann kannst du auch 200x200 grosse Bilder verwenden, die dann skaliert werden.

Wenn wir das ganze nochmals anschauen, sieht es so aus:

<?php if ( get_post_meta($post->ID, 'vorschaubild', true) ) { ?>
<div id="vorschaubild">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanenter Link zu <?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/vorschaubild/
<?php echo get_post_meta($post->ID, "vorschaubild", true); ?>"
alt="Letzter Beitrag: <?php the_title(); ?>" width="50" height="50" />
</a>
</div>
<? } ?>

Dies ist nur eine von vielen Möglichkeiten, wie man dieses Feature realisieren kann. Viele geben gleich eine ganze Bild-URL an, zum Beispiel bei hochgeladenen Grafiken. Möchte man ausserdem nur den neusten Artikel mit einem grossen Bild und die anderen mit Thumbnails versehen, kann man auch PHP-Skripte benutzen, um dies automatisch zu erledigen.

Vielleicht möchtest du auch weitere Informationen über die Funktion get post meta erhalten?