Dein eigenes WordPress-Theme in 9 Schritten

Webseiten programmieren zu können ist ultra nice! Doch leider lässt sich eine Webseite, die einfach mit HTML und CSS programmiert wurde, nicht wirklich gut verwalten. Dafür brauchen wir Content Management Systeme, kurz CMS. Das meistgenutze CMS mit einem Marktanteil von 63% (Stand 2019) ist WordPress. Um mit WordPress völlig frei und ohne Templates Webseiten zu gestalten, muss man selber Themes programmieren. Das ist leider nicht ganz einfach. Um das möglichst vielen näher zu bringen, habe ich eine Anleitung konzipiert, wie man in 9 Schritten ein eigenes WordPress-Theme umsetzen kann. Viel Spass!

Damit ihr wirklich von dieser Anleitung profitiert, solltet ihr euch mindestens zwei Stunden Zeit dafür nehmen. Ihr könnt einerseits mit dem Video unten arbeiten, dort ist die Anleitung verfilmt. Wenn ihrs lieber oldschool habt, gibt es die Anleitung unten auch in Textform. Und gleich schon zu Beginn: Wenn ihr nach dieser Anleitung Lust habt, mehr zu lernen, biete ich weiterführende und ausführlichere Kurse zu WordPress-Themes an. Mehr Infos dazu findet ihr auf folgender Webseite: www.wordpress-heroes.ch

Videoanleitung

FYI: Die Snippets, von denen geredet wird, findet ihr unten in der Textanleitung unter dem entsprechenden Punkt.

Textanleitung

Schritt 1: Mise en Place

Wir beginnen wie beim Kochen und machen ein Mise en Place. Sprich: Wir bauen uns unsere Entwicklungsumgebung auf. Die Zutaten, die wir brauchen, sind folgende:

Brackets oder einen anderen Code-Editor http://brackets.io
MAMP (nicht PRO Version) https://www.mamp.info/de/
WordPress-Installationsdatei https://de.wordpress.org/download/

