Diesen Talk habe ich am 16. April 2016 für das WordCamp in Nürnberg gemacht. Eine Wiederholung mit leichten Veränderungen gab es beim WP-MeetUp Hamburg Ende Juni 2016.
Mein WordPress.org-Name WP-Dummie ist Programm, also richtet sich meine Session an WordPress-Einsteigerinnen.
Wer bisher nur Standard-Themes verwendet hat und sich an die Umgestaltung nicht recht herantraute, lernt, dass es gar nicht schwierig ist, eine eigene Gestaltung mit WP umzusetzen oder Änderungen am Lieblingstheme vorzunehmen.
Es ist allerdings Voraussetzung oder mindestens hilfreich, ein bisschen CSS zu können.
In 11 Schritten von TwentyEleven zum individuellen Theme.
- Am Anfang steht z.B. der Wunsch der auftraggebenden Person oder unsere vage Vorstellung von unserer neuen Webpräsenz.
Im Beispiel funktioniert die aktuelle Website gut und soll gar nicht groß verändert werden. Es gab aber den Wunsch, dass die Website responsive werden soll und die Auftraggeberin wollte selbst den Content ändern. - Im Layout- oder Bildbearbeitungsprogramm entstehen nun unsere Entwürfe. Da die vorliegende Website recht einfach gestaltet ist, bietet sich TwentyEleven zur Umsetzung an: Es ist responsive und gut geeignet für ein Childtheme.
Beim Gestalten habe ich die Bereiche von TwentyEleven im Hinterkopf:
• Header
• Content
• Sidebar (Widgets)
• Footer (Widgets) - Die Entwürfe werden als PDF/JPG ausgegeben (oder ausgedruckt) und an die auftraggebende Person geschickt. Möglichst in realistischer Größe/Auflösung. Ich gestalte zunächst für 15-Zoll-Monitore mit 1280 bis 1440 px Breite.
- Während die Entscheidung fällt, wird WordPress installiert. Entweder lokal oder auf dem Server. (Das führt zu weit, dafür gibt es jede Menge Tutorials im Netz).
Aus unserer frischen Installation löschen wir alle Themes und installieren als einziges das Parent-Theme, in diesem Fall TwentyEleven. - Nun ist es sinnvoll, erst einmal ein bisschen Content anzulegen, deswegen kommt WordPress auch standardmäßig mit einer Beispielseite und einem Beispiel-Beitrag („Hallo Welt“). Wenn wir die Texte schon haben, können wir sie alle eingeben. Wir sollten auch eines oder mehrere Menüs anlegen und die entsprechenden Widgets.
- Nachdem wir Content haben, installieren wir das Plugin „One click child theme“ Das Plugin sorgt dafür, dass wir beim Anlegen alles richtig machen und sorgt dafür, dass die Installation und das Parent-Theme updatefähig bleiben.
- Nun brauchen wir noch einen Screenshot unseres neuen Layouts. Diesen beschneiden wir im Bildbearbeitungsprogramm auf 880×660 px und nennen ihn screenshot.png. Wir legen ihn ebenfalls in unseren Ordner und ersetzen dabei das Bild gleichen Namens, dass das Plugin generiert hatte.
Im Backend unserer Site unter Design > Themes sollte bereits unser neues Theme ausgewählt sein. - Wir können ein neues Headerbild einbauen. Dazu klicken wir im Frontend ganz oben in der Admin-Bar auf „Anpassen“ und dann auf Header-Bild oder wir gehen im Backend auf Design > Anpassen > Header-Bild. Das Bild sollte 1000 px breit sein.
Danach können wir noch ein quadratisches Bild als Favicon hochladen (Design > Anpassen > Website-Information. Das Bild sollte eine Kantenlänge von mindestens 512 px haben. - Im Beispiel möchte ich das Bild über dem Seitentitel/Slogan haben. Bei TwentyEleven steht der Text über dem Bild.
Ich kopiere mir die header.php aus dem Parent-Theme in meinem Child-Theme-Ordner. Und verschiebe die Reihenfolge innerhalb des php-Codes. Dabei achte ich wie der sprichwörtliche Schießhund auf die öffnenden und schließenden spitzen Klammern!
Und weil ich im Header kein Suchfeld haben möchte, lösche ich es ganz. Nach jedem Step überprüfe ich mein Ergebnis. - Ebenfalls in die header.php kann man Google-Schriften einbetten. Das ist der einfachste Weg. Einfach den von Google zur Verfügung gestellten Codeschnippsel vor dem schließenden </head>-Tag einfügen.
- Und jetzt sind wir soweit. Nun brauchen wir nur noch CSS.
Ich hab da mal was vorbereitet …