Kurz gesagt: Die Photoshop-Datei macht das Designen mit WordPress wesentlich einfacher, ein kurzer Einblick lohnt sich. Die Datei kann im Blogbeitrag heruntergeladen werden.

WordPress Backend Photoshop-Datei

WordPress Pretty Links Dashboard

URLs sind oft lang - zu lang um diese komfortabel bei Twitter zu posten oder via Email zu versenden. Es gibt mittlerweile viele Anbieter für Kurz-URLs, wie tinyurl oder bitly. Diese Anbieter nehmen ein lange URL (http://www.meine webseite.tld/Kategorie/Unterkategorie/Seitenname.html) und setzten dies in Kurzformat um (http://bit.ly/7GXGlc). Diese kurzen Links sind nicht nur komfortabler, sondern ermöglichen es Klickstatistiken anzufertigen, z.B. für Email-Newsletter. Immer öfters sieht man auch, dass Kurz-URLs benutzt werden um von einer Webseite zu einer anderen Seite zu linken.

Aus Sicht der Suchmaschinenoptimierung ist es sicher hilfreich die eigene Domain auch für Shortlinks zu verwenden. Schließlich weiß man nie genau wie lange es einen externen Anbieter überhaupt noch geben wird und ob diese Links nicht später einmal mit einem "nofollow" belegt werden.

Abhilfe schafft das Pretty Link Plugin für WordPress. Dies installiert innerhalb der WordPress Installation einen eigenen Kurz-URL Dienst. So lassen sich nicht nur kurze Links, bei Twitter posten, sondern man behält auch noch die volle Kontrolle. So lässt sich die Art der Weiterleitung und die "nofollow" Option für jeden Link einzeln einstellen.

WordPress Pretty Links Optionen

Zusätzlich stellt einem das Plugin recht ausführliche Statistiken zu jedem Link zur Verfügung. Alle Links lassen sich auch bestimmten Gruppen zuordnen, so verliert man auch bei einer großen Zahl an Links nicht den Überblick.

WordPress Pretty Links Statistik

Für alle, die in Sozialen Netzwerken aktiv sind und oft Kurz-URLs benutzen ist dies in sehr hilfreiches Plugin. Da es noch relativ neu ist, muss der Autor erst noch beweisen, dass er mit der (teils schnellen) Entwicklung WordPress Schritt halten kann, die Existenz der Pro-Version (mit mehr Features und Support) lässt allerdings darauf schließen, dass dies ein längerfristiges Projekt ist.

Über den Autor

Martin Metzmacher ist Verhaltenswissenschaftler, Blogger und selbstständiger Berater für WordPress SEO.
Er studiert Behavioural Science an der Radboud University Nijmegen und ist Gesellschafter der bit dynamics UG (haftungsbeschränkt), zuständig für den Bereich Internet Marketing. Mehr zum Thema Internet Marketing und Suchmaschinenoptimierung finden Sie auf seinem Blog Seriousmarketing.de.

Das ominöse Photoshop Plugin trägt den Namen „Divine“ und ist aktuell in der Betaversion 0.5 verfügbar (nur Windows). Laut Website des Projekts sollen insgesamt nur 4 Schritte nötig sein, bis man das fertige Theme benutzen kann. Das klingt natürlich viel zu einfach und auch das erstellte HTML und CSS soll sauber und das Theme widget-ready sein. Auch Photoshop Filter und Ebenen sollen problemlos funktioniern. Deshalb wollte ich das selber ausprobieren. Zum Glück gibt es zu jedem Schritt auch eine Videoanleitung.

Divine im Härtetest

Einschränkung in der Gratis-Version

Laut Anleitung soll ich also das Design im Photoshop öffnen und Divine starten. Dann muss man den einzelnen Elementen die jeweilige Funktion zuordnen (Titel, Kommentare, Artikeldatum, etc.) und es danach mit dem integrierten FTP-Uploader hochladen. Zu guter Letzt soll man das Theme im Browser betrachten können.

In meinem Fall wurde das Ganze leider nicht ganz sauber erledigt. Denn nachdem ich Divine gestartet habe, wurde mir prompt die erste Fehlermeldung angezeigt. Die Gratis-Version von Divine unterstützt nämlich nur Templates mit einer bestimmten Grösse. Nach Anpassung der Grösse konnte ich Divine zwar korrekt starten, doch mit keiner von drei PSD-Dateien, die mir gerade zur Verfügung standen,  konnte ich Divine wirklich nutzen.

Denn einzelne Elemente wie z.B. der Beitragstitel müssen auch mit "Post Title" betitelt sein, ansonsten weiss das Programm nicht, welche Funktion dazu passt. Doch der Aufwand dazu war viel zu gross und das Template für das Programm zu kompliziert aufgebaut. Nicht einmal das eine Template, welches praktisch so aufgebaut ist wie dieser Blog hier, wollte Divine annehmen.

Hier seht ihr noch ein komplizierteres Design, welches wohl eher für einen normalen Slicing-Vorgang geeignet ist als solch ein Plugin. Trotzdem war es der Versuch wert und hat gezeigt, dass Divine aktuell noch eine Baustelle ist. Hoffentlich ändert sich dies in künftigen Versionen.

Photoshop-Layout zum Testen von Divine

Grob zusammengefasst kann man sagen, dass HTML5 vor allem neue Elemente mit sich bringt, den Doctype auf <!DOCTYPE html> verkürzt und so manchen Browser an seine Grenzen bringt. Für Webdesigner bedeutet dies, dass sie Websites und natürlich WordPress Themes komplett anders aufbauen müssen. Denn mit folgendem HTML5-Code kann man momentan nicht viel anfangen:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<title>WordPress</title>
</head>
<body>
	<header>
		<h1>WordPress</h1>
		<h2>Yet another WordPress Blog!</h2>
	</header>
	<nav>
		<h3>Seitennavigation</h3>
		<ul>
			<li>...</li>
		</ul>
	</nav>
	<section>
		<h3>Blogpost</h3>
		<article><p>Lorem Ipsum dolor...</p></article>
	</section>
	<aside>
		<p>Geschrieben am <time datetime="2009-07-02">2. Juli 2009</time>
	</aside>
	<footer>
		<p>Lorem Ipsum dolor...</p>
	</footer>
</body>
</html>

Trotzdem sollen wir künftig die neue Schreibweise beherrschen, welche ein Kompromiss zwischen XHTML1 und HTML4 ist. Ich zum Beispiel kann mich momentan mit HTML5 überhaupt nicht anfreunden, da ich mit XHTML keine Probleme habe und es mit HTML5 schon wieder viele neue Elemente gibt. Dennoch hat sie auch etwas Gutes an sich: Blockelemente wie <p> und <h2> dürfen von Links umschlossen werden, was bisher als Fehler galt. Nun kann man also ganze Absätze wie folgt verlinken:

<a href="http://wp-magazin.ch/"><p>Lorem ipsum dolor... usw.</p></a>

Nun aber zurück zu den grossen Änderungen und die Auswirkung auf Content Management Systeme wie WordPress. Meines Erachtens dauert es noch eine ganze Weile, bis hier HTML5 fest in den Köpfen von Entwicklern und Endbenutzern verankert ist. Und solange noch viele alte Browser (z.B. Internet Explorer 6) im Umlauf sind, wird sich nichts verändern - HTML5 bleibt ein kleines Ding im grossen WWW.

Chris Coyier und Jeff Starr von Digging Into WordPress sind wohl bisher auch die Einzigen, die unter dem Namen H5 ein WordPress Theme auf HTML5-Basis erstellt haben - und das war gestern!

In diesem Artikel möchte ich das Thema WordPress und Ajax ein wenig genauer beleuchten: Wo kann man Ajax einsetzen? Wie nutze ich es? Welche Plugins gibt es?

Wo steckt überall Ajax drin?

Ajax-Technologie wird von allerlei Websites eingesetzt - und WordPress ist da keine Ausnahme. Derzeit nutzt der WordPress Core Ajax nur im Administrationsbereich, beispielsweise bei der Kommentar-Moderation und wenn man Elemente aus der Blogroll, Beiträge oder Kategorien löscht. Auch für die automatischen Sicherungen bei Beiträgen und Seiten wird Ajax benutzt.

Mittlerweile wird Ajax aber auch in vielen Themes und Plugins eingesetzt, zum Beispiel für Bewertungsfunktionen, wo die Angaben der Besucher im Hintergrund in die Datenbank geschrieben werden und die neue Bewertung ohne Neuladen der Seite erscheint. Wer im Plugin-Verzeichnis nach Ajax sucht, wird rasch fündig. Über 180 Erweiterungen sind bereits mit diesem Stichwort getaggt!

Javascript-Bibliotheken einbinden

Dank der von WordPress angebotenen Funktion wp_enqueue_script() können eigene Plugins ohne viel Aufwand auf vorhandene Javascript-Bibliotheken zugreifen. Will man beispielsweise die Thickbox benutzen, genügt der Aufruf wp_enqueue_script( 'thickbox' );.

Dass Thickbox die jQuery-Bibliothek benötigt, weiss WordPress schon, deshalb wird diese auch gleich eingebunden. Sollte ein anderes aktives Plugin schon jQuery oder Thickbox nutzen, wird diese Funktion nichtig, sodass die Dateien nicht doppelt eingebunden werden. Mehr zu diesem Thema findest du bei bueltge.de.

Alles andere ist eigentlich ein Kinderspiel, und wer auch sichere und leichte Ajax-Funktionen benutzen will, wirft einen Blick auf die vielen Tutorials, die es mittlerweile gibt. Mit ein bisschen PHP-Kenntnissen kann man die meisten Dinge eigentlich auch recht schnell in WordPress einbinden!

Cover

Es gibt bereits einige Bücher über WordPress, doch wenige gehen wirklich über die Grundlagen hinaus. Das englischsprachige Buch „How to be a Rockstar WordPress Designer“ widmet sich ganz der Theme-Erstellung für WordPress. Dabei setzt das Buch weder WordPress- noch PHP-Vorkenntnisse voraus, HTML und CSS sollten dem Leser allerdings vertraut sein.

In neun Kapitel führen die beiden Autoren Collis Ta’eed und Harley Alexander zunächst in die Theme Grundlagen von WordPress ein und zeigen worauf man als Designer achten sollten. Anhand von drei Theme Beispielen (Blog, Portfollio und normaler Seite) geht es Schritt für Schritt von einer Photoshop Vorlage über ein HTML Grundgerüst bis zu den fertigen Themes. Auf den über 300 Seiten des Buches werden nicht nur viele Anfänger Tipps zu WordPress Themes gegeben, die Autoren erklären auch den Einsatz von Page Templates, Custom Fields oder die Erstellung von Plugins. Im letzten Kapitel des Buches werden verschiedene Möglichkeiten präsentiert, wie man WordPress als Grundgerüst einer Webseite einsetzen kann. Die Beispiele reichen von E-Commerce Store über Video Portal bis zum Twitter Clone.

Das Buch ist also etwas für jede Gruppe von WordPress Nutzern. Neulinge, die Themes verstehen und anpassen wollen, Fortgeschrittene, die ihr erstes Theme erstellen, als auch für Experten die ihre Themes noch verbessern wollen.  Weitere Informationen über dieses Buch findet man auf der Seite des Verlages Rockable Press, dort findet man auch ein Inhaltsverzeichnis und das erste Kapitel, die Einführung in WordPress. Das Buch gibt es bisher ausschließlich als eBook im PDF Format für 29$ (Shop).

1. Valider Code

   Bestimmt das Wichtigste bei einem Theme: Um die Validität einer Website zu prüfen, geht man am besten auf w3.org. Hier die wichtigsten Links:

   • CSS Validation: http://jigsaw.w3.org/css-validator/
   • (X)HTML Validation: http://validator.w3.org/
   • RSS/Atom Validation: http://validator.w3.org/feed/
2. Live Demo

   Würdest du ein Theme downloaden, ohne es vorher zu testen? Also ich nicht und du sicher auch nicht. Deshalb ist es wichtig, dass der Besucher das Theme, welches man veröffentlicht, auch vorher testen kann. Ein Screenshot reicht eben nie wirklich...

3. Minimum an benötigten Plugins

   Es ist gut, wenn ein Theme verschiedene Plugins unterstützt, ohne dass man irgendwelche Anpassungen tätigen muss. Schlecht wird es nur dann, wenn man effektiv ein Plugin benötigt, um ein Theme zum Laufen zu bringen. Merke dir: Benutze so wenig Plugins wie möglich.

4. Browserkompatibilität

   Beim Webdesign geht es heute (leider) auch darum, dass das fertige Layout in jedem Browser gleich aussieht. Es empfiehlt sich manchmal auch der Einsatz von CSS Frameworks, die insgesamt eine hohe Browserkompatibilität aufweisen. Sollte zum Beispiel der Internet Explorer nicht das anzeigen, was man möchte, kann man ein spezielles Stylesheet einbinden, welches nur der IE erkennt:

   
   <!--[if lt IE 7]>
   	<link rel="stylesheet" href="http://wp-magazin.ch/wp-content/themes/tma/ie.css"
   	type="text/css" media="screen, projection">
   <![endif]-->

   Und falls man nicht immer gleich jedes Betriebssystem und jeden Browser zur Hand hat, kann man mit Services wie http://www.browsershots.org/ Screenshots des Themes machen, um zu sehen, wie es in dem und in dem Browser aussieht.

5. Kein Hard Coding

   Unter Hard Coding versteht man das direkte Einfügen von Daten, auch wenn diese von einer externen Quelle (Datenbank) geholt werden könnten. Es ist besser, wenn du die Auflistung der Seiten mit den von WordPress gegebenen Funktion erledigst, anstelle jedem Blogger zuzumuten, selber die Links anzupassen.So listet man alle Seiten unter WordPress auf:

   <?php wp_list_pages('title_li='); ?>

   Eine zusätzliche Lösung könnte auch das hier sein:

   <ul>
   <li><a href="<?php bloginfo('home'); ?>">Home</a></li>
   <?php wp_list_pages('title_li='); ?>
   <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
   <li><a href="mailto:<?php bloginfo('admin_email'); ?>">Contact</a></li>
   </ul>
   

   Hier werden nämlich zusätzlich zu den Seiten noch ein Link zur Startseite sowie ein Verweis auf den RSS Feed eingebunden. Diese Lösung ist auch möglich, da man hier nie den Link verändern muss.

6. Navigation

   Das Wichtigste beim Blog ist natürlich die Navigation durch die verschiedenen Beiträge. Könnte man nicht auf Vor und Zurück klicken, käme man natürlich nicht von der Startseite weg. Natürlich dürfen diese Links nicht fehlen! So bindet man sie in WordPress ein:

   <?php posts_nav_link(); ?>

7. Feed verlinken

   Es ist wichtig, dass man irgendwo im Theme auf den RSS Feed verlinkt. Am besten im Header und gut deklariert. Beispiel gefällig?

   <a href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed">RSS Feed</a>

8. Screenshots

   Egal für wen du dein Theme erstellst, für die breite Masse oder für deinen Kumpel: Mache Screenshots. Denn spätestens WordPress verlangt einen Screenshot in der Design-Rubrik des Backends, damit man sieht, wie welches Theme aussieht. Zudem kann man damit noch bevor man überhaupt entscheidet, die Demo anzusehen oder nicht, sehen, wie das Theme aussieht.

9. Farbwahl

   Die Farbkombination ist das A und O eines Webdesigns. Gib dir Mühe und vor allen Dingen nimm dir Zeit bei der Auswahl einer Farbpalette. Übrigens: Eine gute Farbkombination finde ich immer wieder auf COLOURlovers.com :-)