Ladet euch die zwei Programme und die WordPress-Installationsdatei herunter. Anschliessend müssen folgende Punkte erledigt werden:

  • Erstelle einen Ordner auf deinem PC/Laptop, wo du das Theme abspeichern willst. Gib diesem Ordner einen Namen ohne Umlaute oder Abstände.
  • Entpacke die eben runtergeladene WordPress-Installationsdatei und verschiebe diese in den Ordner, den du erstellt hast.
  • Öffne das soeben heruntergeladene Programm MAMP. Wähle bei den Einstellungen unter Webserver den Ordner an, in dem du die Installationsdatei abgespeichert hast.
  • Es öffnet sich nun automatisch eine Webseite (http://localhost:8888/MAMP/?language=German). Geh in der Navigation dieser Webseite auf Tools, bzw. von dort aus auf phpmyadmin.
  • Lege unter dem Punkt Datenbanken eine neue Datenbank an. Gib dieser einen Namen ohne Abstände und Umlaute (ich habe neunschrittetheme gewählt) und speichere sie ab.

Die von dir erstellte Datenbank brauchen wir nachher für die Aufsetzung von WordPress. Deine Datenbank hat nun den von dir gewählten Namen und ansonsten die Standardeinstellungen. Diese sind in der Tabelle unten aufgelistet:

Datenbankname [Der von dir eingegebene Name]
Nutzername root
Passwort root
Datenbankhost localhost
Präfix [noch unbestimmt]

 

Schritt 2: Die Installation

Gebe in deinem Browser jetzt localhost:8888 ein. So kommst du auf das Installationsfenster von WordPress. Klicke auf let’s go (oder los gehts)!

Jetzt kannst du die Infos deiner Datenbank eintragen. Das muss gemacht werden, damit diese nachher richtig mit dem CMS zusammenspielt. Den Präfix kannst du selber definieren (ich habe nst_ gewählt). Lasse ihn aber nicht auf der Standardeinstellung, das ist sicherheitstechnisch gefährlich. Klicke nach all diesen getätigten Angaben auf weiter.

Erstelle dir jetzt deinen eigenen WordPress-Benutzer. Schreibe dir die hier getätigten Eingaben auf, damit du dich nachher sicher wieder einloggen kannst.

Rufe, wenn du die Installation abgeschlossen hast, localhost:8888 wieder auf. Öffne in einem zweiten Tab localhost:8888/wp-admin.php und logge dich dort mit dem vorhin erstellten Nutzernamen und Passwort ein.

Nun bist du im Backend deiner Webseite eingeloggt 🙂

Schritt 3: Das Theme

Du hast im Moment das Standard-Theme von WordPress auf deiner Webseite installiert. Genau das wollen wir jetzt ändern, denn wir wollen im Anschluss ein eigenes, 100% individualisierbares Theme erstellen.

  • Geh in dem Ordner, wo du deine Webseite lokal auf deinem PC abgespeichert hast, in den Ordner wp-content/themes. Dort siehst du die im Moment installierten Themes (das sollten die gleichen drei sein, die du im Backend unter dem Punkt Design/Themes siehst) .
  • Erstelle hier einen Ordner für dein eigenes Theme. Benenne dieses nach deinen Wünschen, aber ohne Umlaute, Sonderzeichen und Abstände. Ich habe hier den Namen neunschrittetheme gewählt.
  • Öffne jetzt das eben installierte Programm Brackets (oder einen anderen Code-Editor). Wähle dort den Ordner, den du soeben erstellt hast, als Ausgangslage.
  • Erstelle nun zwei Dateien in diesem Ordner:
index.php
style.css

Kopiere in die Datei index.php folgenden Code rein. Der gibt die HTML-Grundstrukturen des Themes vor.

In der Datei CSS gibst du folgende Definitionen an:

Die Angaben, die du machst, kannst du natürlich selber bestimmen, einfach die Punkte sollten gleich bleiben.

Nun hast du dein erstes eigenes Theme erstellt!

Schritt 4: Der erste Blick

Auf deiner WordPress-Seite hat sich nun natürlich noch nichts geändert. Dafür musst du zuerst dein eigenes, soeben erstelltes Theme aktivieren. Das machst du unter dem Punkt Design/Themes. Wenn du dort drauf gehst, sollte nun – nebst den anderen dreien – auch dein Theme unter dem von dir gewählten Namen erscheinen. Unten sollte sich ein Button finden, mit dem du das Theme aktivieren kannst. Wenn du die Seite localhost:8888 neu lädst erscheint nun die Webseite mit deinem eigenen Theme.

Schritt 5: Die Dynamik

Bis jetzt kann dieses Theme nichts. Also wirklich nichts 🙂 Aber das ändert sich bald, denn wir fügen nun einige Dinge ein, die das Theme dynamischer machen und mit dem Backend zusammenspielen lassen.

5.1: Seitentitel und Slogan

Wir wollen, dass im h1 im Header der im Backend definierte Seitentitel für unsere Webseite ausgegeben wird. Dieser soll sich, wenn wir im Backend den Namen ändern, auch anpassen. Dafür löschst du den Inhalt zwischen den h1 raus und ersetzt ihn durch diesen:

Füge dasselbe Snippet auch im Head zwischen die title-Tags ein. Zwischen den p-Tag im Header, wo der Slogan hin soll, fügst du folgendes Snippet:

Wenn du die index.php-Datei abgespeichert hast, kannst du im Backend unter Einstellungen nun den Titel und den Untertitel ändern. Dieser wird sich auf der Webseite nun automatisch anpassen.

5.2: Stylesheet

Die style.css-Datei hast du ja ganz zu Beginn schon erstellt. Doch darin sind bisher nur die Angaben zum Theme gemacht worden, die Webseite ist noch ungestylt. Mit folgendem Tag im head kannst du das Stylesheet mit index.php verknüpfen.

Füge in die Datei style.css nun folgende Zeilen ein. Wenn du dann dein eigenes Theme schreibst, musst du diese natürlich selbst schreiben, aber damit du dich hier nur auf die Funktionalitäten von WordPress konzentrieren kannst, hab ich das CSS schon geschrieben.

Und voilà, jetzt sieht deine Webseite auch schon schön aus 🙂

5.3: Logo / Titel verlinken

Damit man, wenn man auf Unterseiten ist, mit einem Klick auf das Logo (bei uns jetzt einfach der Seitentitel) immer zurück auf die Startseite kommt, müssen wir diesen Titel dynamisch mit der Startseite verlinken. Das machen wir, indem wir in den h1-Tag folgendes einfügen:

Dein Logo (oder in diesem Fall Titel) verweist jetzt immer auf die Startseite, auch wenn du diese im Verlauf der Erstellung deines Themes änderst.

5.4: Unterstützdende Tags

Die nachfolgenden Angaben sind extrem wichtig! Sie verändern auf den ersten Blick nicht viel, sind aber für die Funktionalität deines Themes essentiell! Das Einzige, was du auf den ersten Blick als Veränderung erkennst, ist die für WordPress typische Bearbeitungsleiste, die dir dann angezeigt wird.

Ändere den Body-Tag so ab:

Füge vor den schliessenden Head-Tag folgendes ein:

Füge vor dem schliessenden Body-Tag folgendes ein:

Et voilà, nun hast du dein Theme zum ersten Mal etwas dynamischer gemacht 🙂

Schritt 6: Das Zerstückeln

Eine Webseite ist ja meistens so aufgebaut, dass sie auf der ganzen Seite immer denselben Header und denselben Footer hat. Genau dafür sorgen wir jetzt, in dem wir unser Theme «zerstückeln».

  • Erstelle im Brackets eine Datei mit dem Namen header.php und eine mit dem Namen footer.php
  • Nun schneidest du alle Inhalte aus index.php bis und mit schliessendem Header-Tag aus und fügst alles in die Datei header.php ein
  • Danach schneidest du alles ab dem öffnenden Footer-Tag aus und fügst es in die Datei footer.php ein

Jetzt speicherst du alle Dateien mal ab. In einem nächsten Schritt musst du die Teile, die du entfernt hast, wieder einfügen. Das geschieht mit den Template-Iclude-Tags.

Zuoberst in der Datei index.php fügst du folgendes ein:

Und zuunterst das:

Wenn du die Seite aktualisierst, sollte sich nun nichts verändert haben. Das ist aber auch gut so 🙂

Schritt 7: Die Navigation

Nun fügen wir eine Navigation ein, die nachher im freien Backend anpassbar ist. Dafür müssen zwei Dinge getan werden:

  1. Die Navigation muss registriert werden.
  2. Der Navigation muss einen Platz auf der Webseite zugewiesen werden.

Doch beginnen wir zuoberst. Zu Beginn muss eine neue Datei erstellt werden, functions.php. Diese würde, wenn das Theme – nach diesen neun Schritten – weiter optimiert würde, sehr häufig gebraucht werden. In diese Datei fügst du nun dieses Schnipsel ein:

Diese Funktion ist etwas unverständlich, deshalb hier die wichtigsten Begriffe erklärt:

add_action Mit diesem Befehl definierst du, wann die Funktion aufgerufen werden soll.
after_setup_theme Mit diesem Befehl sagst du, dass die Funktion durchgeführt werden soll, nachdem das Theme geladen ist.
register_nav_menu Dieser Befehl registriert nachher deine Navigation.
hauptnavigation Das ist der Name, der die Navigation erhält. Wenn du diese Navigation nachher platzieren willst, brauchst du diesen Namen. Du kannst diesen beliebig wählen.
Navigation oben So wird deine Navigation im Backend benannt.

Wenn du nun alles speicherst und das Backend neu lädst, sollte unter dem Punkt Design der Punkt «Menus» erscheinen. Dort kannst du deine Navigation nun mal erfassen. Füge dazu einfach mal alle Beispiel-Seiten ein.

Wenn du das Frontend nachher aktualisierst, wirst du noch nichts sehen. Das, weil wir den Ort für diese Navigation noch nicht bestimmt haben. Das machen wir jetzt, und zwar in dem wir das folgende Codeschnipsel zwischen die Nav-Tags einfügen.

Du siehst, dass wir nun den Namen, den wir der Navigation gegeben haben, hier auch angeben mussten. So wird der Code von vorher zugewiesen. Du kannst dich jetzt auch durch die Navigation klicken, doch auf den jeweiligen Unterseiten siehst du noch keinen Inhalt. Das ändern wir jetzt!

Schritt 8: Der Loop (eigentlich das wichtigste)

Mit dem sogenannten Loop weisen wir den Seiten nun die entsprechenden Inhalte zu. Alle Infos zum Loop findest du auf dieser Seite im WordPress-Codex. Erstelle, bevor wir beginnen, einige Testbeiträge mit Inhalten (z.B. Bildern und Titeln). Füge diese dann auch in die Navigation ein. Anschliessend fügen wir folgendes Schnipsel vor den Article-Tag in der Datei index.php ein.

Das ist der Startpunkt des Loops. Damit definieren wir, dass Inhalte ausgegeben werden. Füge nun nach den schliessenden Article-Tag folgendes ein:

Dieser Teil sorgt dafür, dass wenn eine Seite nicht verfügbar ist, eine Fehlermeldung erscheint. Wenn wir die Seite nun neu laden, ist leider immer noch nicht viel passiert. Dafür müssen wir noch zwei Post-Tags (findest du hier im WordPress-Codex) einfügen. Diese sorgen dafür, dass die Inhalte dynamisch aus dem Artikel geladen werden.

Ersetze alles, was zwischen den Article-Klammern stand (und die Klammern auch) und ersetze das durch folgendes Codeschnipsel.

Mit the_title() holst du den Titel vom Beitrag/von der Seite und mit the_content() den Inhalt. Solche Post-Tags gibt es unendlich viele, so können beispielsweise auch der Autor, das Veröffentlichungsdatum des Beitrags etc. ausgegeben werden.

Schritt 9: Das Splitting

Jetzt kommt noch der finale Schritt, der fehlt, um das Theme abzuschliessen. Wir erstellen nämlich für die verschiedenen Beitragstypen eigene Ansichten. Und zwar für:

page.php Seiten/Pages. Meist für statische Seiten wie z.B. Impressum, Kontakt oder Portfolio genutzt.
single.php Beiträge/Posts. Meist für dynamische Inhalte gebraucht.
front-page.php Startseite.

Es gäbe noch weitere dieser Seitentypen (z.b. archive.php, date.php etc.). Eine Übersicht und deren Hierarchien (also wann welcher Seitentyp verwendet wird, findest du unter dieser Webseite).

Als Erstes erstellen wir im Backend jedoch eine neue Seite mit dem Namen «Startseite». Füge dort beliebigen Inhalt ein. In den Einstellungen im Backend unter «Lesen», definierst du diese Seite nun als statische Startseite (bei Homepage). Das heisst, dass auf der Startseite neu nicht mehr die neusten Beiträge angezeigt werden, sondern die Inhalte, die du definierst.

Nun erstellen wir die drei oben aufgelisteten Dateien im Brackets. Füge in jede dieser Dateien eine Kopie des Inhalts der Datei index.php ein. Um überprüfen zu können, wo jetzt welches Inhalts-Template genutzt wird, fügen wir nun auf jeder der neu erstellten Seite eine Markierung ein:

Für page.php und single.php schreibst du natürlich die entsprechenden Namen zwischen die Mark-Klammern.

Wenn du anschliessend alles abspeicherst und dich durch die Seiten und Beiträge klickst, siehst du, dass für unterschiedliche Sachen unterschiedliche Templates verwendet werden. Das können wir uns jetzt zu Nutze machen! 🙂

Als Erstes wollen wir, dass bei allen Beiträgen/Posts das Datum der Veröffentlichung und der Autor/die Autorin angezeigt wird. Dafür gehst du in die Datei single.php, denn diese Datei steuert, welche Inhalte in den Beiträgen angezeigt wird. Dafür fügst du oberhalb des Titels (h2) folgendes ein:

Es handelt sich bei the_author() und the_time() wieder um die sogenannten Post-Tags. Wenn du das nun abspeicherst, siehst du, dass diese Inhalte bei allen Beiträgen/Posts nun angezeigt werden.

Abschliessend passen wir die Startseite noch etwas an, und zwar entfernen wir bei dieser Seite den Titel. Diese ist ja eine Startseite und das sieht etwas blöd aus. Dafür entfernst du in der Datei front.page.php einfach den folgenden Tag:

BTW: Die Auszeichnungen mit dem Mark-Tag kannst du natürlich wieder entfernen, die haben wir nur zu Testzwecken benötigt.

Und schon hast du dein erstes eigenes, funktionales WordPress-Theme!

Hoffentlich erkennst du durch dieses Tutorial schon etwas, wie endlos die Möglichkeiten mit WordPress sind! Wenn du dich intensiver mit diesem Thema auseinandersetzen möchtest, kannst du hier deinen Kurs buchen!

 

(sba)

Kritik
von Lea Moser

Die 9-Schritte-Anleitung

Die Anleitung habe ich in einem spätabendliche und koffeinlastigen Rush geschrieben und ausgearbeitet. Was mühsam war, ist dass ich nicht einfach das Theme machen konnte, sondern mir die Arbeitsschritte genau notieren musste, damit sich daraus ein Text machen liess. Auch das erstellen der Snippets hat seine Zeit gedauert.

Die Anleitung als Video

Auch dieser Teil ist in einem ziemlichen Rush entstanden. Die Schwierigkeiten waren ein schlaues Screenfilming Programm zu finden (ich habe am schluss mit der Testversion von Snagit gearbeitet und keine Probleme damit gehabt) und dass ich eine Stunde am Stück reden musste. Die Stellen wo ich Wasser getrunken habe, habe ich am Schluss aber rausgeschnitten :)

