Schweizer WordPress Magazin

Anleitungen

HowTo: Portfolios verwalten mit WordPress

Wer im und mit dem Web arbeitet, hat bestimmt auch eine eigene Website, die sich an potentielle Kunden richtet und alle aktuellen Projekte auflistet. Ich spreche von einem Portfolio. Und als WordPress-versierter Webworker setzt man ein Portfolio lieber mit seinem Lieblings-Werkzeug um, anstatt alles von Hand zu verwalten.

Ich habe mir also einmal drei Gedanken dazu gemacht, wie man denn ein Portfolio am besten umsetzen könnte. Insgesamt habe ich mich auf diese zwei Möglichkeiten festlegen können:

1. Die kurze Beschreibung der Website wird wie gewöhnlich im Editor geschrieben, der Screenshot wird dann als Custom Field eingebunden. Deshalb brauchen wir auch zwei benutzerdefinierte Felder: Eines in voller Grösse und ein Thumbnail.
2. Das Bild wird hochgeladen und im Editor eingefügt. Die Beschreibung wird dann in ein Custom Field geschrieben. WordPress erstellt nämlich automatisch Thumbnails der hochgeladenen Bilder!

Wie man sieht, sind diese zwei Techniken jeweils nur das Gegenteil der anderen Möglichkeit. Was uns übrigens heute dabei hilft, den Artikel möglichst kurz und trotzdem umfangreich genug zu halten, ist der Aspekt, dass die WordPress Community mittlerweile auch sehr gute Portfolio-Themes veröffentlicht hat und man davon einige Dinge abschauen kann...

Custom Fields auslesen

Da wir die benutzerdefinierten Felder für unsere Zwecke verwenden, zeige ich euch, wie man den Inhalt dieser Felder ganz einfach auslesen kann. Hat ein Custom Field zum Beispiel den Namen image und den Wert image.jpg kann man den Dateinamen später in der Bilder-URL verwenden, um z.B. nur die Screenshots der letzten Projekte anzuzeigen.

Aber wie geht das jetzt schon wieder, wie liest man diese Felder aus? Dazu fügt man zuerst folgenden Code in die functions.php des aktuellen Themes ein:

<?php
function get_custom_field_value($szKey, $bPrint = false) {
	global $post;
	$szValue = get_post_meta($post->ID, $szKey, true);
	if ( $bPrint == false ) return $szValue; else echo $szValue;
}
?>

Falls keine functions.php vorhanden ist, erstelle einfach eine. Das ist aber noch nicht alles, jetzt müssen wir die Werte auch noch auslesen. Das kann man mit Hilfe dieses Dreizeilers erreichen:

<?php if ( function_exists('get_custom_field_value') ) {
        get_custom_field_value('description', true);
} ?>

Hierbei ist description der Name des Feldes. Falls euer Custom Field anders heisst, müsst ihr es nur hier anpassen.

Diese Technik benutzt auch das Sharpfolio Theme, wie man bei dieser Anleitung sehen kann. Siehe dazu auch die Auflistung weiter unten im Artikel!

Zufällige Referenz einblenden lassen

Ich möchte es nur noch einmal kurz erwähnen, aber WordPress hat schon alles eingebaut, was wir dafür benötigen. Um zufällige Beiträge - oder eben Referenzen - anzuzeigen, benutzen wir die Funktion WP_Query, welche bereits in WordPress 1.5 eingeführt wurde.

<?php $the_query = new WP_Query('showposts=1&orderby=rand');
while ($the_query->have_posts()) : $the_query->the_post();
$do_not_duplicate = $post->ID; ?>

<div class="random portfolio">
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark"
		title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<?php the_content(); ?>
		<?php if ( function_exists('get_custom_field_value') ) {
		get_custom_field_value('description', true); } ?>
	</div>
</div>

<?php endwhile; ?>

Portfolio Themes

Der einfachste Weg, ein Portfolio zu realisieren, ist die Benutzung eigens dafür erstellter Themes. Das liegt dann aber nicht nur an der eigenen Faulheit, sondern daran, dass die Funktionalität und das Aussehen meistens sehr überzeugend sind. Hier eine Auflistung besonders empfehlenswerter Themes:

1. Portfolio WordPress Theme - Leider scheint die Website down zu sein, aber die Demo funktioniert!
   

   Portfolio WordPress Theme

   Download | Demo

2. Portfolio Press - Tolles Design mit nettem grünem Logo.
   

   Portfolio Press

   Download | Demo
   

3. Fresh Folio - Dieses Theme hat den Zusatz Premium echt verdient!
   

   Fresh Folio

   
   Download | Demo

4. Sharpfolio - Wie bei den obigen Beispiel wird die Beschreibung jeweils als Custom Field angegeben.
   

   Sharpfolio

   Download | Demo

5. ProudFolio - Wie auch Fresh Folio ein Theme aus dem Hause Woo Themes.
   

   ProudFolio

   Download | Demo

Und das waren noch nicht einmal alle Themes! Für weitere Portfolio-taugliche Designs besucht am besten die folgenden zwei Seiten:

• 7 Portfolio WordPress Themes
• Portfolio WordPress Themes Gallery