Eigenes WordPress Theme erstellen – Tutorial – Teil 1

Wozu ein eigenes WordPress Theme erstellen? Sicher es gibt 1000e WordPress Themes zum Download, sie sind schnell installiert und praktisch. Aber irgendwann will der anspruchsvolle Blogger dann trotzdem ein Theme das auf seine Bedürfnisse zugeschnitten ist. Für ein eigenes Template kann man ein beliebiges Theme abändern, was immer nur einen Kompromiss darstellt. Nicht selten sind gratis Themes bereits Abänderungen von Abänderungen… Üblicherweise bleibt dann eine Menge CSS und HTML Müll übrig, das Theme ist suchmaschinentechnischer Selbstmord, die Codierung ist inkonsequent, nicht logisch aufgebaut usw. Zudem sind leider die meisten Themes voll mit Bugs, die man im fremden Code kaum findet. Früher oder später will man selber ein Theme machen in dem wirklich das drinnen ist was man will, nicht mehr und nicht weniger.

In dieser Artikelreihe wird daher die Erzeugung eines Themes von Anfang an besprochen. Es geht um alle Schritte der Entwicklung vom ersten Überlegungen bis zur fertigen Codierung. Auch Randthemen wie Installation verschiedener Plugins usw. werden besprochen. Die Artikelreihe war einmal auf einem alten Blog von mir online und recht beliebt, hier arbeite ich sie aus Aktualitätsgründen auf Bootstrap um. Die alte Artikelreihe ist einfach in die Tage gekommen. 

Grundüberlegungen Layout & Inhalt

Zuerst macht man sich Gedanken wie die Seite aussehen soll. Hier geht es um grundsätzliches Layout. Wieviele Spalten, wo soll das Menü sein, was soll in welche Sidebars, werden statische Seiten verwendet und als Menü angezeigt, will man Archive verwenden, falls ja welche usw. Hier beginnt man einfach mit ein paar Handskizzen und überlegt welche Teile wohin sollen. Helfen kann es auch andere WordPressthemes durchzusehen, wobei man dabei leider meistens zu sehr auf Farben und Grafiken achten, die aber jetzt noch völlig unerheblich sind. Gut ist es, wenn man die Funktion der Seite prüfen kann und nicht nur einen Screenshot zur Verfügung hat. Dies ist z.B. bei der WordPress.org Theme Sammlung der Fall.

Für unser Projekt gelten folgende Annahmen:

• 2-spaltiges Layout. Ich bin Verfechter einfacher Layouts. Nachdem meine Zielgruppe (in anderen Blogs) nicht zwangsläufig Internetgeübte sind, ist dies umso wichtiger. Ich hasse Seiten, auf denen ich mich erst mal 3 Minuten orientieren muss um zu erkennen wo überhaupt der Haupttext steht. Daher klarer Aufbau.
• Hauptspalte rechts, links ein Sidebar mit Menü.
  In den Sidebars will ich keine Sammlung unzähliger Sinnloswidgets, sondern nur eine Kategorienauswahl, ev. Google Ads und nachdem auch ab und zu „externe Autoren“ etwas verfassen den Metabereich mit Login für Autoren etc. In Kalendern, Monatsarchiven etc. sehe ich hier keinen Sinn. Widgets werden keine verwendet, sondern wir programmieren die Sidebars statisch.
  (Natürlich wird im Rahmen der Artikelserie aber auch auf Widgets, andere Layouts usw. eingegangen.)
• wenige statische Seiten die als kleines Menü oben angezeigt werden (Impressum etc.)

Technische Anforderungen an das WordPress Theme

Auch WordPress Themes haben sich weiterentwickelt. Im Gegensatz zur ersten Artikelreihe bei der ich das Theme völlig selber in HTML/CSS aufgebaut habe ist es heute State of the Art ein ordentliches Framework etc. zu verwenden. Eines der etabliertesten ist wohl Twitter Bootstrap, das ich auch hier verwenden will. Der Vorteil eines solchen Frameworks ist es, dass man auf tausende Stunden Entwicklung zurückgreifen kann, ohne diese selber leisten zu müssen. Cross Browser Kompatibilität, responsives Reagieren auf verschiedene Endgeräte usw. darüber muss man sich endlich heute kaum mehr Gedanken zu machen. Einziger Nachteil ist, dass viele Frameworks auch viel Ladezeit bedeuten, aber auch daran kann man etwas bessern, wie wir später sehen werden.

Absolutes Hauptaugenmerk liegt auf der SEO-Optimierung des Themes. Hier leisten nur sehr wenige Themes halbwegs akzeptable Leistung. SEO Plugins können da nachträglich nichts mehr ändern. Ist der Quellcode mal Müll, dann schafft ein SEO Plugin auch keine Wunder.

Weiters muss ein Theme heute responsiv sein, also sich auf das anzeigende Gerät einstellen. Dies kann recht einfach geschehen, oder auch bis zum Exzess betrieben werden. Wichtig ist aber, dass der Blog auf mobilen Geräten ordentlich lesbar dargestellt wird. Die Anzahl der mobilen Zugriffe ist heute so gross, dass kein Blog auf diese Kundschaft verzichten kann.

 

« Pseudoklasse :not und Kennzeichnen externer Links -  Eigenes WordPress Theme – Teil 2 – Bootstrap Layout »