Wordpress Nutzer werden oftmals auf den WYSIWYG-Editor “TinyMCE” setzen. Nun hat der manchmal seine Schwächen und wenn man einige Regelmäßigkeiten beachtet, kann man den Quelltext gleich selber schreiben. Wordpress liefert standardmäßig XHTML aus und dies bietet eine Vielzahl logischer Auszeichnugnsmöglichkeiten. Ebenfalls macht der Styleguide Sinn um ein Theme zu testen- schnell sieht man, wo nach Hand ans Theme oder die CSS-Datei zu legen ist.

Überschrift ersten Grades

Immer bedenken, dass nur die Tags verwendet werden, welche der Doctype zulässt. Gebräuchliche Doctypes sind “HTML 4.01″ “XHTML1.0″ und “XHTML1.1″.
“XHTML1.0″ erlaubt die gleichen Tags wie “HTML4.01″ und es gibt die gleichen Ausprägungen “transitional”, “strict” und “frameset”. “XHTML1.1″ ist als Neuanfang zu sehen: es gibt weder die Variante “transitional” noch einen Doctype.

Immer bedenken, dass nur die Tags verwendet werden, welche der Doctype zulässt. Gebräuchliche Doctypes sind “HTML 4.01″ “XHTML1.0″ und “XHTML1.1″.
“XHTML1.0″ erlaubt die gleichen Tags wie “HTML4.01″ und es gibt die gleichen Ausprägungen “transitional”, “strict” und “frameset”. “XHTML1.1″ ist als Neuanfang zu sehen: es gibt weger die Variante transitional noch einen Doctype.

Wordpress nutzt XHTML1.0 transitional, hier sind 89 Tags erlaubt, die Tags in Klammern sind in der XHTML1.0 Variante “strict” verboten, und alle Tags, welchen ein “-” angestellt ist, haben keinen schließenden Tag, wie beispielsweise bei einem Zeilenumbruch <br /> .
Hier nun die Aufzählung der Tags: a, abbr, acronym, address, (applet), area-, b, base-, (basefont-), bdo, big, blockquote, body, br-, button, caption, (center), cite, code, col, colgroup, dd, del, dfn, (dir), div, dl, dt, em, fieldset, (font), form, h1, h2, h3, h4, h5, h6, head, hr-, html, i, (iframe), img-, input-, ins, (isindex-), kbd, label, legend, li, link-, map, (menu), meta-, (noframes), noscript, object, ol, optgroup, option, p, param, pre, q, (s), samp, script, select, small, span, (strike), strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, (u), ul, var.

Größtenteils reichen zum Bloggen ja die Überschriften h1 bis h6, die Absätze und die Inlineelemente, dazu noch ein paar Listen für die Aufzählungen und manchmal eine Tabelle, gerade da nervt es, dass der Wordpresseditor da standardmäßig streikt. Wenn was größeres ansteht, muss dann bei SelfHTML nachgeschlagen.

P steht für einen Absatz und sollte auch nicht anders verwendet werden. Es ist ein Blockelement, diese erzeugen einen Bruch im Textfluss. XHTML bietet eine Reihe von Elementen zur logischen Textauszeichnungen. Bei den logischen Auszeichnungen greift die Standardeinstellung des Browsers, sofern diese nicht via CSS verändert werden.

In diesem Absatz hier sind Elemente untergebracht die das Absatzgefüge nicht durchbrechen, daher werden diese als Inlineelemente bezeichnet. Es gibt logische, physische und rein präsentative Inlineelemente zur Textauszeichnung.
Logische und Elemente sind beispielsweise
das em-tag für emphatisch oder betont,

das strong-Tag als Steigerungsform des em-Tags für stark betont,

das code-Tag für die Angabe von Quellcode ,

das samp-tag für die Ausgabe eines Beispiels,

das kbd-tag für Tastatureingaben ,

das var-Tag für dies ist eine Variable,

das cite-tag für dies ist ein Zitat ,

das dfn-tag für dies ist eine Begriffsdefinition ,

das acronym-tag formatiert eine Abkürzung und

das das q cite=”http://www.xyz.de zeigt ein Zitat an, welches sich auf folgende Quelle bezieht.