Die dazugehörige Webseite

Das war der Teil, der mir fast am meisten Spass gemacht hat. Ich habe die Webseite zuerst im AdobeXD gestaltet und sie nachher mit einem selbst programmierten Wordpress-Theme erstellt. Gross Probleme hat des dabei nicht gegeben, denn ich bin zurzeit ziemlich fit im Wordpress-Themes programmieren.

Die Konzipierung der Kurse

Dieser Teil war etwas mühsam, ich habe mir aus meinem Wissen (welches natürlich bei weitem nicht alles umfasst) versucht, die wichtigsten Punkte rauszunehmen und irgendwie in nicht allzu lange Kurse zu packen. Das ist mir schlussendlich ziemlich gut gelungen und ich hoffe dass sich jemand dazu entscheidet, auch zu lernen wie man selber Wordpress-Themes umsetzt :)

Die Blogeinträge

Auf der Webseite www.wordpress-heroes.ch habe ich einen Blog aufgebaut. Damit dieser zu Beginn nicht so leer aussieht, habe ich dort einige Beiträge erfasst. Ich hatte etwas mühe mit der Themenfindung jeweils aber es hat mir dann doch Spass gemacht, vor allen der Beitrag Wordpress-Lexikon mit den Audiobeiträgen.

Keine Kommentare

Schreibe einen Kommentar