99Theme

So Bearbeitest du WordPress Code – (HTML, CSS, PHP, JavaScript)

WordPress Code bearbeiten

WordPress-Plugins helfen dabei, die Funktionalität Ihrer Website zu erweitern und mit minimalem Aufwand fortschrittliche digitale Arbeiten durchzuführen. Wenn Sie jedoch wissen, wie man HTML in WordPress sowie den anderen Quellcode Ihrer Website bearbeiten kann, ist dies in einer Vielzahl von Situationen nützlich.

Nehmen wir an, Ihre Website wird mit bösartiger Malware angegriffen, oder Sie aktualisieren ein Plugin und Es stürzt Ihre Website ab. Vielleicht möchten Sie einfach nur einige erweiterte Anpassungen vornehmen. In jedem dieser Fälle kann die Codierung in WordPress der nächste Schritt sein. Es gibt glücklicherweise viele Möglichkeiten, wie Sie vorgehen können.

In diesem Beitrag führen wir Sie durch die verschiedenen Möglichkeiten, wie Sie auf den Quellcode Ihrer WordPress-Website zugreifen und diesen bearbeiten können, und wie Sie Ihr WordPress-Thema ohne Kodierung ändern können. Lassen Sie uns anfangen!

Auch lesen: WordPress Footer bearbeiten – Schritt-für-Schritt Anleitung

Warum es wichtig ist zu wissen, wie Sie Ihren WordPress-Quellcode bearbeiten können 👈🏻

Standardmäßig ist WordPress eine äußerst intuitive und benutzerfreundliche Plattform. Dank Themes und Plugins gibt es viele Möglichkeiten, Ihre Website anzupassen und zu ändern, ohne auch nur eine Zeile Code anzufassen.

Technisch gesehen müssen Sie auf keine Ihrer Website-Dateien oder Code zugreifen, um eine voll funktionsfähige und gut gestaltete Website zu haben. Das WordPress-Dashboard, die Plugins und Themen machen die Anpassung und Personalisierung Ihrer Website schnell und einfach.

Es gibt jedoch Zeiten, in denen Sie mehr Kontrolle implementieren und erweiterte Anpassungen vornehmen möchten. Vielleicht ist die Änderung, die Sie vornehmen möchten, keine Option für das Design oder die Plugins, die Sie verwenden.

Eine andere Möglichkeit besteht darin, dass Ihre Website abstürzt oder ein anderer Fehler auftritt, der den Zugriff auf Ihr Admin-Dashboard verhindert. Wahrscheinlich müssen Sie Ihren WordPress-Quellcode bearbeiten, um das Problem zu beheben.

Es ist in solchen Fällen hilfreich zu wissen, wie man HTML in WordPress bearbeitet und wie man sicher und effektiv auf anderen Quellcode, einschließlich PHP, CSS und JavaScript, zugreifen und diesen modifizieren kann. Einfach ausgedrückt: Das Erlernen einiger grundlegender WordPress-Codierungstechniken versetzt Sie in die Lage, mehr Kontrolle und Flexibilität bei der Gestaltung, Verwaltung und Pflege Ihrer WordPress-Site auszuüben.

Wie man HTML in WordPress bearbeitet 💻

Das Wichtigste zuerst: Lassen Sie uns besprechen, wie Sie auf Ihren HTML-Code in WordPress zugreifen können. Beachten Sie, dass Änderungen am Code Ihrer Website immer ein gewisses Risiko darstellen. Die Bearbeitung Ihres HTML-Codes ist im Vergleich zu anderen Techniken, die wir in diesem Beitrag besprechen werden, relativ sicher, aber es ist trotzdem klug, mit Vorsicht vorzugehen und zuerst ein Backup zu erstellen.

Wie man HTML im WordPress Classic Editor bearbeitet

Wenn Sie den HTML-Code einer WordPress-Seite oder eines Beitrags hinzufügen oder bearbeiten möchten, brauchen Sie eigentlich keinen Zugriff auf den Quellcode Ihrer Website. Im klassischen Editor müssen Sie nur vom visuellen Editor in den Texteditor am Backend wechseln. Dies zeigt Ihnen, wie das HTML hinter den Kulissen arbeitet:

Wie man Code in WordPress bearbeitet.

Vom Text-Editor aus können Sie mit wenigen Klicks auf den HTML-Code jeder Seite oder jedes Beitrags zugreifen, ihn ändern und aktualisieren. Sie können Ihre Änderungen jederzeit einsehen, indem Sie zurück in den visuellen Editor wechseln. Wenn Sie fertig sind, stellen Sie sicher, dass Sie Ihren Beitrag oder Ihre Seite speichern.