10. Angaben zum Theme in der style.css

    Damit WordPress weiss, um welches Theme es sich handelt und wie es aussieht, verlangt es ein paar Daten vom Autor des Themes. Diese Angaben sind in der Datei style.css zu hinterlegen. So muss es dann aussehen:

    /*
    Theme Name: XY
    Theme URI: http://wp-magazin.ch/url-zum-theme/
    Description: Schönes Theme mit drei Spalten. Die Beschreibung sollte übrigens nicht zu kurz sein.
    Author: Max Mustermann
    Author URI: http://wp-magazin.ch/
    Version: 1.0
    */

Mikroformate

Es gibt verschiedene Formate zur Auszeichnung von Inhalten, vielleicht sagen dir ja die Namen hCard, hCalendar, hReview. Das Format XFN dient der Auszeichnung sozialer Beziehungen und ist bereits standardmässig in WordPress eingebaut (Blogroll). Wie kann man aber auch die anderen Mikroformate einbinden? Es gibt verschiedene Möglichkeiten, die ich euch heute vorstelle.

1. Die erste Möglichkeit ist, den Code, den Mikroformat-Generatoren ausspucken, selbst in WordPress einzubauen. Dies sind die relevantesten:
   • hCalendar Generator
   • hCard Generator
   • hResume Generator
   • hReview Generator
