Beispielsweise wird die Datei front-page.php immer für die Startseite verwendet und index.php wird immer am Schluss geladen, falls keine andere Datei passt. Im Laufe der Versionen gab es immer wieder Anpassungen an der Hierarchie, welche (meistens) auch in der Grafik reflektiert wurden, doch so richtig nützlich ist das Ganze noch nicht.

Chip Bennet hat deshalb auf eigene Faust die Grafik nach seinen Vorstellungen erweitert, fügt Fehlendes ein und Nützliches hinzu. Bei seiner Revision, wie er das Vorhaben nennt, gibt es beispielsweise jeweils noch eine Info, welche Body-Klasse (ausgegeben durch die body_class() Funktion) bei welcher Darstellung vorkommen.

Aktuell ist Bennets Grafik bei Revision 4 angelangt, man sollte aber die Seite regelmässig besuchen, falls es neue Änderungen gibt. Wer weiss, vielleicht hält diese verbesserte Version bald im Codex Einzug?

WordPress Template Hierarchie 2.0

1. Anti-Spam
   Ob Akismet, Antispam Bee oder ein anderes Plugin. Schützt euch vor nervenden Spam-Kommentaren. Aber Vorsicht: Der Leser sollte nicht durch Captchas oder Kommentar-Moderation aufgehalten werden.
2. Suchmaschinenoptimierung
   Ich empfehle ja sowieso wpSEO, da die alternativen Erweiterungen nicht mal halb so viel können wie dieses Plugin hier.
3. Besucherstatistik
   Es ist immer wichtig, einen Überblick zu haben, wie viele Leser man hat. Möglich machen das Google Analytics und zahlreiche WordPress Plugins. Ihr müsst euch aber für eines entscheiden. Beachtet aber, dass z.B. Google viel weniger Besucher verzeichnen wird als die Plugins.
4. Print Stylesheet
   Hat man einen coolen Beitrag wie etwa eine Liste mit wichtigen Tastenkombinationen, lohnt sich es für den Leser, wenn er die ausdruckt und aufhängt. Damit der Besucher nicht zuerst die Liste kopieren und in Word einfügen muss, solltet ihr ein speziell für den Druck optimiertes Stylesheet haben. Dafür gibt es gute Plugins, ihr könnt aber auch selbst Hand anlegen!
5. Kontaktformular
   Eure Leser sollten euch bequem über ein spamsicheres Kontaktformular erreichen können- alles andere ist Unsinn. Doch die Auswahl ist gross, die Plugins umfangreich und häufig viel zu kompliziert...
6. iPhone-Theme
   So viele nutzen das iPhone und lesen damit Blogs. Daher sollte man ein spezielles Design für iPhone-Benutzer an Lager haben, was mit einem vernünftigen Plugin absolut kein Problem ist.
7. XML Sitemap
   Damit eure Seiten schnell indiziert werden, solltet ihr eine standardkonforme Sitemap bereit stellen, die Google, Yahoo & Co. auch verstehen!
8. Twitter Integration
   Solltet ihr euch einmal für Twitter entschieden haben, spricht nichts gegen die Anzeige eures letzten Tweets im Blog oder das Senden eurer Blogposts zu Twitter. Beides ist mit dem hervorragenden Plugin Twitter Tools möglich.
9. Nofollow deaktivieren
   Faire Webmaster entfernen das standardmässige "nofollow" aus WordPress. Wenn du auch so denkst, schnapp dir das DoFollow Plugin!
10. Ähnliche Artikel anzeigen
    Dutzende Plugins zeigen euch am Ende eines Beitrags verwandte Beiträge an, womit der Besucher eher auf der Seite bleibt und noch ein Stück weiterliest. Die Auswahl ist riesig und die Vorgehensweisen immer wieder anders.

Das FD Footnotes Plugin

Heute möchte ich euch also diese wirklich nützliche Plugin einmal vorstellen! Alles was man dazu braucht ist WordPress ab Version 2.0 und ein bisschen Grundwissen um es zu installieren und zu bedienen.

Die Anwendung ist so simpel wie möglich gehalten: [1. Das ist ein Beispiel] erzeugt dann also Das ist ein Beispiel als Fussnote. Wichtig ist das Leerzeichen nach dem Punkt und dass man nicht weitere Klammern ineinanderverschachtelt. Also das hier funktioniert nicht:

• [1.footnote]
• [1. [footnote]]
• [footnote]
• [*. footnote]