Weitere empfehlenswerte Inlineelemente sind

das span-tag als inhaltsleeres Element, sozusagen als sonstiges Element für alles, was in keine andere logische Kategorie passt,
das a-tag in Verbindung mit href als Anker samt Verknüpfung, weitere Attribute sind accesskey, name, tabindex, target, title. Links können mit einer class versehen werden, somit ist es möglich per CSS, beispielsweise die internen von den externen Links abzuheben oder PDF-Downloads mit einer Grafik als Hintergrund zu versehen.

Soweit möglich sollte logisch ausgezeichnet werden, andernfalls sollten Elemente genutzt werden, welche mit dem Doctype vereinbar sind, Wordpress nutzt hier derzeit “XHTML 1.0 Transitional”.
Einige Beispiele für physische und rein präsentative Tags zum Theme-CSS-Test, wie
das btag um Text fett zu machen,
das i-tag um Text kursiv erscheinen zu lassen,

das tt-tag bewirkt diktengleichen Text ähnlich eines Fernschreibers,

das u-tag erzeugt einen unterstrichenen Text,

das strike-tag bewirkt einen durchgestrichenen Text,

das s-tag bewirkt ebenfalls einen durchgestrichenen Text ,

das big-tag bewirkt größer formatierten Text ,

das small-Tag bewirkt kleiner formatierten Text,

das ^{sup-tag bewirkt hochgestellten} ,

das _{sub-Tag bewirkt tiefgestellten Text},

das blink-tag bewirkt blinkenden Text.

Überschrift zweiten Grades

Neben den Inline-Elementen gibt es noch die Blockelemente, diese erzeugen einen eigenen Textabsatz im Element und können Inlineelemente enthalten, einige Blockelemente können sogar weitere Blockelemente enthalten, im Bedarfsfall einfach nachlesen. Mit CSS kann man anschließend ggf. noch etwas tricks und Inlineelemente als Block anzeigen lassen oder Blockelemente inline.

Blockelemente sind beispielsweise Absätze, Listen, Tabellen und Formulare.

Überschrift dritten Grades

Hier kommen die Listen, es gibt geordnete, ungeordnete und Definitionslisten. Ungeordnete haben Bullets als Aufzählungszeichen, geordnete Zahlen und Definitionlisten erhalten Einrückungen.

• erstes ungeordnetes Listenelement
• zweites ungeordnetes Listenelement
• drittes Element mit Unterliste
  1. erstes verschachteltes geordnetes Element
  2. Achtung bei verschachtelten Listenelementen
  3. das erste Listenelement bleibt geöffnet, es folgt das ol bzw ul
  4. und nach dem schließenden ol bzw ul der verschachtelten Liste
  5. wird erst das li Element der Hauptliste geschlossen
• hier steht das letzte Element der Hauptliste, samt dem Listenschluss

Das dl kündigt die Definitionsliste an, das dt das erste Element

das dd ist die Defintion zum ersten Listenelement

es kann auch mehrere Defintionen zum ersten dt geben

Überschrift vierten Grades

Jetzt geht es um die Tabellen. Wordpress bietet in der Version standardmäßig keine Tabellenunterstützung. Grund also, schnell die nötigen Tags zu erklären.
Pflichtmäßig braucht man nur die Tags “table” für den Tabellencontainer, “tr” für tabelrow als Zeilencontainer und “td” für die Datenzeile. Es gibt dann noch das “td” für eine Kopfzeile und einige weitere Tags und Attribute, falls die Tabelle etwas anspruchsvoller sein soll.

Dummykopfzeilenelement links	Dummykopfzeilenelement rechts
erster Eintrag links	zweiter Eintrag rechts
zweiter Wert links	zweiter Wert rechts

Überschrift fünften Grades

