dynamicinternet Wir machen Ihr Web dynamisch!

Portfolioseite mit WordPress

geschrieben von Micha am 23. September 2008 | 10 Kommentare

Irgendwo las in einem amerikanischen Blog über die Idee, mit dem Linkmanager von WordPress eine Portfolioseite zu erstellen. Leider finde ich die Url zu dem Originalbeitrag nicht mehr. Egal, ich baue es einfach mal nach.

Zuerst gehen wir im Backend auf Verwalten->Link-Kategorien und legen eine neue Link-Kategorie Portfolio an. Einziger Nachteil bei den Link-Kategorien ist, man kann keine Unterkategorien anlegen. Ok, nachdem die Kategorie Portfolio angelegt wurde, füllen wir sie jetzt mit Inhalten. Dazu wechseln wir im Backend auf Verwalten->Links und können einen neuen Link hinzufügen.

Folgende Felder stehen für unser Portfolio zur Verfügung:

• Name – Name der Webseite
• Web-Adresse – Url der Webseite
• Bezeichnung – für alt- und title-Attribut
• Kategorien – hier kommt der Haken bei Portfolio
• Target – hier lasst ihr die Einstellung bei keins!
• Link-Beziehungen – brauchen wir nicht
• Erweitert/Bildadresse – die Url zu dem Screenshot der Webseite
• Erweitert/Notizen – eine Beschreibung der Webseite

Nachdem das Portfolio gefüllt ist, brauchen wir eine Seite, auf der wir das Portfolio darstellen können. Dazu nehmen wir aus dem Themeordner, den wir benutzen, die page.php und speichern sie unter dem Namen portfolio.php ab. Jetzt müssen wir noch ein paar kleine Änderungen vornehmen. An erster Stelle im Code der Seite schreiben wir

<?php
/*
Template Name:  Portfolio
*/
?>

Damit haben wir ein neues Template geschaffen. Jetzt müssen wir nur noch die Link-Kategorie Portfolio auslesen.

Dazu benutzen wir die WordPress-Funktion get_bookmarks(). Im Gegensatz zu wp_list_bookmarks() bekommen wir mit get_bookmarks() ein Objekt zurückgeliefert, welches wir selbst manipulieren können.

In der functions.php, die jedem Theme beiliegen sollte, schreiben wir eine Funktion, die uns das Portfolio darstellt.

function my_portfolio() {
	$html = "";
	$bookmarks = get_bookmarks('category_name=portfolio');
	if ($bookmarks) {
		$html = "<ul>";
		foreach ($bookmarks as $bookmark) {
			$html .= "<li><h3>" . wp_specialchars($bookmark->link_name) . "</h3>";
			$html .= "<ul><li><a href='" . clean_url($bookmark->link_url) . "' title='" . wp_specialchars($bookmark->link_description). "' >";
			$html .= "<img src='" . clean_url($bookmark->link_image) . "' alt='". wp_specialchars($bookmark->link_description) ."' /></a></li>";
			$html .= "<li>Url: <a href='" . clean_url($bookmark->link_url) . "' title='" . wp_specialchars($bookmark->link_description). "' >";
			$html .= clean_url($bookmark->link_url) . "</a></li>";
			$html .= "<li>" . wp_specialchars($bookmark->link_notes) . "</li></ul></li>";
		}
		$html .= "</ul>";
	}
	return $html;
}

Jetzt müssen wir in der portfolio.php die Funktion aufrufen. Am besten unterhalb von the_content(). Also notieren wir in der porfolio.php

<?php echo my_portfolio();?>

Als letzte Maßname müssen wir noch die Portfolioseite erstellen. Beim Schreiben der Seite darauf achten, das ihr bei Seiten-Template Portfolio auswählt. Das wars.

Zum Schluß noch die ungeordnete Liste mit CSS zurechtstylen und fertig ist das Portfolio.