Man kann übrigens auch nicht zwei mal die exakt gleiche Fussnote einbinden. Das funktioniert aktuell nämlich überhaupt nicht!

Kompatibilität

Das Plugin funktioniert in manchen Fällen nicht richtig, wenn gleichzeitig das EasyTube oder das WP-Ratings Plugin aktiviert ist. Ein Problem ist auch der Konflikt mit anderen Plugins, die etwas unter dem Artikel einfügen. So kann es vorkommen, dass zuerst die Fussnoten kommen und danach aber vielleicht noch eine Signatur (z.B. Copyright-Hinweis) erscheint. Das kann man vermeiden, in dem man die Plugin-Priorität verändert. Lösen kann man das in der letzten Zeile des Plugins, die so aussieht:

add_action(’the_content’, ‘fdfootnote_convert’, 1);

Die Zahl 1 hier steht für die Priorität. Je tiefer die Zahl, desto früher wird das Plugin den Dienst verrichten. Man kann sich das vielleicht als eine Art Warteschlange vorstellen: Vorne Person Nummer 1, hinten Person Nr. 10

Styling

Der Autor des Plugins empfiehlt dieses Stylesheet, um die Fussnoten wie erwartet darzustellen. Man kann dies natürlich auch beliebig verändern!

.footnotes {
  font-size: 85%;
  line-height: 1.5em;
  padding: 10px 0 10px 0;
}

.footnotes .footnotedivider {
  width: 120px;
  border-bottom: 1px solid #ccc;
}

.footnotes li {
  margin: 0 0 5px 0;
}

sup.footnote a {
  text-decoration: none;
  font-size: 80%;
}

sup.footnote {
  line-height: 0em;
}

.footnotereverse a {
  padding: 0 0 0 5px;
  text-decoration: none;
}

Das Ergebnis

Fussnoten in Aktion

Online Theme Generatoren

Im folgenden möchte ich euch drei kleine aber feine Programme vorstellen, die eine rasche Programmierung eines Themes erlauben. Nicht zu vergessen ist, dass man oft nur das CSS bearbeiten muss, um das gewünschte Resultate zu erzeugen. Frei nach dem Prinzip des CSS Zen Garden.

WordPress Layout Generator

Wer den Layout Generator aufruft, muss zuerst eines von aktuell sechs Themes wählen, bever es weiter geht. Jetzt kann man auf der linken Seite alle Farbangaben aus der CSS Datei nach Belieben ändern, rechts sieht man immer die aktuelle Farbkombination (wenn man denn auf Update klickt). Möchte man das Theme speichern, kann man entweder zwischen dem kompletten ZIP-Archiv oder nur dem Stylesheet wählen. So kann man zum Beispiel immer wieder sein Theme färben und gleichzeitig das Ergebnis sehen.

WordPress Theme Generator

Der Theme Generator unterscheidet sich nur in ein paar wenigen Punkten vom Layout Generator. Man kann die Anzahl und die Grösse der Sidebars, den Blog Titel und das Menü Layout auch gleich bestimmen. Auch bei den Farbwerten sieht man gleich eine Vorschau. Mein Tipp: Lässt den Layout Generator links liegen und nimmt den!

WP Themer Kit

Eine Alternative zu den oben gezeigten Varianten ist die Software WP Themer Kit, die man herunterladen muss. Hier wird der HTML-Code selbst nie verändert, sondern nur das Styling. Es gibt sechs verschiedene Vorlagen, die sich nur in Form, Grösse und Position von Menüs, Sidebars usw. unterscheiden. Desweiteren sind die WordPress Template Dateien wie index.php, page.php dabei. Vermutlich bräuchte man aber für 2.7 bald eine neue Version...

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.

Ein Plugin und zwei Bilder für ein Halleluja

Binary Moon, ein erfolgreiches Blog aus Grossbritannien, veröffentlichte im letzten Jahr ein Plugin, genauer gesagt das Binary Moon Custom Login Plugin. Es erfüllt voll und ganz seinen Zweck, aber leider nur mit Hilfe zweier Bilder, die durch das aktive Plugin eingefügt werden. Die Lösungen weiter unten gehen da anders vor. Aber es ist vielversprechend:

Logo und Hintergrund manuell ändern (login.css)

Die bekannteste und wohl erste Lösung gibt es bei Just Creative Design, einem populären Blog von Jacob Cass. Die folgende Liste ist eine vereinfachte und übersetzte Anleitung von Jacob.