Auch lesen: OptimizePress 3 Test & Erfahrungen

Wie man HTML im WordPress-Blockeditor (Gutenberg) bearbeitet

Wenn Sie den Block-Editor (Gutenberg) verwenden, erfordert der Wechsel vom visuellen Editor zum Text-Editor (oder Code-Editor) ein paar weitere Schritte. Sie haben jedoch auch mehrere Optionen für die Bearbeitung Ihres HTML, einschließlich Änderungen an der gesamten Seite oder dem Beitrag oder für einzelne Blöcke.

Um den HTML-Code der gesamten Seite oder des Beitrags zu bearbeiten, klicken Sie auf die drei vertikalen Punkte in der oberen rechten Ecke des Editors und wählen Sie dann Code-Editor:

Wie man HTML im WordPress-Blockeditor bearbeitet

Dadurch wird der WordPress-HTML-Editor geöffnet. Um innerhalb eines bestimmten Blocks vom visuellen Editor in den Texteditor zu wechseln, klicken Sie auf die drei vertikalen Punkte in der Block-Symbolleiste und wählen Sie dann Als HTML bearbeiten.

Eine andere Möglichkeit, HTML zu einer Seite oder einem Beitrag hinzuzufügen, ist die Verwendung eines benutzerdefinierten HTML-Blocks:

WordPress-HTML-Editor.

Sie können Ihren HTML-Code direkt in den Block schreiben und dann auf Vorschau klicken, um zu sehen, wie er auf dem Frontend aussehen wird.

Wenn Sie fertig sind, speichern Sie Ihre Änderungen an Ihrem Beitrag oder Ihrer Seite.

Wie Sie HTML für Ihre Homepage in WordPress bearbeiten

Wie sieht es mit der Bearbeitung des HTML auf Ihrer Homepage aus? Es gibt Themen, bei denen die Homepage als eigenständige Seite fungiert. Es ist daher derselbe Prozess der HTML-Bearbeitung wie oben beschrieben. Wählen Sie einfach die entsprechende Seite aus der Liste in Ihrem Dashboard aus:

Seiten

Sie können auch auf Ihrer Homepage in der oberen Verwaltungsleiste auf Seite bearbeiten klicken, um zum Klassischen oder Block-Editor zu gelangen.

Wenn keine dieser beiden Optionen für die Bearbeitung des HTML auf Ihrer Homepage funktioniert, verwenden Sie möglicherweise einen Page Builder oder ein Thema mit einem eingebauten Homepage-Editor. Wenn dies der Fall ist, können Sie auf die Dokumentation des entsprechenden Werkzeugs verweisen.

Auch lesen: WordPress Zeilenumbruch erstellen [manuell mit HTML]

Wie Sie HTML in einem WordPress Widget bearbeiten

Schließlich möchten Sie vielleicht noch HTML in Ihre WordPress-Seitenleiste oder den Footer einfügen. Viele WordPress-Themen verwenden auch den Widget-Abschnitt, um den Inhalt auf der Homepage Ihrer Website zu steuern.

Sie können diese Anpassungen von Homepage, Header und Footer über ein Custom HTML-Widget vornehmen:

Widgets

Navigieren Sie einfach zu Darstellung > Widgets, fügen Sie das Custom HTML-Widget zu Ihrer Seitenleiste oder Fußzeile hinzu und bearbeiten Sie es nach Belieben. Klicken Sie auf die blaue Schaltfläche Speichern, um es auf Ihrer Website zu veröffentlichen.

Erste Schritte mit der Bearbeitung des Quellcodes Ihres WordPress-Themas 🏁

Ihr WordPress-Thema besteht aus Vorlagendateien. Manchmal bezeichnen wir sie auch als Ihren WordPress-Quellcode. Sie umfassen die rohen Themendateien (PHP) sowie die Cascading Style Sheets (CSS) und JavaScript (JS) Ihrer WordPress-Website.

Wenn Sie diese Komponenten (oder die Standardvorlage in WordPress) bearbeiten möchten, gibt es im wesentlichen zwei Möglichkeiten, auf die Themendateien zuzugreifen:

  • Über den WordPress Theme Editor, der es Ihnen ermöglicht, WordPress-Quellcodedateien direkt in Ihrem Dashboard mit einem beliebigen Webbrowser zu bearbeiten.
  • Über das File Transfer Protocol (FTP), bei dem Sie WordPress-Quellcodedateien lokal bearbeiten und dann Ihre Änderungen in Ihre WordPress-Hosting-Umgebung hochladen.