Letzter Punkt sind die Formulare. Hier gibt es für Wordpress-User die Anwendung als Kommentarbox. Und da die Formularelemente recht großen Spielraum bieten, gehe ich auch nur auf diese ein. “form” für den Formularcontainer, dann das input Element, das braucht das Attribut “type”, denn es gibt zehn Möglichkeiten zur Auswahl, beispielsweise eine Textbox (text) oder ein Feld zum Anhaken (checkbox). Für mehrzeilige Eingabefelder steht das Container-Element “textarea” zur Verfügung.
Zusätzlich muss es noch ein “action”-Attribut geben, damit das Formular weiß, wo es die Daten hinschicken soll. Barrierefreier werden die Formulare, wenn die Eingabefelder mit dem Tag “label” logisch verknüpft werden, und das Attribut “acceskey” verwandt wird – so werden die Input-Felder über Tastenkürzel ansprechbar. Bisschen blöd ist, dass die Inputfelder Inline-Elemente sind, somit muss man, um eine Zeilenstruktur sicher zu stellen mit dem “br”-Tag werkeln oder das Formular in eine Tabelle klatschen – oder mit CSS-Tricks die zeilenweise Anzeige sicher stellen, beispielsweise kann man auch Inlineelemente als Block anzeigen lassen. Formular sieht man unten.

Überschrift sechsten Grades

Sodala, dann bin ich fertig, meine Seiten sind noch keinesfalls passend ausgezeichnet, wobei ich da nach und nach schon mal etwas nachlegen werde. Genauso will ich diese Serie aufrecht erhalten, damit Wordpress-Nutzer eine Art Mini-Referenz haben. Ich bin also für Kommentare zur Ergänzung dankbar, wenn ich mal falsch liege, oder es etwas zu ergänzen gibt.

Feed abonnieren, Beitrag emailen oder bookmarken...

Seit einiger Zeit laufen interessante Artikelserien zu Wordpress. Nachdem ich ebenfalls Wordpress nutze und daran schraube, schreibe ich hier mal alles zusammen, was mir neu ist und was ich als wichtig erachte. Für weiterführende Infos gibt es den Codex. Wordpress und das Web ändern sich ständig und so werde ich diesen Beitrag gelegentlich aktualisieren (Version 1.0; 03-12-2007)

Struktur

Templates

Templates sind Dateien, die im Verzeichnis ihres Themes liegen und von Wordpress inkludiert werden, so holt die Funktion get_header() die Datei ‘header.php’ und setzt diese in die aufgerufene ‘index.php’.
Neben der Methode per Funktion die Templates reinzuholen, kann man den Pfad auch direkt angeben. Mit der Konstanten ‘TEMPLATEPATH’ wird automatisch der Pfad zum Theme-Verzeichnis gelegt. Mit der Variable ‘ABSPATH’ zum Wordpress-Wurzelverzeichnis. So kann man beispielsweise jedes beliebige PHP-Skript in Wordpress laden.
Die Templates werden in einer bestimmten Hierachie angelegt, so wird erstmal geschaut, ob die aufgerufene Seite vorhanden ist und falls nicht die ‘index.php’ geladen. Ein Bild im Codexbeitrag verdeutlicht das Zusammenspiel ganz gut. Neu war für mich, dass es eine extra ‘attachment.php’ und eine ‘author.php’ gibt und dass ein Druck auf ein Schlagwort die ‘category.php’ lädt.

Conditional Tags

Mit den Conditional Tags kann man eine Unterscheidung treffen, beispielsweise ob es sich um eine Seite handelt oder nicht. Conditional Tags kommen im Loop vor und auch ber der Gestaltung des Titels kann man damit spielen. Laut Codex kann man diese Tags benutzen, um die aktuelle Seite in der Navigationsleiste hervor zu heben. Ein weiterer Einsatz ist eine Prüfung bei der Veröffentlichung eines Kommentars, ob der Beitragsautor den Kommentar geschrieben hat und daraufhin das Format ändern. Des Weiteren kann man bestimmte Seiten von Suchrobotern ausschließen und andere nicht.

Template Tags

Template Tags sind PHP-Funktionen die in die Templates geladen werden. Diese Template Tags steuern dann das Erscheinungsbild des Blogs. Einer Funktion kann man möglicherweise Parameter zuwerfen. Diese Funktionsparameter sind Variablen, die diese Funktion benötigt.