Das Logo ändern

1. Suche via FTP in Ihrem Admin-Ordner die Datei login.css, was dann etwa so aussieht: wp-admin/css/login.css. Öffne jetzt diese Datei
2. In der login.css Datei suche die Zeile:
   background: url(../images/logo-login.gif) no-repeat;
   ändere es um, damit dein Logo eingebunden wird: background: url(../images/DEINLOGO.gif) no-repeat;
   Das Logo sollte eine Breite von ca. 290 Pixel nicht überschreiten
3. Für fortgeschrittene Benutzer ist das die Datei, wo man auch sonst das Loginformular verändern kann. Man muss nur ein bisschen CSS können ;)

Die Farbe ändern (Hintergrund)

1. Öffne die colors-fresh.css Datei welche sich auch im wp-admin/css/ Ordner befindet.
2. Finden die ZWEI #eaf3fa Farbwerte in dieser CSS Datei und ersetze sie durch eine beliebige Farbe. Eine etwas ausgewaschene oder neutrale Farbe ist empfehlenswert. Du kannst es ja mal mit #EAEAEA (grau) als Farbe ausprobieren.
3. Höre noch nicht auf, du kannst deine Login-Seite so stark verändern wie du willst. Das oben war nur ein Beispiel.

Diese Anleitung ist für WordPress 2.5+ - ältere Versionen kommen hier auf ihre Kosten.

Mein Tipp: Eine ähnliche Anleitung gibt es bei Frank Bültge. Er bearbeitet darin eine PHP Datei, wodurch die Loginseite vom aktiven Theme abhängig ist und die Style-Angaben aus einer Datei im Theme-Ordner geholt werden.

Custom Admin Branding und Branded Admin

Ok, dieses Wortwirrwarr kann man nicht ganz entschlüsseln, doch so heissen zwei Plugins, die uns bei der Aufgabe Login Gestaltung behilflich sein wollen. Kommen wir zum ersten Plugin, Custom Admin Branding. Es ändert nicht nur die Loginseite sondern gleich die Gestaltung des Adminbereichs, genauer gesagt Kopf- & Fusszeile. Ausserdem funktioniert es auch genau gleich wie Frank Bültges Lösung, ändert aber auch den Adminbereich und ist vom Plugin und nicht vom Theme abhängig. Der Inhalt liest sich in etwa so:

• Color Scheme Stylesheet
• PSD Dateien
• Die Bilder, die mit Hilfe der PSD Dateien erstellt wurden

Kommen wir nun zum Branded Admin Plugin von Kerry Webster. Es modifiziert ganz einfach und ohne viele Anpassungen Kopf- & Fusszeile, jedoch nicht die Loginseite. Ausserdem entfernt es unnötige WordPress-Links die z.B. bei Kundenwebsites eher stören, da diese damit nichts anfangen können. Auf ein Bild verzichte ich hier, da es eigentlich genau so aussieht wie das obige Plugin auch.

The Webmaster's Turbo Kit

Beim grossen Webmaster's Turbo Kit gibt es über 50 Tipps, durch die das eigene Blog um ein Vielfaches schneller gemacht werden kann. Unter anderem sollte man Cascading Style Sheets, Bilder, Bildformate und Links optimieren. Die Liste bietet nicht eigenen Inhalt, sondern verlinkt auf 53 bereits geschriebene Artikel mit diesem Thema. So wurden allein sechs Artikel von DailyBlogTips verlinkt.

Warum die Position bei Suchmaschinen wichtig ist

Der Artikel Why You Must be the First, in Google's Search Results at Least! stammt ebenfalls von DailyBlogTips. Der Mittelpunkt des Artikels ist die unten stehende Grafik. Sie verdeutlicht die Wichtigkeit einer 1. Position bei Google, da die unteren Resultate gar nicht erst angeklickt werden. Das heisst: Wenn man an 9. Position liegt und täglich 2000 Suchanfragen zu diesem Thema gemacht werden, erhält man nur 28 Klicks!

Dies wurde übrigens durch eine Studie belegt, wie man hier nachlesen kann: Distribution of Clicks on Google’s SERPs

Bemerkenswert an diesem Bild bzw. dieser Studie ist übrigens, dass die letzte Position im Gegensatz zur 9. und 7. Stelle viel mehr Klicks zur Folge hat.