Aufgrund der neuen Homepage (siehe Post) wurde es notwendig, sich über das Design mehr Gedanken zu machen.
Da ich nun schon ein wenig Erfahrung mit WordPress machen konnte, lag es auf der Hand auch die 3KonTech Homepage damit zu realisieren.
Grundsätzlich hat man aber bei jedem Framework 2 Möglichkeiten, das Design anzupassen:
- Bestehendes Theme nehmen und anpassen
- Komplett neues Theme erstellen
Bei WordPress (ab Version 2.7) kommt eine nette 3. Möglichkeit hinzu: ChildThemes
Wenn man ein (freies) Theme gefunden hat, das einem im Großen und Ganzen zusagt, hinsichtlich Layout, Widgets, usw. dann ist das sicher die zu empfehlende Variante. Möchte man ein gänzlich neues Layout entwickeln, sollte man eventuell von ganz Neu beginnen. Ein paar Infos dazu später…
| Pro's | Con's |
|---|---|
| Änderungen "überleben" Updates | Webpage wird ev. langsamer |
| Schnell gemacht bei kleinen Anpassungen |
Um ein Child Theme zu realisieren muss man sich lediglich an eine Konvention halten:
Im File style.css muss ein definierter Header stehen, dadurch findet WordPress dann das Parent Theme.
Hier mein schrittweises Vorgehen:
- Via FTP einen neuen Ordner wp-content/themes erstellen
- Die style.css Datei in den Ordner hochladen
zu 1.: Sinnvoller weise benennt man den Ordner des Child-Themes gleich wie das Parent, jedoch mit einem Postfix versehen.
zu 2.: Den Header in style.css muss man einmal richtig angeben und hochladen, danach kann man über den WP-Adminbereich die Datei komfortabler editieren.
Im style.css importiert man mal den Parent Style, dadurch hat man noch keine visuelle Veränderung, aber man braucht nur mehr die gewünschten Veränderungen vornehemen.
Generell funktioniert das Child-Theme aus Sicht von WordPress so:
Suche im Parent-Theme nach den relevanten Dateien, danach ersetze diese Dateien mit jenen aus dem Child-Theme.
Das funktioniert auch für PHP Dateien. Auf diese Art kann man äußerst einfach z.B. den Footer anpassen, indem man den aus dem Parent-Theme kopiert und im Child-Theme einfügt, jedoch mit den Änderungen, die man möchte.
Außer: bei der Datei functions.php, diese wird zusätzlich geladen, sozusagen werden die beiden aus Parent und Child-Theme gemerged.
Jedoch wird zuerst aus dem Child geladen, danach erst das Parent.
Wird im Parent abgefragt, ob es schon eine Funktion gibt, dann braucht man nur im Child das selbe tun, um diese Funktionalität zu ändern.
if ( ! function_exists( 'function_name' ) ) :
function function_name() {
...
}
endif;
Ein ganz gutes Tutorial zu dem Thema:
Tutorial zu WordPress Themes