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
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
Nachdem Du das Theme installiert und aktiviert hast, kannst Du Dir das Ergebnis über den InstantWP-Administrationsbereich (WordPress Frontpage) anschauen:
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.
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
define('WP_DEBUG', false);durch diese
define('WP_DEBUG', true);
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 (3.3.7) 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):
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):
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '3.3.7', true ); wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), '3.3.7', 'all' ); wp_enqueue_script( 'bootstrap-js' ); wp_enqueue_style( 'bootstrap-css' );
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.