Wir führen Sie in Kürze durch jede dieser Methoden, beginnend mit dem WordPress Theme Editor. Es gibt jedoch zwei Schritte, die wir empfehlen, bevor Sie anfangen.

Der erste ist die Erstellung einer Sicherungskopie Ihrer Website. Dadurch wird sichergestellt, dass Sie über eine aktualisierte Version Ihres Inhalts und Ihrer Einstellungen verfügen, auf die Sie zurückgreifen können, falls bei der Bearbeitung Ihres Quellcodes etwas schief gehen sollte.

Die zweite ist die Erstellung eines untergeordneten Themas. Wenn Sie Ihr WordPress-Thema modifizieren, ist es am besten, Ihre Änderungen an einem untergeordneten Thema vorzunehmen. Andernfalls werden Ihre Änderungen bei der nächsten Aktualisierung Ihres Themas überschrieben.

Sobald Sie diese Schritte durchgeführt haben, können Sie mit der Arbeit beginnen. Sehen wir uns zunächst an, wie Sie Ihr WordPress-Thema direkt von Ihrem Dashboard aus bearbeiten können.

Wie Sie Ihren WordPress-Quellcode über den Themeneditor bearbeiten können 🎯

Falls Sie mit WordPress nicht vertraut sind, wird ein integrierter Editor mitgeliefert, mit dem Sie die Dateien Ihres Themas online bearbeiten können. Im Themen-Editor können Sie auf die PHP-, CSS-, JavaScript- und alle anderen entwicklungsbezogenen Dateien zugreifen, aus denen Ihr Thema besteht. Hier erfahren Sie, wie Sie dies tun können.

Themes bearbeiten (1)

Wenn Ihre WordPress-Site noch in Betrieb ist und Sie auf das Backend zugreifen können, finden Sie den Quellcode Ihrer Site unter Erscheinungsbild > Themeneditor:

theme-editor-stylesheet (1)

In diesem Bearbeitungsbereich können Sie alle Änderungen an Design und Struktur Ihres Themas vornehmen, die Sie für angebracht halten.

Wenn Sie mehrere Themen installiert haben oder eine Themenkombination für Erwachsene/Kinder verwenden, können Sie in der oberen rechten Ecke des Editors zwischen den Themen wechseln.

Um bestimmte Themendateien zur Bearbeitung auszuwählen, können Sie aus der Liste rechts neben dem Editor wählen.

Die genauen Dateien, die hier zur Verfügung stehen, hängen von Ihrem Thema ab, aber mindestens sollten Sie sie sehen:

  • style.css: Dies ist Ihr Stylesheet, das viele design-bezogene Merkmale wie die Schriftarten und das Farbschema Ihres Themas enthält.
  • functions.php: Die Datei functions.php Ihres Themas enthält PHP-Code, der die Standardfunktionen von WordPress modifiziert.

Wenn Sie mit der Bearbeitung Ihres WordPress-Quellcodes im Theme-Editor fertig sind, stellen Sie sicher, dass Sie Ihre Änderungen speichern. Klicken Sie dazu einfach auf die Schaltfläche Datei aktualisieren am unteren Bildschirmrand.

WordPress wird Sie daran hindern, Ihre Änderungen zu speichern, wenn es feststellt, dass Fehler im Code vorhanden sind. Dies ist ein Teil dessen, was die Benutzung des Theme-Editors etwas sicherer macht als die Bearbeitung Ihres WordPress-Codes per FTP, worauf wir später noch eingehen werden.

Auch lesen: WordPress Customizer lädt und funktioniert nicht

Was tun, wenn Ihr Theme-Editor fehlt?

Wenn der Themeneditor nicht unter Erscheinungsbild erscheint, funktioniert Ihr Thema möglicherweise etwas anders. Das bedeutet nicht unbedingt, dass Sie die Themendateien nicht direkt bearbeiten können. Sie müssen nur wissen, wo Sie suchen müssen.

Überprüfen Sie, ob Ihre Website einen themenspezifischen WordPress-Code-Editor verwendet, der sich irgendwo anders in Ihrem Dashboard befindet. Alternativ kann die Verwendung des Theme-Editors für Ihre Site deaktiviert worden sein. Zum Beispiel verstecken einige Sicherheits-Plugins diese Option, um WordPress zu “härten” und es Angreifern zu erschweren, Ihre Website zu kompromittieren.