2. Kopiere den generierten Code oberhalb deines Beitrags ein, den du gerade schreibst. Der sieht zum Beispiel wie folgt aus:

   <div id="" class="hreview"><abbr title="2008-11-22T21:06" class="dtreviewed">Nov 22, 2008</abbr>
   by <span class="reviewer vcard"><span class="fn">Pascal Birchler</span>
   <span><span style="display: none;" class="type">website</span>
   <span style="display: none;" class="version">0.3</span>
   <p>This &<a href="http://microformats.org/wiki/hreview">hReview</a>
   brought to you by the
   <a href="http://microformats.org/code/hreview/creator">hReview Creator</a>.</p></div>

   Da dies HTML Code ist, musst du den HTML-Modus des Editors verwenden.

3. Veröffentliche den Beitrag wie gewöhnlich.

Da diese Methode aber äusserst zeitaufwändig ist, empfehle ich den automatisierten Einsatz innerhalb der Beitrags-Schleife (Loop). Für das obige Beispiel würde dies zum Beispiel so aussehen:

<div class="hreview"> <abbr class="dtreviewed" title="<?php the_date('Ymd') ?>T<?php the_time('gi') ?>">
<?php the_time('F j, Y'); ?></abbr> by <span class="reviewer vcard">
<span class="fn"><?php the_author() ?></span> </span>
<span class="version" style="display: none;">0.3</span>
<p style="font-size: smaller;">This <a href="http://microformats.org/wiki/hreview">hReview</a>
brought to you by the
<a href="http://microformats.org/code/hreview/creator">hReview Creator</a>. </p> </div>

