Anfängerleitfaden für den WordPress-Theme-Editor + 5 kostenlose Code-Editor-Plugins

Veröffentlicht: 2016-11-05

Der WordPress-Theme-Editor ist ein einfacher Texteditor, der sich im WordPress-Dashboard unter Aussehen » Editor befindet.

Mit dem WordPress-Theme-Editor können Sie WordPress-Theme-Dateien über das WordPress-Dashboard (Admin-Bereich) ändern.

Sie können Ihre aktiven Designdateien bearbeiten oder auch ein beliebiges anderes installiertes Design aus dem Dropdown-Menü Design zum Bearbeiten auswählen: auswählen.

Sie können die Vorschau des Design-Editors im Screenshot unten sehen.

WordPress-Theme-Editor
WordPress-Theme-Editor

Praktischerweise können Sie den WordPress-Designeditor verwenden, um Ihre Designdateien schnell und einfach zu bearbeiten, aber dies ist keine empfohlene Methode zum Bearbeiten von Designdateien.

Wenn Sie beispielsweise die Datei styles.php direkt geändert haben, würden Ihre Anpassungen zunächst problemlos funktionieren.

Wenn Sie Ihr Design jedoch auf eine neuere Version Ihres geänderten Designs aktualisieren, gehen alle Ihre Änderungen verloren und es gibt keine Möglichkeit, Ihre Anpassung wiederherzustellen.

Wie passt man WordPress-Themes an?

Wenn Sie Ihren Designs benutzerdefiniertes CSS oder Javascript hinzufügen möchten, können Sie benutzerdefinierte CSS/JavaScript-Plugins installieren.

Sie können diesen Artikel lesen, um mehr über benutzerdefinierte CSS-Plugins zu erfahren. In diesem Artikel habe ich 10 kostenlose Plugins aufgelistet, um benutzerdefiniertes CSS und JavaScript zu Ihrer WordPress-Site hinzuzufügen.

Benutzerdefinierte CSS- und benutzerdefinierte Javascript-Plugins sind einfach zu verwenden und Sie verlieren Ihre Änderungen nicht, wenn Sie Ihre Designs aktualisieren.

Sie können Ihre Designs auch mit den Chrome Developer Tools bearbeiten. Lesen Sie, wie Sie WordPress-Designs mit Chrome-Entwicklungstools bearbeiten.

So fügen Sie den Pfeil zu Ihrem Menü hinzu, ohne JavaScript oder JQuery zu verwenden. Dies ist eine Schritt-für-Schritt-Anleitung für Anfänger, um zu lernen, wie das WordPress-Thema funktioniert.

Kommentare sind ein sehr wichtiger Bestandteil von WordPress-Blogs. In diesem Artikel erfahren Sie, wie Sie Autorenkommentare in WordPress-Designs hervorheben.

Passen Sie WordPress-Themes mit untergeordneten Themen an

Ein Child-Theme ist die beste und empfohlene Methode, um jedes WordPress-Theme anzupassen. Sie können beliebig viele Änderungen vornehmen.

Zum Beispiel verwenden wir bei JustLearnWP ein stark angepasstes untergeordnetes Thema. Das Parent-Theme ist TwentySixteen, aber unser Child-Theme sieht ganz anders aus.

Mit dem untergeordneten Thema können Sie jede Datei mit untergeordneten Themen ändern, Sie können Funktionen zum übergeordneten Thema hinzufügen oder entfernen.

Lesen Sie diesen Artikel, um zu erfahren, warum untergeordnete Themen wichtig sind.

Es gibt zwei Möglichkeiten, untergeordnete Themen zu erstellen. Verwendung von Child-Theme-Plugins oder manuelles Erstellen von Child-Themes.

Wir haben eine Schritt-für-Schritt-Anleitung zum Erstellen eines untergeordneten WordPress-Themes veröffentlicht. In diesem Tutorial lernen Sie, untergeordnete Themen manuell zu erstellen, ohne ein Plugin zu verwenden.