Es gibt eine Übersicht über die Template Tags in deutsch und eine Codex-Kategorie. Grundsätzlich muss man sich oft im Sourcecode orientieren und will vielleicht mal die Funktion genau unter die Lupe nehmen, hier entdeckte ich eine Onlineansicht des Wordpress Codes mit Syntax-Highlighting. Man sieht sich also den Code der ‘index.php’ an, dort steht der Loop, dort steht die Funktion ‘the_content’, ein Mouseover zeigt den Ort der Funktion an, hier die ‘wp-includes/post-template.php’.

Es gibt drei Arten von Template Tags: einmal haben wir welche die keine Parameter benötigen, einmal haben wir welche die Parameter, wie gewöhnliche PHP-Funktionen akzeptieren (Function-Style-Parameter) und es gibt Funktionen die Parameter erwarten und dabei einen Query-String nutzen, das funktioniert ähnlich, wie wenn man Variablen via GET-Methode von Skript zu Skript schickt. Diese Funktionen sind meist nur Wrapper für die Funktionen, die Parameter und zwar sehr viele Parameter erwarten.

Frank Bültge nennt in seinem Buch das Beispiel wp_get_archives und get_archives: wp_get_archives ist die gleiche Funktion wie get_arhives nur mit Parametervoreinstellung und einer kleinen Abfrage, ob eine Änderung zur Voreinstellung mitgeliefert wurde. Als Programmierlaie klingelt bei mir bei der GET Methode gleich immer die Sicherheitsrassel, dafür ist dann wohl auch die wpspecialchars – Funktion da.

Ein Fehler, der mich lange aufhielt war, dass ich beim Definieren einer Funktion die erwarteten Parameter mit einem $-Zeichen beschreiben muss, beim tatsächlichen Funktionsaufruf können diese aber fehlen – ich hoffe das war das fehlende Mosaiksteinchen zu meinem ersten Plugin.

Template Tags können auch ineinander verschachtelt werden, also ein Template Tag ist sozusagen ein Parameter eines anderen Template Tags. So binden viele Template Tags wiederum andere Funktionen aus dem Wordpress Kern ein.

Eigene Funktionen kann man auch definieren und als Plugin andocken. Die so definierten eigenen Funktionen stehen dann in der Datei ‘functions.php’ im Themeordner und werden von Wordpress eingebunden.

Custom Fields

Custom Fields sind Textfelder die der Schreiber füllen kann. Ich habe sie auch hier aufgeführt, da man mit diesen die Erscheinung des Blogs oder auch des Quelltextes im Header beeinflussen kann, ähnlich wie bei den Template Tags – nur dass man die Fields dann im Backend beim Schreiben eines Beitrages erst mit Inhalten füllt.

Workflow

Quicktags sind bestimmte Kommentare im HTML Quelltext die nachdem Sie vom Editor abgeschickt werden, eine bestimmte Aktion in Wordpress auslösen. Die Eingabe von <(!–nextpage–)> führt zu einem Seitenumbruch und die Eingabe von <(!–more–)> bestimmt die Länge des Auszugs. Die Klammern müssen weg, ich schrieb sie nur, damit mir Wordpress hier nicht wirklich einen Seitenumbruch oder ein “weiterlesen” reinklatscht. Im Codex findet man eine Übersicht zu allen Quicktags und gerade für den Kommentierenden bieten sie die Chance deren Text zu formatieren.

TinyMCE ist der Standardeditor in Wordpress. Ich nutze diesen nur zum Formatieren. Den Text schreibe ich mit Vim, meinem mächtigen Texteditor. Es gibt ein Firefox-Addon namens “It’s All Text!”, dies ermöglicht alle Textfelder, auf die der Browser zugreift mit einem Desktopeditor zu bearbeiten – das finde ich extrem hilfreich, weitere Infos gibt es in meinem Artikel bei DrWeb zum Hintergrund dieser Maßnahme.

Als Zusatz nutze ich das Programm Gimp für die Bildbearbeitung und Inkscape für Zeichnungen, falls ich es mit Gimp nicht hinbekomme. Vektorgrafiken bin ich kein Spezialist, wie man sich aus dieser Äußerung denken kann. Als Betriebsystem habe ich Ubuntu. Alles in allem kostet mich also das Bloggen nur die Gebühr für meinen Webspace.

