So verwenden Sie den Darstellungseditor in WordPress

wordpress-erscheinungseditor.png


Bisher hatten Sie die Möglichkeit, WordPress CMS über verschiedene benutzerfreundliche Editoren anzupassen. Mit dem Customizer können Sie verschiedene Darstellungsoptionen durchlaufen, die Ihr Thema unterstützt. Wenn Sie sich jedoch dazu entschließen, Ihre Website über die angegebenen Optionen hinaus zu personalisieren, sollten Sie den WordPress Appearance Editor kennen.

Unter vielen Dateien in WordPress, die geändert werden können, gibt es zwei besonders interessante. Wir sprechen über die Vorlagen- und Stylesheet-Dateien des Themas, die Sie direkt in WordPress bearbeiten können.

Bevor Sie überhaupt daran denken, Code selbst zu ändern, sollten wir Sie vor WordPress warnen erstellt keine Backups der betroffenen Dateien. Änderungen sind also dauerhaft.

So bearbeiten Sie Themen mit dem Darstellungseditor

Wenn Sie bereit sind, mehr über WordPress zu erfahren und sich durch Eingabe eines benutzerdefinierten Codes die Hände schmutzig zu machen, navigieren Sie zu Aussehen -> Editor. Mit diesem integrierten Editor können Sie den Code ändern, der in den Vorlagen- und Stylesheet-Dateien des Themas gespeichert ist. Sobald Sie es öffnen, wird die Datei style.css, die Ihr aktuelles Thema verwendet, automatisch vor Ihnen angezeigt.

WordPress Appearance Editor

Abhängig von der Einrichtung Ihrer Site können Sie möglicherweise nicht auf einige Dateien zugreifen. In diesem Fall zeigt WordPress eine Warnmeldung an, die Sie darüber informiert, dass Sie die Dateiberechtigungen für diese bestimmte Datei ändern müssen. Weitere Informationen finden Sie unter wie man Dateiberechtigungen in WordPress ändert.

So wählen Sie Dateien zum Bearbeiten aus

Sobald Sie den Editor öffnen, zeigt WordPress Ihnen alle verfügbaren Vorlagen- und Stylesheet-Dateien des aktiven Themas an. Wenn Sie ein inaktives Thema bearbeiten möchten, gehen Sie zum Anfang der Liste, wählen Sie ein Element aus dem Dropdown-Menü aus und klicken Sie auf die Schaltfläche „Auswählen“. WordPress lädt dann alle Dateien, die dem ausgewählten Thema zugeordnet sind.

Vorlagen

Um eine Datei auszuwählen, gehen Sie die Liste auf der rechten Seite des Fensters durch. Jeder hat einen Namen und einen Dateinamen in Klammern unten. Um eine der Dateien zu bearbeiten, klicken Sie einfach darauf und der Code wird im linken Editor angezeigt.

Achtung

Während das Bearbeiten von Stylesheet-Dateien relativ sicher ist, kann das Bearbeiten von PHP-Dateien zu Fehlern führen, die Ihre Site unbrauchbar machen können. Seien Sie sehr vorsichtig, wenn Sie PHP-Dateien im Darstellungseditor bearbeiten möchten.

Beispiel: So ändern Sie die Schriftgröße über den Darstellungseditor

Um Ihnen zu zeigen, wie der Editor funktioniert, werden wir die Schriftgröße von Text in Posts im Thema Twenty Seventeen ändern.

Bevor wir fortfahren, möchten wir Ihre Aufmerksamkeit für einen kurzen Moment entgleisen lassen. In der Version 4.7 wurde WordPress eingeführt Eine neue Funktion, mit der Sie benutzerdefiniertes CSS hinzufügen können schneller. Anstatt den Code über den Darstellungseditor zu bearbeiten, empfehlen wir, ihn zu öffnen Darstellung -> Anpassen -> Zusätzliches CSS Hier können Sie jeden gewünschten benutzerdefinierten CSS-Code schreiben, ohne das Stylesheet direkt zu beeinflussen.

Elemente überprüfen

Überprüfen Sie Elemente in Google Chrome

Wenn Sie das Stylesheet weiterhin direkt über den Darstellungseditor bearbeiten möchten, gehen Sie wie folgt vor:

  1. Öffnen Sie einen Beitrag aus Ihrem Blog
  2. Wählen Sie den Text eines Beitrags
  3. Klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie “Inspect” oder “Inspect Element” (je nach verwendetem Browser).
  4. Suchen Sie in dem neuen Abschnitt oder Fenster, das geöffnet wurde, das hervorgehobene

    Element

Überprüfen Sie den Absatz der Elemente

Die Klasse sollte auch auf der Registerkarte „Stile“ sichtbar sein. Wenn Sie auf den Stil klicken, sollte Ihr Browser das Stylesheet öffnen und es Ihnen ermöglichen, das CSS direkt über den Browser zu bearbeiten. Mit dieser Funktion können Sie benutzerdefinierten CSS-Code testen, bevor Sie Änderungen an Ihrer Site vornehmen. Da wir die Schriftgröße von Text in Posts ändern wollten, ist der folgende CSS-Code in unserem Interesse:

p {
Schriftgröße: 50px;
}}

Änderungen übernehmen

Denken Sie nach dem Testen einiger Schriftgrößen im Browser an die, die Ihnen am besten gefallen hat. Anschließend können Sie zum Editor wechseln und die Schriftart ändern:

  1. Navigieren Sie zu Aussehen -> Editor
  2. Wenn nicht bereits ausgewählt, wählen Sie Stylesheet (style.css) Datei aus der Liste auf der rechten Seite
  3. Finden Sie die Klasse “p”
  4. Fügen Sie “Schriftgröße: 50px;” (Der gesamte Code sollte wie der oben geschriebene aussehen.)
  5. Klicken Sie auf die Schaltfläche “Datei aktualisieren”

Schriftgröße für Absätze ändern

Der neue Stil wird gespeichert und Sie können die Site neu laden. Öffnen Sie einen beliebigen Beitrag, um die Änderung der Textgröße anzuzeigen. Wenn Sie den Unterschied nicht erkennen können und sicher sind, dass Sie den Code korrekt angepasst haben, stellen Sie sicher, dass Sie Leeren Sie den Browser-Cache oder drücken Sie STRG + F5 um die Seite zu aktualisieren.

Seien Sie vorsichtig, wenn Sie mit dem Darstellungseditor arbeiten

Der Darstellungseditor ist ein erstaunliches Werkzeug, um schnell Änderungen an Vorlagen- und Stylesheet-Dateien vorzunehmen. Um das Beste daraus zu machen, ist es wichtig, dass Sie sich über die Änderungen, die Sie vornehmen, völlig sicher sind. Jede Änderung an PHP-Dateien kann Ihre Site sperren, bis Sie sie über FTP reparieren. Wenn Sie mit PHP-Dateien arbeiten, empfehlen wir Ihnen, an einer lokalen Datei zu arbeiten, die Sie über FTP übertragen können, während Sie die ursprüngliche Sicherung jederzeit beibehalten. Vergessen Sie bei Änderungen an Stylesheets nicht die zusätzlichen CSS-Funktionen, die vor einigen Monaten eingeführt wurden.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map