Es kann auch andere Gründe geben, warum Ihr WordPress-Themeneditor fehlt oder nicht zugänglich ist. Wir empfehlen, sich an andere Mitglieder der WordPress-Community zu wenden, insbesondere an diejenigen, die Zugang zu den von Ihnen verwendeten Themen oder Plugins haben, um herauszufinden, ob es in Ihrer Umgebung etwas Einzigartiges gibt, das diese Funktion verbirgt.

Wie Sie Ihre WordPress-JavaScript-Dateien bearbeiten ✍🏻

Bevor Sie JavaScript irgendwo auf Ihrer WordPress-Site verwenden können, benötigen Sie eine Datei mit Ihrem JavaScript-Code. Die meisten, wenn nicht sogar alle Themen werden mit ein paar JavaScript-Dateien ausgeliefert, die möglicherweise an anderer Stelle gehostet und durch Code in Ihrer Header.php, Footer.php oder anderen Vorlagendateien ‘aufgerufen’ werden.

Wenn Sie Ihr eigenes JavaScript schreiben, haben Sie Zugang zu Ihrer Arbeit in WordPress, wo Sie eine Liste Ihrer Dateien sehen können. Sie können jede dieser Dateien öffnen und Ihre gewünschten Änderungen direkt mit dem Themen-Editor vornehmen. Alle JavaScript-Dateien enden mit der Erweiterung .js:

JavaScript

Wenn Sie JavaScript mit einem Plugin eines Drittanbieters hinzufügen, rufen Sie einfach eine externe Datei auf, die anderswo gehostet wird. Um das geschriebene JavaScript zu verwenden, müssen Sie die Datei aufrufen, wo immer Sie es verwenden möchten.

Sie können JavaScript aufrufen, indem Sie das folgende Skript (das Ihre Seite an den Speicherort der entsprechenden Datei leitet) überall dort einfügen, wo der Code geladen werden soll:

<script type="text/javascript" src="https://mk0wpbuffsv2lxgilx63.kinstacdn.com/scripts/myJavaScript.js"></script>

Wo Sie Ihre JavaScript-Datei am besten aufrufen, hängt davon ab, wie Sie das Skript verwenden möchten. Es kann z.B. mehrfach auf Ihrer Website implementiert werden, oder nur einmal.

So fügen Sie JavaScript zu Ihrem WordPress Header oder Footer hinzu

Wenn Sie Änderungen am Header oder Footer Ihrer Website vornehmen möchten, einschließlich der Verwendung von JavaScript an mehreren Stellen, können Sie dies in den Dateien header.php und footer.php Ihres Themas tun.

Bei vielen Tools von Drittanbietern müssen Sie Code in den Header Ihrer Website einfügen. Kurz gesagt bedeutet dies, dass Sie mit der Datei header.php arbeiten (die rechts neben Ihrem Themen-Editor aufgelistet sein sollte), insbesondere mit dem Bereich, der von den Tags umschlossen wird:

Hinzufügen von JavaScript zu einem Header oder Footer im Themeneditor.

Wenn Sie JavaScript zu Ihrer Header-Datei hinzufügen, stellen Sie sicher, dass der Code irgendwo zwischen diesen beiden Tags platziert wird (nach oder unter dem öffnenden Tag und über oder vor dem schließenden Tag).

Der Tag kann schwer zu finden sein. Es kann schwierig sein, es zu finden. Wenn Sie Probleme haben, es zu finden, drücken Sie die Tasten Befehl (oder Steuerung) + F, nachdem Sie im Editor geklickt haben. Es kann dann einfach durch Eingabe von “head” in die Suchleiste gefunden werden.

Sie können den Footer auf die gleiche Weise bearbeiten – wählen Sie einfach Ihre Datei footer.php anstelle von header.php aus.

Nachdem Sie Ihre Änderungen gespeichert haben, müssen Sie im letzten Schritt noch einmal überprüfen, ob Ihr Code hinzugefügt wurde. Gehen Sie dazu auf Ihre Homepage und sehen Sie sich den Quellcode an.

Auch hier können Sie die Tastenkombination Befehl + F verwenden, um den Tag zu finden, und dann direkt darüber nachsehen, ob Ihr Code erfolgreich hinzugefügt wurde. Möglicherweise müssen Sie den Cache Ihres Browsers leeren, damit alles korrekt angezeigt wird.