Die Schleife beginnt mit <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?> und hört mit <?php endwhile; ?><?php endif; ?> auf.

Da der Einbau aller Mikroformate auf diese Weise jedoch auch viel Zeit in Anspruch nimmt, empfiehlt sich an dieser Stelle der Einsatz von spezialisierten Plugins. Dies scheint die sauberere und bessere Methode zu sein. Hier die Links zu den gängisten Microformats-Plugins:

1. Plugins mit mehreren Formaten:
   • Structured Blogging - Unterstützt hReview, hCalendar, hCard und viele mehr .
   • WP-Microformats - Unterstützt hCalendar und hCard. Fügt für jedes Mikroformat einen Button im Text-Editor ein.
2. hReview:
   • hReview WordPress Plugin - Fügt die entsprechenden Formularfelder im Editor ein. Lässt sich aber auch abstellen.
   • WP-Movie Ratings - FIlmkritiken, die mit diesem Plugin veröffentlicht werden, beinhalten auch das hReview Mikroformat.
3. hResume:
   • hResume Plugin - Erstellt eine neue Seite für deinen Lebenslauf mit Hilfe des hResume Formats.
4. hCalendar:
   • uPress WordPress Plugin - Fügt die entsprechenden Felder im Editor ein.
5. hCard:
   • WP-hCard-Commenting - Lässt den Besucher das Kommentarformular durch eine hCard ausfüllen.
