dynamicinternet Wir machen Ihr Web dynamisch!

Wordpress Custom Fields nutzen

geschrieben von Micha am 03. Juli 2007 | 17 Kommentare

Die Idee war, für meine Kateorie Tutorials ein Template zu bauen, wo neben der Überschrift ein Logo den Inhalt visualisiert.

Nach ein paar Überlegungen bin ich auf die benutzendefinierten Felder (Custom Fields) gekommen, welche ich in Verbindung mit ein bischen CSS benutze. Los gehts.

Was sind Custom Fields?

Wenn Ihr einen Beitrag schreibt, seht ihr unter Trackbacks eine Leiste “Benutzerdefinierte Felder”, welche ihr aufklappen könnt. Dort seht ihr Schlüssel und Wert.
Custom Fields sind also nichts weiter als ein Schlüssel/Wert Paar (key/value). Diese werden in der Datenbanktabelle wp_postmeta gespeichert.
Um diese Daten in eurem Blog darzustellen, gibt es den Template Tag the_meta(), der innerhalb des Loops verwendet werden kann.

Tragt bei einem Beitrag einfach mal als Schlüssel “Hallo” und als Wert “Welt” ein und drückt benutzerdefiniertes Feld hinzufügen. Wenn ihr das beim Bearbeiten eines Beitrages macht, braucht ihr den Beitrag nicht extra noch einmal speichern, der Wert wird bei hinzufügen schon in die Datenbank geschrieben.
Um nun unser tolles Schlüssel/Wert Paar unter dem Beitrag zu sehen, schreibt in die single.php unter the_content()

<?php the_meta(); ?>

Ihr seht nun eine Liste mit Hello und World. Klasse, oder? Nun zu meinem speziellen Kategorie Template.

Kategorie Template

Da ich dieses Template nur für meine Kategorie Tutorials haben möchte, schaue ich nach der ID der Kategorie “Tutorials” (Verwalten->Kategorien), welche bei mir die ID 5 hat.
Die Datei nenne ich category-5.php, da Wordpress diese Datei zuerst aufzurufen versucht, wenn nicht vorhanden nach category.php schaut, wenn die auch nicht da ist, nach archive.php und wenn die ebenfalls fehlt, die index.php aufruft.
Das ist die Template Hierarchie in Wordpress.

Da ich alle Tutorials untereinander haben möchte und nicht die in Wordpress voreingestellten 5 oder 10 Beiträge, muß ich diese Einstellung mit einem custom query überschreiben:

<?php get_header(); ?>

<div class="Euer_div">

<?php

 query_posts('cat=5&showposts=-1');

 $catergorytitle = get_catname(5);

?>

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

 <h2>Alle Beiträge der Kategorie <?php echo $catergorytitle; ?></h2>

<?php while (have_posts()) : the_post();?>

 <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_time('d.m.Y'); ?> - <?php the_title(); ?></a></h3>

 <?php the_excerpt(); ?>

<?php endwhile; ?>

<?php else : ?>

// Suchtemplate oder was auch immer

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Ihr müßt naturlich schauen, welche HTML Elemente in eurem Template verwendet werden.

Wenn wir jetzt diese Seite aufrufen, indem wir im Blog auf Kategorie Tutorials klicken, sehen wir alle Tutorials mit Überschrift und den ersten 55 Wörtern. Jetzt kommen die custom fields ins Spiel.

Ich habe momentan Turorials über die Ext Library und über Wordpress geschrieben. Also bearbeite ich alle meine Beiträge der Kategorie Tutorials und füge allen als Schlüssel “tutorial” hinzu, bei den Ext Beiträgen als Wert ext und bei denen von Wordpress als Wert wordpress.
Mit diesen Informationen erstelle ich einfach ein DIV um jedes Tutorial und weise dem DIV einfach als Klasse den entprechenden Wert zu. Verstanden?

<?php while (have_posts()) : the_post();?>

<?php $metadata = get_post_custom_values('tutorial'); ?>

 <div class="artikel <?php echo $metadata[0]; ?>">

 	<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_time('d.m.Y'); ?> - <?php the_title(); ?></a></h3>

 	<?php the_excerpt(); ?>

 </div>

<?php endwhile; ?>

Mit get_post_custom_value(‘tutorial’) holen wir uns den Wert, welcher als Array zurückgeliefert wird. Diesen Wert setzten wir bei dem DIV als zweite Klasse ein. Nun müssen wir noch ein paar Kleinigkeiten erledigen.

Der CSS Teil

Ich habe mir das Ext- und das Wordpress Logo als 40×40 Pixel JPG abgespeichert. Diese Logos nutzen wir jetzt in unserem Stylesheet.

// die erste Klasse artikel

.artikel{

 margin:20px 0;

}

.artikel h3{

 margin:10px 0 0 60px;

 font-size:1.2em;

}

.artikel p{

 margin:5px 0 0 60px;

}

// die zweite Klasse mit dem Werten aus dem custom Field

.ext{

 background:url(../euerPfadzu/extlogo.jpg) top left no-repeat;

}

.wordpress{

 background:url(../euerPfadzu/wordpresslogo.jpg) top left no-repeat;

}

Die Überschrift und der Text haben einen linken Abstand von 60 Pixel zu dem Logo. Wenn ihr mal vergeßt, bei einem Tutorial die benutzerdefinierten Felder einzutragen, passiert nichts, die zweite Klasse ist dann leer, es erscheint kein Logo, aber der Abstand zum Rand bleibt erhalten.

Das war nur eine Möglichkeit, die custom fields zu nutzen. Wem etwas anderes damit einfällt, der kann gerne einen Kommentar hinterlassen.