Entwickeln

Themes

Eine Internationalisierung kann man durch das voranstellen der Funktion _e(’blabla’) erreichen oder wenn man einen Text im Funktionsnamen ändern will mit ‘__(’blabla’)’.

Durch eine Funktion muss eine Anfrage an den Server gestellt werden – das ist schlecht, wenn es um die Performance geht und so macht es Sinn das eigene Theme nicht zu internationalisieren. Ich kann nicht einschätzen, wieviel Zeit ein internationalisiertes Theme länger für einen Seitenaufruf braucht als ein lokalisiertes.

Das Gleiche ist mit den Angaben im Header, man kann dort viele Sachen via Funktion abfragen (Spracheinstellung, Zeichensatz und Schreibrichtung, ‘lang’- und ‘dir’-Attribut des HTML-Tags im Header) – gut fürs öffentliche Theme, das eigene lieber festtackern. Die Voreinstellung ist bei den Suchrobotern index follow, somit kann man sich diese Angabe sparen, bzw. muss extra eine Angabe setzen, wenn man das indizieren verhindern will.

Das xfn im Header fördert das semantische Web, ist wohl ein Microformat, und im Backend kann man seiner Blogroll erweiterte Angaben machen. Eine ähnliche Geschichte sind die Geotags, so kann Google diese Angabe beispielsweise nutzen und bei der Eingabe der dazugehörigen Stadt die Seite höher bewerten.

Die Weiterblättern-Funktion zwischen den Seiten gibts ein Plugin namens ‘Pagebar’, und eine Funktion die ich mir da mal ansehe ist die ‘posts_nav_link’ und die ‘previous_post_link’ und die ‘next_post_link’.

Bei den Funktionen muss man aufpassen, so liefern die Funktionen eine ID nun zweimal, sofern man ein Layout nutzt, welches auf Yaml setzt, nämlich die ID “navigation” – eine Lösung beschreibt Micha.

Neben der Weiterblättern-Funktion am Seitenende kann eine sogenannte Breadcrumbnavigation sinnig sein. Ich werde noch darauf verzichten, da ich versuche stark verschachtelte Seitenhierachien zu vermeiden und denke in meinem Fall besteht da vorerst kein Bedarf.

Der Loop ist das Kernstück in Wordpress und dort gibt es eine Vielzahl der Conditional Tags. Im Loop kann man einige sinnvolle Ergänzungen einbauen: ich werde einen Verweis zum Glossar einbauen und ein Plugin (’Share this’) liefert einen Link, mit welchem der Leser ein ‘Social Bookmark’ setzen kann oder den Feed des Blogs abonniert. Der Loop kann sinnvoll ergänzt werden und so kann man mit diversen Hintergrundfarben und Grafiken spielen. Bei Yaml bietet es sich an, dass man aus Suchmaschinensicht den Content in der Col1, welche im Quelltext ganz oben steht einspeist. Ich muss mir das mal durch den Kopf gehen lassen und in der Yaml-Doku nachlesen, was da die Vor- und Nachteile sind.

Die Suchbox sollte prominent verlinkt sein. Das sah ich bislang anders und ich werde mir da etwas einfallen lassen. Der oben erwähnte Link im Loop zum Glossar wird vorerst reichen.

Widgets und eine händische Sidebar müssen sich nicht ausschließen. Man kann die Widgets-Funktion also auch erst ab halber Sidebar aufrufen. Gerade wenn man ein Yaml-Theme nutzt ist es für den Laien ist es oftmals schwierig zu entscheiden, ob nun eher in der Yaml-Dokumentation oder im Wordpress-Codex nachgesehen werden soll.

Einige Blogs legen viele Funktionen in den Footer, wie das geht beschreibt Perun und erklärt auch gleich wie er via Plugin ‘Get Recent Comments’ die Trackbacks von den Kommentaren trennt.

Yaml stellt für die Navigation bereits einige Möglichkeiten vor, eine Liste der Wordpressseiten bietet sich an und gerade wenn es dann verschachtelt wird, wirds tricky. Michael hat sich da schon einen Kopf gemacht.