6. MicroID:
   • MicroID Plugin for WP - Fügt automatisch eine MicroID zum Blog, jedem Beitrag und jedem Kommentar hinzu. Mehr Informationen über dieses Mikroformat findet man über Google.

Es gibt übrigens auch WordPress Themes und Frameworks, die bereits von Haus aus Mikroformate unterstützen:

• Alle plaintxt.org Themes - hAtom, hCard und XOXO Support
• PrimePress - Suchmaschinenoptimierung und Mikroformat-Unterstützung
• Sandbox - Die erfolgreiche Theme-Vorlage unterstützt hAtom, hCard und XOXO
• StartPoint - Wie der Name schon sagt, ein Startpunkt für Theme Autoren mit hAtom Unterstützung
• Thematic -Auch dieses Framework unterstützt hAtom

Der SEO Blog von suchking.com hat jetzt aber ein kostenloses eBook herausgegeben: “Wordpress SEO” richtet sich an Anfänger und Fortgeschrittene, die sich mit dem Thema Suchmaschinenoptimierung in WordPress befassen wollen. Die Lektüre ist nicht nur für Anfänger sehr interessant!

WordPress SEO (PDF) Download

CSS Formatierer

Die auf den ersten Blick unscheinbare Website Clean CSS bietet das, wovon viele schon träumten. Mit einem Klick kann man dem Stylesheet ein paar Kilobytes abnehmen, Selektoren und Eigenschaften sortieren. Und wer sich oft mit dem CSS Formatierer auseinander setzt, kann auch Templates für diese Anwendung benutzen. Eine ähnliche Funktion hat übrigens auch der CSS Compressor.

Hinweis: Stylesheet vorher und nachher unbedingt durch den Validator schicken!

10 Tipps zur besseren Übersichtlichkeit

1. Benutze ein Master-Stylesheet, welches die anderen Stylesheets für Schrift, Layout, usw. einbindet
2. Erstelle ein Inhaltsverzeichnis am Anfang des Stylesheets
3. Benutze so wenig Container (<div></div>) wie möglich (Stichwort "Divitis")
4. Häufig verwendete Farben am Anfang der Datei deklarieren
5. Stelle ein für den Druck optimiertes Stylesheet zur Verfügung
6. #000 ist das selbe wie #000000 und #369 ist das selbe wie #336699
7. Schreibe die Deklarationen auf einer Linie, damit du auf dem Bildschirm mehr siehst
8. Nutze ein Debugging-Stylesheet um Fehler schneller zu finden
9. Versuche Hacks zu vermeiden, wenn die Bugs nicht tatsächlich existieren
10. Stets UTF-8 im HTML-Dokument verwenden

Noch nicht genug? Hier finden sich ganze 70 Expertenmeinungen.