Sie können die WordPress-Site auch lokal auf Ihrem Computer mit WAMP Server und Bitnami Server einrichten. Mit der lokalen WordPress-Site können Sie schnell und einfach neue Plugins und Themes testen und benötigen nicht ständig eine Internetverbindung.

Die lokale WordPress-Site macht Ihren Entwicklungsprozess viel schneller und einfacher. Lesen Sie diese Tutorials, um zu erfahren, wie Sie WordPress lokal mit WAMP Server und Bitnami installieren.

WordPress-Theme-Editor-Plugins

Es gibt viele kostenlose WordPress-Theme-Editor-Plugins. Diese Plugins bieten verschiedene erweiterte Funktionen.

Hier sind einige beliebte Theme-Editor-Plugins für WordPress.

1. WP-Editor

Mit über 100.000 aktiven Installationen ist dies eines der beliebtesten Bearbeitungs-Plugins für WordPress. Es erfordert WordPress 3.0 oder höher.

WP-Editor WordPress-Theme-Editor-Plugin
WP-Editor WordPress-Theme-Editor-Plugin

Der WP-Editor ersetzt die standardmäßigen Plugin- und Theme-Editoren sowie den Seiten-/Post-Editor im WordPress-Dashboard.

WP Editor Verwendet CodeMirror- und FancyBox-Integrationen, um eine funktionsreiche Umgebung zu erstellen. WP Editor überarbeitet die standardmäßigen WordPress-Dateibearbeitungsfunktionen vollständig.

Funktionen des WP-Editors:

  • CodeSpiegel
  • Aktive Linienhervorhebung
  • Linien Nummern
  • Zeilenumbruch
  • Acht Editor-Designs mit Syntaxhervorhebung
  • Vollbildbearbeitung (ESC, F11)
  • Textsuche (CMD + F, STRG + F)
  • Individuelle Einstellungen für jeden Editor
  • FancyBox zur Bildbetrachtung
  • AJAX-Dateibrowser
  • Liste der zulässigen Erweiterungen
  • Einfach zu bedienender Einstellungsbereich

Laden Sie den WP-Editor herunter

2. Erweiterter Code-Editor

Dies ist ein weiteres sehr beliebtes Plugin mit über 100.000 aktiven Installationen.

Erweiterter Code-Editor - WordPress-Theme-Editor-Plugin
Erweiterter Code-Editor – WordPress-Theme-Editor-Plugin

Erweitertes Code-Editor-Plugin, Aktiviert die Syntaxhervorhebung in den integrierten Themen- und Plugin-Quellcode-Editoren und unterstützt PHP, HTML, CSS und JavaScript.

Sie können Ihre Themen oder Plugins bearbeiten, wenn Sie nur Zugriff auf einen Browser haben, indem Sie die Syntaxhervorhebung in den in WordPress integrierten Quellcode-Editoren aktivieren.

Erweiterte Funktionen des Code-Editors

  • Intelligente Suche (String oder Regex) und Suchen und Ersetzen.
  • Vollbild-Editor mit 11 Themen für den Editor.
  • Mehrfaches Undo & Redo (Editor merkt sich alle Änderungen) und AutoComplete mit über 3500 WordPress-Funktionen.
  • Getestet und funktioniert mit IE8,9,10 FF3.6 und höher, Chrome 8 und höher.
  • Ajax erstellt, löscht und speichert Dateien und Ordner.
  • Schaltfläche zum Herunterladen von Dateien, Designs oder Plugins.
  • Kommentarcode aus/ein und integriertes Versionskontrollsystem.

Laden Sie den erweiterten Code-Editor herunter

3. WPide

Dies ist ein weiteres kostenloses Plugin mit so vielen erweiterten Funktionen. WPide erfordert WordPress 3.0 oder höher.

WPide-WordPress Theme Code Editor Plugin
WPide-WordPress Theme Code Editor Plugin

Laut seinem Entwickler ist WPide ein WordPress-Code-Editor mit dem langfristigen Ziel, die ultimative Umgebung zum Codieren/Entwickeln von WordPress-Themes und Plugins zu werden.