Auch lesen: Was sind Trackbacks und Pingbacks? 

Wie man Header- und Footer-Skripte mit einem Plugin hinzufügt

Das manuelle Hinzufügen von Header- und Footer-Skripten ist nicht Ihre einzige Option. Es gibt Plugins, die Sie bei diesen Aufgaben unterstützen, und einige Themen und Frameworks sind mit solchen Funktionen ausgestattet.

Wenn Sie z.B. das Genesis Framework verwenden, erfolgt das Hinzufügen von Header- und Footer-Skripten einfach über den integrierten Editor. Sie können jedoch die gleiche Funktionalität für jedes Thema über ein Plugin nutzen.

Diese Methode ist vorteilhaft, da WordPress Ihre Datei header.php bei Updates normalerweise überschreibt. Wenn Sie ein Plugin (oder eine externe Funktionalität, die solche Plugins nachahmt) verwenden, garantieren Sie sich weniger Arbeit. Sie können den WordPress-Kern aktualisieren, ohne sich Sorgen machen zu müssen, dass Sie Ihren Code manuell neu hinzufügen müssen.

Wenn diese Lösung ansprechend klingt, empfehlen wir das Plugin  Insert Headers and Footers  einfügen.

Es bietet eine kostenlose Möglichkeit, auf einfache Weise einfachen Code in den Header oder Footer Ihrer WordPress-Site einzufügen. Egal, ob Sie versuchen, Google Analytics-Skripts, Adsense-Code oder Integrationscode von Drittanbietern hinzuzufügen, dieses Plugin kann dies mit nur wenigen Klicks bewerkstelligen.

Sobald Sie das Plugin installiert und aktiviert haben, können Sie auf den JavaScript-Editor zugreifen, indem Sie zu Einstellungen > Insert Headers and Footers einfügen navigieren:

insert header footer

Es wird Textfelder geben, in denen Sie Skripte in den Header, Body und Footer Ihrer Website einfügen können. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Speichern.

Wie man JavaScript zu WordPress-Beiträgen und -Seiten hinzufügt

Es kann nicht nur in die Dateien header.php oder footer.php zur Verwendung auf Ihrer gesamten Website eingebunden werden, sondern Sie können JavaScript auch in WordPress-Beiträge oder einzelne Seiten einfügen. Dazu müssen Sie dies tun:

  • Fügen Sie Ihr JavaScript zu einer Ihrer WordPress-Thema-Dateien hinzu (oder erstellen Sie eine neue)
  • Rufen Sie die Datei von Ihrem Beitrag oder Ihrer Seite aus auf

Wie rufen Sie also Ihre JavaScript-Datei von Ihrem Beitrag aus auf? Eine Möglichkeit besteht darin, die Funktion Benutzerdefinierte Felder als eine Art WordPress JavaScript-Widget zu verwenden. Klicken Sie im Blockeditor auf die drei vertikalen Punkte, um das Dropdown-Menü aufzurufen, und wählen Sie dann Optionen:

block editor optionen

Markieren Sie unten im Menü Optionen unter Erweiterte Bereiche das Kästchen neben Benutzerdefinierte Felder.

Das Menü Blockeditor-Optionen.

Unterhalb Ihres Post-Editors sehen Sie nun einen Bereich, in dem Sie benutzerdefinierte Felder hinzufügen können:

individuelle felder

Geben Sie einen Namen für Ihr Feld ein. Geben Sie dann Ihr JavaScript-Snippet als Wert ein. Wenn Sie fertig sind, klicken Sie auf Benutzerdefiniertes Feld hinzufügen, um Ihre Änderungen zu speichern.

Jetzt können Sie Ihr benutzerdefiniertes JavaScript überall auf der Seite verwenden. Dazu müssen Sie den Template-Tag verwenden, der das von Ihnen verwendete Thema anpasst. Sie können sich auch für die Verwendung eines Plugins entscheiden, das benutzerdefinierte Felder in Ihrem Namen verwaltet.

Wie Sie das CSS Ihrer WordPress-Site bearbeiten 🖋️

Der Prozess des Editierens des CSS Ihrer WordPress-Site ist dem des Änderns Ihres JavaScript ziemlich ähnlich. Es gibt drei Methoden, die Sie dazu verwenden können:

  • Bearbeiten Sie Ihre CSS-Dateien im Theme-Editor.
  • Verwenden Sie den integrierten CSS-Editor Ihres Themas innerhalb des WordPress Customizer
  • CSS mit einem Plugin hinzufügen

