Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 16. Februar 2018

Aktualisiert am: 21. November 2018

grüne Wiese

Dein eigenes WordPress-Theme (Teil 1): Testumgebung erstellen

Du willst selbst ein Theme erstellen oder Themes und Plugins ohne Risiko testen? Im ersten Teil unseres Dreiteilers zeigen wir Dir, wie Du eine einfache lokale Testumgebung mit Bootstrap 3 für WordPress erstellst.

Wer den White Screen of Death kennt, kann ein Lied davon singen: Themes und Plugins live auszuprobieren, ist keine gute Idee. Selbst gut gepflegte Software kann im Zusammenspiel mit anderen Programmen Probleme verursachen. Riskant sind vor allem Codeanpassungen im laufenden Betrieb. Und wer ein eigenes Theme entwickeln möchte, macht dies ohnehin außerhalb der Produktivumgebung.

Deshalb solltest Du Anpassungen vorab (offline) testen. Mit einer lokalen Testumgebung arbeitest Du unabhängig von der Website und brauchst Dir über Sicherheitsrisiken keine Gedanken zu machen. Das Starter-Theme Underscores und das Framework Bootstrap 3 sind dabei eine ideale Basis für die Entwicklung eines eigenen Themes.

Wichtig: Diese Anleitung richtet sich an erfahrene WordPress-Nutzer mit PHP-Kenntnissen. Voraussetzung ist eine lokale WordPress-Installation bzw. ein Hosting-Paket für den Live-Betrieb.

Schritt 1: WP Instant starten und WordPress aktualisieren

Das ideale Werkzeug für unser Vorhaben ist InstantWP: Das Programm simuliert den benötigten Server und enthält ein unter Windows und Mac OS lauffähiges WordPress. Dazu musst Du nur die .zip-Datei herunterladen und die Datei Start-InstantWP doppelklicken. Vielleicht meckert Dein Antiviren-Programm und der Zugriff muss durch die Firewall zugelassen werden – doch keine Sorge, InstantWP ist Open Source Software und frei von Viren oder Trojanern.

Nach dem Start kannst Du Dich über den Administrationsbereich von InstantWP (WordPress Admin) in das WordPress-Backend einloggen (Benutzer: „admin“, Passwort: „password“). Als Erstes solltest Du WordPress aktualisieren. Bei der Gelegenheit kannst Du auch die Sprache einstellen (Settings -> General -> Site Language) und Titel/Untertitel anpassen.

Administrationsbereich von InstantWP

Administrationsbereich von InstantWP

Schritt 2: Theme installieren

Um Anpassungen an Deiner bestehenden Website vorab zu testen, installierst Du das gleiche Theme und übernimmst die Einstellungen Deiner Website. Ist die Testumgebung für die Entwicklung eines eigenen Themes gedacht, nutzt Du am besten das Basis-Theme underscores.me. Damit hast Du schon mal ein sauber programmiertes Fundament für Dein eigenes Layout. Gib dem Theme einen Namen (z. B. „meintheme“), klicke auf Generate und lade dann die .zip-Datei herunter.

underscores

underscores

Nachdem Du das Theme installiert und aktiviert hast, kannst Du Dir das Ergebnis über den InstantWP-Administrationsbereich (WordPress Frontpage) anschauen:

underscores frontend

Das Layout von Underscores ist im Originalzustand äußerst minimalistisch. Damit bleibt mehr Raum für individuelle Anpassungen.

Wichtig: Aus Sicherheitsgründen sollte mindestens ein alternatives Theme aktiviert sein, auf welches WordPress im Notfall zurückgreifen kann.

Schritt 3: Debug Modus aktivieren

Zu einer Testumgebung gehört auch das sogenannte Debugging, also das Aufspüren (und Beheben) von Bugs. Damit WordPress bei fehlerhaftem PHP-Code statt einer weißen Seite eine aussagekräftige Fehlermeldung ausgibt, musst Du den Debug-Modus aktivieren. Rufe dazu den Web File Manager von InstantWP auf (Administrationsbereich -> Themes Folder) und navigiere in das WordPress-Hauptverzeichnis.

InstantWP Filemanager

Der InstantWP Web File Manager funktioniert wie ein FTP-Programm – nur offline.

Per Rechtsklick lädst Du die Datei wp-config.php herunter und ersetzt die Zeile

durch diese

Schritt 4: Bootstrap einbinden

Bootstrap ist ein beliebtes Open-Source-Framework mit fertigen Buttons, Navigationsleisten, Grid-Systemen, Tabellen und vielem mehr. Als Basis dienen CSS-Komponenten, Schriften, Icons und JavaScript-Code. Um den Baukasten nutzen zu können, muss Bootstrap mit WordPress verbunden werden.

Dazu lädst Du Bootstrap in der aktuellen Version (4.1.1) herunter. Entpacke die Datei und benenne den Ordner in „bootstrap“ um. Im InstantWP-Administrationsbereich wählst Du den Bereich Themes Folder und lädst den Bootstrap-Ordner in das Theme-Verzeichnis (wordpress/wp-admin/themes/meintheme):
Bootstrap hochladen

Um WordPress und Bootstrap miteinander zu verknüpfen, musst Du jetzt nur noch die functions.php Deines Themes anpassen. Wie das funktioniert, haben wir in diesem Beitrag beschrieben (Punkt 3). Achte darauf, im Code die jeweils gültige Bootstrap-Version anzugeben (in diesem Beispiel 3.3.7):

Spielwiese für WordPress

Ob Theme-Entwicklung oder Anpassungen: Mit den vier gezeigten Schritten kannst Du sämtliche Änderungen Deiner privaten Website oder Deines Blogs bequem und gefahrlos vorab testen. Achte darauf, dass Du identische Einstellungen wählst und WordPress, Theme und Plugins auf dem gleichen/aktuellen Stand sind. Wenn alles reibungslos funktioniert, lädst Du die Dateien hoch. Im nächsten Teil dieser Reihe zeigen wir Dir, wie Du einige grundlegende WordPress-Funktionen und Bootstrap-Elemente für die Entwicklung eines Themes verwendest.

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden