Menu

Katharina Brunner

Bloggin' since 2007

Ich habe mir mein eigenes WordPress-Theme gebastelt

Alles neu! Und grüner als je zuvor!

In den vergangenen Wochen habe ich große Fortschritte darin gemacht, Webseiten in WordPress zu programmieren. Jahrelange hatte ich CSS- und PHP-Dateien zwar nach meinen Wünschen verändert, aber selbst geschrieben – also Start mit leeren Datei – hatte ich solche Dateien nie. Das hat sich nun geändert, denn ich habe einfach mal ein Tutorial von Anfang bis Ende durchgemacht und währenddessen sind mir ein paar Lichter aufgegangen.

1. Child-Themes

Ein Child-Theme bezeichnet ein verschachteltes System von Theme-Dateien. Das Parent-Theme, also die übergeordnete Datei, wird nicht verändert, sondern nur das „Kind“. Konkret habe ich also nie etwas an der originären Bootstrap-CSS-Datei verändert, sondern immer an meiner eigenen CSS-Datei. Schon eine einzige CSS-Datei kann dabei als ein Child-Theme dienen. Das Aussehen der Webseite bestimmt sich dann allein durch die Child-CSS-Datei, nur da werden Veränderungen notiert. Als Vorteil eines solchen Systems wird immer wieder gepriesen, dass sich bei Updates eines Themes nichts ändert. Das war mir immer etwas schleierhaft, denn dieses Problem ist mir in den letzten Jahren nie untergekommen. Den großen Vorteil, den ich sehe ist, dass die CSS-Datei, mit der man arbeitet, einfach nur den Code beinhaltet, der verändert wurde. Ändere ich also zum Original zum Beispiel nur die Größe der Überschrift und die Linkfarbe, dann steht im Child-CSS nur:

h1 {font-size: 1.2em;}
a {color: #ff0000;}

Das macht es sehr viel übersichtlicher, denn der Inhalt der Datei ist weniger und der eigene, also leichter zu lesen, wie ich finde.

Mehr zu Child-Themes, was sie ausmacht und wie man sie erstellt, gibt es bei Elmastudio.

2. Bootstrap Framework

Twitter hat mit Bootstrap  ein Framework veröffentlicht, auf dem man sein eigenes Webdesign aufbauen kann. Ganz leer war die Datei deshalb doch nicht, auf dem diese Seite basiert. Das Boostrap-Framework, das sind ein paar CSS und Java-Script-Dateien, die einen Rahmen für die eigene Seite setzen. Gerade die Tatsache, dass das Bootstrap bereits responsive ist, sich also automatisch an verschiedene Bildschirmgrößen anpasst, fand ich überzeugend. Denn dieses Feature wollte ich, wäre mir aber viel zu komplex, um es selbst zu bauen. Generell besteht eine Bildschirmbreite aus zwölf Teilen, die dann je nach Breite aneinandergebastelt werden. Zum Beispiel: Ich wollte einen breiten Bereich für den Text und eine Seitenleiste. Der breite Teil läuft unter der CSS-Klasse „span9“, die Seitenleiste unter „span3“. Möchte ich eine breitere Sidebar, könnte ich dafür „span4“ wählen, der Textbereich würde sich dann zu „span8“ verschmälern. Wichtig ist, dass sich die horizontalen Bereich immer auf zwölf aufaddieren. Ich könnte also theoretisch bis zu zwölf Blöcke nebeneinander laufen lassen.
Ein sehr gutes Tutorial, wie man Bootstrap und WordPress verbinden kann, gibt es beim Team Treehouse: How to Build a WordPress Theme with Bootstrap

3. WordPress-Templates und functions.php

Mit verschiedenen Templates habe ich bereits bei der Lautschrift angefangen zu arbeiten, ganz neu war mir das Konzept also nicht. Aber richtig systematisch angewandt von Anfang an, hatte ich es noch nicht. Zudem habe ich versucht mir möglichst viele Funktionen direkt in das Theme einzubauen, zum Beispiel mehrere Widget-Bereiche im Theme (Sidebar, Footer und an der oberen schwarzen Leiste). So brauche ich auch nicht so viel Plugins, zum Beispiel um Texte in zwei Spalten darzustellen.

To Do

An ein paar Ecken gibt es noch etwas zu basteln: Die Ansicht auf dem Smartphone scheint noch nicht wirklich top zu sein, einen „Back-to-top“-Button im Footer zum Beispiel oder Formatvorlagen. Anbieten würde sich dazu zum Beispiel die Rubrik Lesenswertes. Auch ein RSS-Button fehlt noch.

Fazit

Mit Vorkenntnissen in CSS und PHP ist das alles gar nicht so schwierig – vorausgesetzt, ich lese die Readmes mal aufmerksam und überfliege sie nicht nur.

Schreibe einen Kommentar