Welche Methode für Sie am besten geeignet ist, hängt davon ab, wie umfangreich die von Ihnen geplante Bearbeitung ist und wie häufig Sie Änderungen vornehmen wollen.

Wie Sie Ihr WordPress CSS über den Themen-Editor bearbeiten

Alle CSS-Dateien, die für das Thema Ihrer WordPress-Site verwendet werden, finden Sie im Themen-Editor (Erscheinungsbild > Themen-Editor). Suchen Sie in der Liste auf der rechten Seite nach den Dateien mit der Endung .css:

Bearbeiten von CSS-Dateien im Themen-Editor.

Sie können Ihre gewünschten Änderungen innerhalb des Editors vornehmen. Wenn Sie fertig sind, klicken Sie auf Datei aktualisieren, um Ihre Änderungen zu speichern.

Wie Sie Ihr WordPress CSS über den WordPress Customizer bearbeiten

Neben dem WordPress Theme Editor können Sie Ihr CSS auch mit dem WordPress Customizer modifizieren. Es ist über das WordPress-Dashboard unter Darstellung > Anpassen erreichbar:

Zugriff auf den WordPress Customizer.

Klicken Sie dann unten in der linken Navigationsleiste auf Zusätzliches CSS:

zusätzliches css

Ein Code-Editor wird geöffnet, in dem Sie benutzerdefiniertes CSS hinzufügen können.

Wie Sie sehen können, ist dieser Editor recht klein und hauptsächlich für kleinere Modifikationen gedacht, anstatt den Stil Ihrer Website umfassend neu zu schreiben. Es wird wahrscheinlich einfacher sein, umfangreiche Änderungen im Themen-Editor oder mit einem Plugin durchzuführen.

Wenn Sie mit dem Hinzufügen benutzerdefinierter CSS zum Customizer fertig sind, klicken Sie auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Wie Sie Ihr WordPress-CSS mit einem Plugin bearbeiten

Wenn Sie das Aussehen Ihrer Website anpassen möchten, ohne Ihre Themendateien direkt zu bearbeiten, können Sie auch ein Plugin verwenden. Diese Methode ist besonders nützlich, wenn Sie nur begrenzte CSS-Kenntnisse haben. Es ist auch ideal, wenn Sie planen, regelmäßig Änderungen am Stil Ihrer Website vorzunehmen, da es die Organisation Ihrer Ergänzungen erleichtert.

CSS Hero ist beispielsweise ein intuitives Werkzeug, mit dem Sie alle Aspekte des Designs und Stils Ihrer Website bearbeiten können, ohne Ihre Themendateien zu ändern:

css-hero-1024x553

Es ist ein Live-Editor für WordPress-Themen, mit dem Sie Schnappschüsse Ihrer Änderungen, einschließlich verschiedener Versionen, speichern und live übertragen können. Es erstellt ein zusätzliches CSS-Stylesheet, das das mit Ihrem Thema gelieferte Original-Stylesheet überschreibt. Daher müssen Sie sich keine Sorgen machen, durch die direkte Bearbeitung Ihrer CSS-Dateien dauerhafte Schäden zu verursachen.

Die CSS Hero-Funktionen umfassen:

  • Vorgefertigte, editierbare Stil-Snippets
  • Integration und Unterstützung von Google-Fonts und TypeKit
  • Ein visueller Front-End-Editor zur Vorschau Ihrer Änderungen, während Sie diese vornehmen

Als Einstieg können Sie eine Live-Demo ausprobieren. Wenn Sie bereit sind, CSS Hero zu kaufen, haben Sie mehrere Preispläne zur Auswahl.

Nachdem Sie das Plugin heruntergeladen haben, können Sie es hochladen und auf Ihrer WordPress-Seite installieren, wie Sie es auch sonst tun würden. Sie müssen nur Ihren Lizenzschlüssel eingeben, den Sie beim Kauf Ihres Plans erhalten.

Wie Sie Ihren WordPress-Quellcode über FTP bearbeiten können 📥

Wie Sie sich vielleicht an früherer Stelle in diesem Beitrag erinnern, ist die Verwendung des WordPress Theme Editors nur eine Methode, um auf den Quellcode Ihrer Website zuzugreifen und diesen zu ändern. Eine andere ist die Verwendung eines FTP-Clients wie FileZilla. Diese Art von Tools ermöglicht es Ihnen, eine Verbindung zum Server Ihrer Website herzustellen, um auf die dort gespeicherten Dateien zuzugreifen.

Bei diesem Ansatz nehmen Sie Änderungen an Ihrer Datei lokal vor und laden die geänderten Dateien dann erneut in Ihre WordPress Hosting-Umgebung hoch. Dies ist der Schlüssel, wenn Sie nicht auf das Backend Ihrer Website zugreifen können oder wenn Sie PSD > WordPress-Arbeiten durchführen.

Hier erfahren Sie, wie Sie in vier Schritten mit FTP beginnen können.

Auch lesen: Die 6 besten Slider Plugins für WordPress 

Schritt 1: FTP-Zugangsdaten suchen oder erstellen

Um sich per FTP mit Ihrem Server zu verbinden, benötigen Sie zunächst Ihre FTP-Zugangsdaten, einschließlich eines Benutzernamens, eines Passworts und eines Hostnamens. Sie sollten diese in Ihrem Hosting-Account aufgelistet finden.

Falls nicht, können Sie Ihren Benutzernamen und Ihr Passwort im cPanel unter Dateien > FTP-Accounts erstellen:

cpanel-ftp-accounts

Klicken Sie auf dieses Symbol und wählen Sie dann FTP-Account hinzufügen:

Das Symbol für FTP-Accounts im cPanel.

Auf der Seite FTP-Account hinzufügen gehen Sie wie folgt vor:

  • Fügen Sie eine eindeutige Kennung für Ihren FTP-Benutzernamen hinzu. Ihr FTP-Benutzername wird uniqueidentifier@primarydomain.com lauten, also kopieren/einfügen Sie ihn an einen sicheren Ort.
  • Erstellen Sie ein sicheres Passwort. Wir empfehlen die Verwendung des Passwort-Generators, um ein Passwort zu erstellen, das eine 100/100-Stärkebewertung erhält. Es wird Ihr FTP-Passwort sein, also kopieren Sie es ebenfalls per Kopieren/Einfügen an einen sicheren Ort.
  • Verwenden Sie für die Verzeichnis-Erweiterung immer public_html.
  • Ihr Kontingent sollte immer unbegrenzt sein.

Klicken Sie auf FTP-Account erstellen und Sie sind fertig! Wenn Sie Probleme beim Erstellen der FTP-Anmeldedaten haben, können Sie nach “[Ihrem Hosting-Provider] FTP” googeln.

Wenn Sie keine Support-Dokumentation finden können, können Sie sich jederzeit direkt an Ihren Hosting-Provider wenden, um Hilfe zu erhalten.

Schritt 2: Laden Sie einen FTP-Client wie FileZilla

Sobald Sie Ihre FTP-Anmeldedaten in Ordnung gebracht haben, müssen Sie im nächsten Schritt einen FTP-Client wie FileZilla herunterladen.

Hierbei handelt es sich um eine kostenlose FTP-Lösung, die es Ihnen ermöglicht, Dateien zwischen Ihrem Computer und dem Server Ihrer Website hin und her zu übertragen. Es gibt jedoch auch andere FTP-Clients, also zögern Sie nicht, denjenigen zu verwenden, der Ihren Bedürfnissen am besten entspricht.

Schritt 3: Loggen Sie sich über FileZilla in Ihre Webhosting-Umgebung ein

Nachdem FileZilla fertig heruntergeladen ist, öffnen Sie es und geben Sie Ihren FTP-Hostnamen, Benutzernamen und Passwort ein. Sie sollten all diese Informationen in Schritt 1 gesammelt haben:

Wenn Ihr cPanel eine IP-Adresse auflistet, können Sie diese auch als Host verwenden. Nachdem Sie diese Anmeldedaten eingegeben haben, klicken Sie auf die Schaltfläche Quickconnect:

Es sollte Sie innerhalb weniger Sekunden mit Ihrem Server verbinden.

Schritt 4: Bearbeiten Sie Ihre Dateien

Sobald Sie eingeloggt sind, haben Sie Zugriff auf Ihre WordPress-Quelldateien und können HTML-, CSS-, PHP- und JS-Bearbeitungen vornehmen, wie Sie es für richtig halten. Klicken Sie einfach mit der rechten Maustaste auf eine beliebige Datei und wählen Sie Ansicht/Bearbeiten:

Wenn Sie Ihre Änderungen vorgenommen haben (auch hier ist darauf zu achten, dass Ihre Website nicht mit einem weißen Bildschirm angezeigt wird), können Sie die Datei speichern. Dann wird FileZilla sie automatisch wieder hochladen und die alte Version ersetzen.

Wie Sie Ihr WordPress-Thema ohne Kodierung bearbeiten 🚫

Es handelt sich bei WordPress um eine Open-Source-Plattform, was es extrem flexibel und leistungsfähig macht. Wir verstehen jedoch, dass die Kodierung von WordPress für manche entmutigend sein kann. Glücklicherweise können Sie, wenn Ihnen die Manipulation des Quellcodes Ihrer Website nicht unangenehm ist, dennoch umfangreiche Änderungen vornehmen.

Sie werden zwar nicht so viel ändern können wie mit benutzerdefiniertem Code, aber mit dem WordPress Customizer können Sie immer noch eine Menge tun. Auch dies finden Sie unter Design > Customizer.

Der WordPress Customizer für das Twenty Twenty Thema.

In diesem Bereich sehen Sie eine Anleitung zum Anpassen des von Ihnen gewählten WordPress-Themas. Sie können mit hochrangigen Elementen unter Site Identity beginnen – was es Ihnen ermöglicht, den Namen, die Tagline und das Symbol Ihrer Website zu ändern – und dann die Farben, Menüs, Homepage usw. Ihrer Website ändern.

Wenn Sie jedoch mehr als das tun möchten, was der Customizer zur Verfügung stellt, können Sie auch zusätzliche Plugins verwenden. Werfen wir einen Blick auf einige der hilfreichsten Plugins, die es gibt.

Auch lesen: WordPress Header bearbeiten

Plugins für die Bearbeitung Ihres WordPress-Themas ohne Kodierung

Wie wir bereits erwähnt haben, gibt es viele Plugins und Tools, mit denen Sie das Erscheinungsbild Ihrer Website ohne jegliche Programmierung anpassen können. Einige von ihnen haben wir bereits in den Abschnitten über die Bearbeitung von JavaScript und CSS oben hervorgehoben.

Wenn Sie nach einem Editor für visuelle Stile suchen, ist eine leistungsstarke Freemium-Option das YellowPencil-Plugin:

Das YellowPencil-Plugin: Das YellowPencil-Plugin.

Mit diesem WordPress CSS-Style-Editor-Plugin können Sie das Design Ihrer Website schnell und einfach anpassen. Sie können Änderungen an jeder Seite oder jedem Thema ohne Programmierung vornehmen. Außerdem können Sie eine Vorschau der Änderungen in Echtzeit anzeigen. Es sind kostenlose und Premium-Versionen verfügbar.

Eine weitere Option, die Sie in Betracht ziehen sollten, ist der Microthemer WordPress CSS-Editor:

microthemer-1024x485

Bei diesem Plugin handelt es sich um einen Live-CSS-Editor für WordPress, der über designorientierte Raster und Point-and-Click-Bearbeitungsfunktionen verfügt, mit denen Sie Ihre Website präzise und einfach anpassen können. Dies ist eine solide Option, wenn Sie einen Page Builder wie Elementor oder Beaver Builder verwenden, da es mit einer integrierten Integration ausgestattet ist.

Wenn Sie mehr als nur den Stil und das Aussehen Ihrer Website ändern möchten, können Sie Ultimate Tweaker verwenden:

Dieses Premium-Plugin enthält ein HTML-Minifier-Werkzeug, eine Drag-and-Drop-Schnittstelle, benutzerdefinierte Symbole und mehr. Um eine bessere Vorstellung von den Funktionen und der Funktionalität zu erhalten, empfehlen wir, die Plugin-Demo zu erkunden.

Auch lesen: Thrive Architect Test & Erfahrungsbericht

Fazit 🌯

Mit WordPress-Plugins können Sie viele Aufgaben auf Ihrer Website erledigen. Es gibt jedoch einige Fälle, in denen es notwendig sein kann, auf den Quellcode Ihrer Website zuzugreifen und diesen zu bearbeiten.

Wie wir in diesem Beitrag besprochen haben, sind der WordPress Theme Editor und FTP die besten Möglichkeiten, auf den Quellcode Ihrer WordPress-Website zuzugreifen und Änderungen an HTML, CSS, PHP und JavaScript vorzunehmen. Neben der Macht der scheinbar endlosen Plugin-Auswahl gibt Ihnen dies die Möglichkeit, alles an Ihrer Website vollständig anzupassen.

Add comment

Your Header Sidebar area is currently empty. Hurry up and add some widgets.