Yaml bedient mit einem Stylesheet den Internet Explorer mit einem Conditional Comment, gerade die Pfadangaben können bei Yaml Probleme bereiten und so sollte man gegenprüfen ob alle Stylesheets fassen. Die Angabe ‘/’ beim Start des Pfades lässt die Suche im Wurzelverzeichnis starten und, die Wordpress-Variable ‘ABSPATH’ und ‘TEMPLATEPATH’ wurden oben bereits erwähnt.

Bei der Sicherheit sollte man darauf achten, die Funktion wpspecialchars zu nutzen, wenn etwa Daten über die URL reinkommen.

Bei jedem Theme hat man eine Lizenz, die es zu respektieren gilt, beispielsweise ist Wordpress zwar OpenSource, aber Yaml steht beispielsweise unter einer CreativeCommons. In jedem der Projekte stecken wohl tausende von Stunden und so sollte der Link am Ende nicht fehlen, sofern er verlangt wird.

Weiterführende Links:
* Theme Tutorial – Frank Bueltge
* Theme Tutorial – Perun
* Theme Tutorial samt Yaml – Michael Preuß

Feed abonnieren, Beitrag emailen oder bookmarken...

Wie findet ihr das neue Design?

Anfangs sticht natürlich sofort das neue Theme ins Auge – hierbei handelt es sich um das Blitzblank-Theme, welches ich gebaut habe. Fürs Blogatelier habe ich dies angepasst und weiterentwickelt. Meine Änderungen fließen in die kommende Blitzblank-Version ein, sofern diese sich als vorteilhaft erweisen.

Unter der Haube ist auch einiges passiert: so habe ich alle meine rund 600 Beiträge neu kategorisiert und hoffe dass ich mich nun nach fast 1,5 Jahren rubrikentechnisch gefunden habe. In Kürze werde ich Feeds für jede Rubrik unter der Seite Abonnements anbieten – so könnt ihr zielgenauer abonnieren.

Zur Zeit biete ich meine Feeds und den Newsletter über Feedburner an – inwieweit ich dies beibehalte, weiß ich noch nicht. Prinzipiell möchte ich es so einfach wie möglich halten und soviel wie möglich von Wordpress und seinen Plugins erledigen lassen.

Aus dieser neuen Ansicht kam auch der Entschluss meine Bilder im Blog selbst zu hosten. Dafür nutze ich das Plugin “myGallery” von Thomas Boley. Mein erster Eindruck ist sehr positiv, seht ihr ja in meiner “Galerie” – die Google Web Albums waren doch recht limitierend:  die Slideshow war schön aber immer nur jpg-Bilder nervte mich und die Seiten validieren nicht mehr.

Es werden in Zukunft viele verschiedene Plugins getestet, da ich in naher Zukunft ein weiteres Projekt starten werde, welches Hand und Fuß haben soll. Derzeit sind die üblichen Plugins von Automattic und SW-Guide dabei – wie gesagt, da werde ich experimentieren, Wordpress 2.3 abwarten und später etwas dazu schreiben.

Für eure Tipps, Ratschläge und Meinungen bin ich natürlich dankbar.

Cheers
Jochen

Feed abonnieren, Beitrag emailen oder bookmarken...

UPDATE: blitzblank ist nun in der Version 2 erhältlich. Die Seite zum Theme befindet sich in meinem anderen Blog! – blitzblank 2 auf deutsch | blitzblank 2 in englisch

Blitzblank ist der Name meines Themes für die Blog- und CMS-Software Wordpress. Als Basis des Layouts dient das XHTML/CSS-Framework Yaml. Aus diesem Grund kann das Theme mit einigen Handgriffen flexibel angepasst werden und unterstützt viele der aktuell verwendeteten Browser. Die Möglichkeiten von Yaml sind vielfältig und ich verweise hier nur auf die Online-Doku des OpenSource-Projekts.

Wenn man das Theme verwenden will, muss ein Link zu dieser Seite und zur Yaml-Seite angebracht werden. Standardmäßig habe ich diese Links in den Seitenfuß geschrieben. Der Link zu meiner Homepage kann gerne herausgenommen werden.