Mit diesem kostenlosen Plugin können Sie alle Dateien in Ihrem wp-content-Verzeichnis bearbeiten, nicht nur Plugins und Themes.

Die Code-Vervollständigungsfunktion hilft Ihnen dabei, sich an Ihre WordPress/PHP-Befehle zu erinnern und bietet dabei Funktionsreferenzen.

Sie können auch mehrere gleichzeitige Dateien mit dem Registerkarten-Editor bearbeiten.

Aktuelle Funktionen:

  • Zeilennummerierung, Syntaxhervorhebung und Suchen+Ersetzen
  • Code-Autovervollständigung für WordPress- und PHP-Funktionen zusammen mit Funktionsbeschreibung, Argumenten und gegebenenfalls Rückgabewert
  • Automatische Sicherung jeder Datei, die Sie bearbeiten
  • Verwenden Sie den Dateibrowser, um Dateien umzubenennen, zu löschen, herunterzuladen, zu komprimieren und zu entpacken (damit Sie beispielsweise eine gezippte Version Ihres gesamten Designs herunterladen können).
  • Erstellen Sie neue Dateien und Verzeichnisse

Laden Sie WPide herunter

4. Microthemer Lite

Möchten Sie Ihre eigenen anpassen, wissen aber nichts über HTML, CSS oder PHP? Sie können Microthemer Lite, ein kostenloses Plugin, verwenden, um Ihre Themen anzupassen.

Microthemer Lite WordPress-Theme-Editor-Plugin
Microthemer Lite WordPress-Theme-Editor-Plugin

Dies ist ein kostenloser visueller Theme-Editor, mit dem Sie das Erscheinungsbild jedes WordPress-Themes oder -Plugins anpassen können, ohne Code schreiben zu müssen.

Microthemer ist ein funktionsreiches visuelles Design-Plugin zum Anpassen des Erscheinungsbilds jedes WordPress-Themes oder Plugin-Inhalts, z. B. Kontaktformulare, bis ins kleinste Detail.

Microthemer Lite ist eine kostenlose Version, die vollständige Bearbeitungsfunktionen und den gleichen Kundensupport bietet, den zahlende Kunden erhalten.

Die kostenlose Version beschränkt Sie auf das Bearbeiten/Erstellen von 9 „Selektoren“, z

Der Seitentitel.
Die Seitenbeschreibung.
Ein Bild oder alle Bilder.
Ein Link oder alle Links.
Das Eingabefeld für die Suchseite.
Die Website-Suchschaltfläche.
Ein Beitrag/Seite.
Die Seitenleiste.
Die Fußzeile.

Oder andere 9 Elemente, die Sie auswählen, dies sind nur Beispiele.

Laden Sie Microthemer Lite herunter

5. Design-Editor für soliden Code

Dieses kostenlose Plugin fügt einen verbesserten Theme-Editor mit einer besseren Baumansicht der Theme-Dateien und -Ordner und einigen zusätzlichen Funktionen hinzu.

Funktionen und Highlights:

Beliebige Themendateien in einer Baumstruktur anzeigen (einschließlich Unterverzeichnisse)
Alle Dateien anzeigen (nicht nur PHP und CSS)
Bearbeiten Sie die folgenden Dateierweiterungen: LESS, PHP, CSS, JS, XML, HTML, HTM, TXT, SQL
Syntax-Highlighter und Zeilennummern
Laden Sie eine ZIP-Sicherung des gesamten Designs herunter
Laden Sie einzelne Dateien herunter
Dateien erstellen und löschen

Das ist alles

Ich hoffe, Sie wissen jetzt, wie man den WordPress Theme Editor richtig verwendet. Sie können auch Plugins verwenden, um die Funktionalität des WordPress-Theme-Editors zu verbessern.

Verwenden Sie das WordPress Code Editor-Plugin, teilen Sie uns Ihr Lieblings-Plugin mit. Fügen Sie unten Ihre Kommentare hinzu.