Das Theme unterstützt die Wordpress Widgets und ist mit den Wordpress-Versionen 2.2.2, 2.2.3, 2.3 getestet.

Die Headergrafik kann bequem bearbeitet und ersetzt werden. Bei Bedarf übernehm ich das gerne – sende mir einfach eine Email mit deinem gewünschten Schriftzug und ich passe den Header an. Das Erzeugen des Spiegeleffekts ist mit einem Programm wie Gimp oder Photoshop schnell erledigt. Gimp ist kostenlos und OpenSource.

Eigenschaften des aktuellen Blitzblank-Themes:
* Anmeldefunktion befindet sich rechts oben
* Seiten werden in einer horizontalen Navigationsleiste gelistet
* Text des Kopfbereichs wird nicht angezeigt, ist aber im Quelltext vorhanden
* nutzerfreundliche, unsichtbare Skiplinks
* Printversion für alle Seiten und Artikel
* 2 widgetfähige Sidebars
* XHTML 1.0 Transitional und CSS valide

Ich freue mich über Fragen, Feedback und Mitarbeiter am Projekt “Blitzblank”-Theme.

Installation:
1. Theme herunterladen (Rechtsklick “Ziel speichern unter “) auf die zip-Datei
2. Datei entpacken
3. Entpackten Ordner “blitzblank” ins Verzeichnis /wp-content/themes legen
4. Headergrafik herunterladen und bearbeiten (optional)
5. Headergrafik in den Ordner /themes/blitzblank/css/screen/images/ unter den Namen “header.png” speichern (optional)
6. Theme im Adminbereich aktivieren
7. header.php öffnen und Name und Url im Kopfbereich ändern (optional)
8.Die Datei “favicon.ico” aus dem Theme-Wurzelverzeichnis ins Blogwurzelverzeichnis kopieren (optional)

Viel Spaß!

Aktuelle Version:

Blitzblank 1.2 (mit Yaml 3.0.3)
* Blitzblank_12 -Download Blitzblank Theme als zip-Datei
* blitzblank-header als Tiff-Datei (960×300px)
* Demoinstallation

Änderungsprotokoll:
* Release Version 1.2 – 10-10-2007
- rechter Innenabstand wurde in der basemod.css von 0 auf 20px gesetzt
- Pfad zum Druckstylesheet in der style.css auf “css/print/print_003.css” gesetzt
- Pfad zum Druckkernstylesheet in der print_003.css auf “../../yaml/core/print_base.css” gesetzt.
- Favicon verfügbar
- Postmetabereich mit Kategorien- und Stichwortanzeige
- Theme validiert XHTML1.0 Transitional und CSS

* Release Version 1.1 – 09-09-2007
- Header zentriert und Anzeigefehler ausgebessert
- Quelltext weiter kommentiert
- Formular und Kommentarbereich mit CSS ausgezeichnet
- Schrift vergrößert
- Einrückung in der Sidebar verringert
- Seite einer Maximalbreite von 960px zugewiesen

* Release Version 1.0 – 08-09-2007

bekannte Probleme:
* Bilder im Textfluss sollen einen Standardabstand zum Text erhalten
Vorschläge/Meinungen für kommende Versionen:
* Kommentarbox sollte weiter verbessert und verschönert werden
* Zwischen den Beiträgen sollte eine kleine Trenngrafik sein
* Option Track- und Pingbacks von Kommentaren lösen
* Custom-Fields einbauen um Metatags dynamisch zu schreiben

Vorherige Versionen
* Version 1.1 als zip: blitzblank_11
* Version 1.0 als zip: blitzblank.zip

Andere Wordpress-Themes auf Yaml-Basis:
* Simplex von Andreas Lezgus

Weiterführende Links:
* Anpassung des Blitzblank-Themes (Artikel bei DrWeb)
* Yaml-Projektseite
* Wordpress-Buch-Projektseite (samt Leertheme)
* Tutorial Spiegeleffekt mit Photoshop
* Tutorial Spiegeleffekt mit Gimp
* Simplex-Theme

Folgende Blogs setzen derzeit auf Blitzblank:
(bitte im Kommentar Bescheid geben, um in der Liste zu landen)

* Fitfuttern – Blog zu Sport und Ernährung
* Jurafernstudium-Blog
* Dieter Welzel
* Tiemsche

Feed abonnieren, Beitrag emailen oder bookmarken...

Beim problogger Darren Rowse bin ich auf ein SEO-Tutorial aufmerksam geworden. Nimm bitte zur Kenntnis, dass ich kein SEO-Fachmann bin und folglich Darrens Einschätzungen zwar übernehmen, nicht aber beurteilen kann.
Darüber hinaus sind die hier aufgelisteten Taktiken weder geprüft, noch empfehle ich die Anwendung aller.

Es gibt On-Site-SEO und Off-Site-SEO.

Mit Off-Site ist gemeint, dass sich die Maßnahmen auf andere Pages beziehen.
Hier sind besonders die eingehenden Links sehr wichtig.
Wünschenswert wären Links auf die eigene Page von besser gerankten, themenbezogenen Seiten, welche die gleichen Keywords benutzen.

Wie bekomme ich diese Links?
* qualitativ hochwertiger Content
* interessierte Blogger per Email benachrichtigen
* für die Links bezahlen (i.e. textlinksads)
* Links tauschen

Beim OnSite-SEO (Maßnahmen auf der eigenen Page) muss man sich fragen, welche Keywords man benutzen will und wie man diese am besten in Szene setzt.

Hierbei können folgende Fragestellungen helfen, die geeigneten Wörter zu finden:
* Mit welchen Worten will ich die Leute auf die Seite bekommen?
* Nach welchen Begriffen werden die Leute wohl suchen, wenn Sie die benötigte Info brauchen?
* Wie würde ich mir die Infos besorgen?
* Was passiert, wenn ich die Keywords in die Suchmaschine eingebe?
* Welche Keywords benutzen die anderen Seiten, die diese Info anbieten?

Wenn wir uns für die Keywords entschieden haben, müssen wir noch wissen, wo wir diese platzieren.

Hierfür gibt es folgende Möglichkeiten:
* In den Titel der Seite oder des Posts
* In die URL
* In die ausgehenden Links
* Als Tags in Überschriften, Bildbeschreibung und/oder fettgedruckt

Der Umfang der Keywords auf der gesamten Domain scheint ebenfalls von Bedeutung zu sein. Eine Domain mit den Keywords auf vielen Seiten wird höher gerankt als eine mit weniger.

Valider, sauberer Code liefert ebenfalls eine bessere Platzierung bei der Suchmaschine.

Interne Verlinkung macht es den Crawlern einfacher. Daher ist eine Sitemap bzw. Archiv und die Anzeige der Kategorien im Sideblog SEO-technisch zu empfehlen.

Google soll nun auch die Laufzeit der Domain mit in den Suchalgorithmus einbeziehen. Spamseiten sind wohl meist nur kurzfristig registriert.

Am Ende will ich noch auf die Länge der Posts eingehen. Besonders kurze Beiträge fallen wohl negativ bei Google auf und besonders lange senken die Keyworddichte. Darren empfiehlt eine Länge von mindestens 250 Wörtern je Artikel.

Man sollte in jedem Fall Pings an Pingomatic versenden und bei der Yahoo-Suche ist es wohl von Vorteil, wenn man seinen RSS-Feed bei MyYahoo registriert.

Oft kann man seine Seite mauell in den Index der Suchmaschinen eintragen. Wenn man es besonders eilig hat, sollte man das in jedem Fall machen.

Abschließend lässt sich sagen, dass es Zeit braucht, bis man fortlaufend gute Rankings bei den Suchmaschinen erhält.

Für Ergänzungen in den Kommentaren oder per Mail bedanke ich mich schon mal vorab.

Quellen: problogger
Literaturempfehlung: Seobook

Feed abonnieren, Beitrag emailen oder bookmarken...

Quelle: basicthinking

Feed abonnieren, Beitrag emailen oder bookmarken...

Screencast zur Optimierung von Blog und Feed.
Quelle: screencasting

Feed abonnieren, Beitrag emailen oder bookmarken...