WordPress entschlüsseln: Eine Einführung in globale Stile

WordPress-Blöcke und Full-Site Editing (FSE)-Funktionen machen den Aufbau und das Styling einer erfolgreichen Website schnell und einfach.

Global Styles können Ihnen helfen, das Erscheinungsbild Ihrer WordPress-Website zu vereinheitlichen, ohne einzelne Blöcke oder Seiten bearbeiten zu müssen. Egal, ob Sie Ihre Hintergrundfarbe ändern oder die Typografie der Überschriften anpassen möchten, Sie können Ihre Änderungen an einem einzigen Ort vornehmen, was zu einem kohärenteren und insgesamt besseren Benutzererlebnis (UX) führt.

In diesem Beitrag führen wir Sie durch Globale Stile. Wir erklären, was sie sind, welche Vorteile sie bieten und wie die neuen Funktionen funktionieren. Dann besprechen wir, wie Sie sie verwenden können, um Ihre WordPress-Website zu gestalten. Lassen Sie uns anfangen!

Übersicht der WordPress Global Styles

Bevor Sie mit Globalen Stilen arbeiten, ist es wichtig zu verstehen, was sie sind und wie sie funktionieren. Diese Funktion arbeitet in Verbindung mit theme.json, einer neuen Datei für Theme-Einstellungen. Entwickler können theme.json verwenden, um Standardwerte für eine Website sowie einzelne Blöcke zu definieren. Gutenberg wendet dieses JSON automatisch an, wenn Sie die Datei im Stammverzeichnis eines blockbasierten Themes platzieren.

Diese Datei ist eines der nützlichsten Werkzeuge des neuen vollständigen Seiteneditors in WordPress 5.9. Die Datei ermöglicht es Themenautoren, globale Stile sowie globale Einstellungen zu teilen. WordPress formatiert die Daten, die aus diesen JSON-Objekten genommen werden, neu und verwandelt sie in CSS. Dann können Benutzer die Stile im WordPress-Editor weiter anpassen.

In früheren Versionen des Gutenberg-Plugins mussten Sie die Unterstützung für die Stileigenschaften eines Blocks registrieren, bevor Sie damit in theme.json arbeiten konnten. Auch in klassischen Themes und älteren Versionen mussten Sie PHP verwenden, um Dinge wie Ihre Farbauswahl und Schriftarten zu definieren. Dann mussten Sie Stile für die Frontend- und Backend-Seiten Ihres Themes hinzufügen.

Jedoch fügt WordPress mit der neuesten Version automatisch die in der theme.json-Datei definierten Stile zu Ihrem Stylesheet hinzu, wenn Sie ein Theme verwenden, das diese Datei enthält. Sie können dieses System nutzen, um vollständig neue Farbpaletten hinzuzufügen, die Typografie von Themes zu ändern und mehr.

Warum WordPress Global Styles verwenden

Unabhängig von Ihrem Können werden Sie wahrscheinlich feststellen, dass die Verwendung von Global Styles eine intuitive und zugängliche Erfahrung ist. Insgesamt kann es den Webdesign-Prozess vereinfachen, indem es leichter wird, das Aussehen und Gefühl Ihrer Website zu ändern. Wenn Sie ein WordPress-Anfänger sind, könnte die Nutzung dieser Global Styles bedeuten, dass Sie keinen Entwickler einstellen müssen, um Ihre Website zu gestalten. Tut uns leid, Entwickler.

Auf der anderen Seite könnte diese neue Funktion jedoch besonders nützlich für Theme-Entwickler sein. Das liegt daran, dass Global Styles WordPress-Entwicklern hilft, Blöcke innerhalb des Block-Editors zu gestalten. Dies kann besonders vorteilhaft sein, insbesondere für neue Theme-Autoren. Es bietet eine Vielzahl von Steuerelementen, die die Notwendigkeit minimieren, benutzerdefinierte Lösungen für das Styling einer Website zu erstellen.

Mit anderen Worten, vereinfacht Global Styles die Theme-Entwicklung in hohem Maße. Dadurch kann es Entwicklern helfen, schwerwiegende Designfehler zu vermeiden.

Erstellen der theme.json-Datei

Die theme.json Datei enthält zwei wichtige Teile: Einstellungen und Stile. Einstellungen beziehen sich auf eine Liste von globalen oder kontextbezogenen Konfigurationswerten, die bestimmen, wie sich der Editor und die Blöcke verhalten. Zum Beispiel beeinflusst es, welche Steuerungen standardmäßig aktiviert sind, welche Steuerungen von der Benutzeroberfläche (UI) ausgeblendet werden, die verfügbare Farbpalette, Typografie-Einstellungen usw.

Styles handhabt die Designsprache des Themes und ermöglicht es Theme-Autoren, Elemente wie folgt zu definieren:

• Schriftgröße
• Zeilenhöhe
• Hintergrundfarben
• Linkfarben

Wenn Sie eine Datei theme.json erstellen möchten, können Sie eine neue Datei dieses Namens anlegen und sie dann in den Stammordner Ihres Themes einfügen. Alle Inhalte Ihrer Datei sollten innerhalb von zwei geschweiften Klammern eingesetzt werden: { }.

Als Nächstes verwenden Sie Eigenschaftsnamen und Werte innerhalb von doppelten Anführungszeichen und durch einen Doppelpunkt getrennt, zum Beispiel:

{

"Eigenschaftsname": "Wert"

}

Der Eigenschaftsname kann entweder eine Einstellung oder ein Blockname sein. Unten ist ein Beispiel für eine sehr einfache theme.json Datei:

{

    "version": 1,

    "settings": {},

    "styles": {},

    "customTemplates": {},

    "templateParts": {}

}

Version 1 des theme.json Formats ist die früheste, stabilste Version. Jedoch wird Version 2 ab WordPress 5.9 verwendet. Während der Versionsabschnitt der erste sein muss, der auf die öffnende geschweifte Klammer folgt, können die nachfolgenden Abschnitte in beliebiger Reihenfolge platziert werden.

Wie wir erwähnt haben, sind die zwei Hauptabschnitte der Datei Einstellungen und Stile. Werfen wir also einen genaueren Blick auf die Voreinstellungen für jeden Abschnitt.

Einstellungsvorgaben

Presets beziehen sich auf die Standardsteuerungen sowie alle benutzerdefinierten CSS-Eigenschaften und werden durch die Werte in theme.json generiert. Einige der wichtigsten Voreinstellungskategorien umfassen:

• Farbe
• Typografie
• Layout
• Abstand

Kategorien können auch Unterkategorien haben. Zum Beispiel könnte eine Unterkategorie von Farbe Farbpalette sein:

{

"version": 2,

"settings": {

"color": {

"palette": [

{

Jedes Voreinstellung erstellt auch eine benutzerdefinierte CSS-Eigenschaft unter Verwendung der Benennungskonvention “–wp–preset–{preset-category}–{preset-slug}”.

Es gibt eine Menge Voreinstellungen und Beispiele, die Sie verwenden können, um Ihre theme.json Datei zu erstellen, daher werden wir hier nicht alle behandeln. Sie können jedoch im WordPress-Handbuch nach detaillierteren Anleitungen suchen.

Stilvoreinstellungen

Stilvorlagen steuern die Stile von Objekten innerhalb von Blöcken. Beispielsweise wäre die folgende eine Möglichkeit, den Hexadezimalwert für einen Hintergrund und eine globale Stilvorlage für die Textfarbe zu verwenden:

{

        "version": 2,

"settings": { ... },

"styles": {

"color": {

"background": "#FBF",

"text": "var(--wp--preset--color--purple)"

}

}

}

Wenn wir die Überschriftfarbe eines Blocks ändern wollten, würde es so aussehen:

{

        "version": 2,

"Einstellungen": {...},

"Stile": {

...,

               "Blöcke": {

             "core/heading": {

     "Farbe": {

      "Text": "var(--wp--preset--color--blue)"

     }

Wiederum gibt es nahezu unendlich viele Beispiele und Möglichkeiten, Voreinstellungen für Blockstile zu verwenden. Sie können sich auf die WordPress-Dokumentation für eine vollständige Aufschlüsselung beziehen.

Es gibt auch Bereiche für Template und Template-Teile. Diese umfassen die Basisdateien Ihres Themes, wie zum Beispiel index.html, sowie Bereiche zur Organisation und Strukturierung Ihres Themes.

Wie Sie Ihre WordPress-Site mit globalen Stilen gestalten

Wenn Sie nach einer anfängerfreundlichen Möglichkeit suchen, Globale Stile zu verwenden, um Ihre Website zu gestalten, können Sie die Schnittstelle für Globale Stile mit einem WordPress-Block-Theme verwenden. Beachten Sie, dass Sie nur mit WordPress 5.9 oder höher Zugriff auf die Stilschnittstelle haben.

Ein blockbasiertes Thema auswählen

Zuerst benötigen Sie ein blockbasiertes Theme. Um eines zu finden, können Sie im WordPress Theme Directory von Ihrem Admin-Armaturenbrett aus navigieren, indem Sie zu Erscheinungsbild > Themes > Neu hinzufügen gehen. Als Nächstes können Sie auf den Feature Filter klicken und Vollständige Seiteneditor auswählen, gefolgt von Anwenden:

Sobald Sie ein WordPress-Theme gefunden haben, das Ihnen gefällt, können Sie den Mauszeiger darüber bewegen und dann Installieren gefolgt von Aktivieren auswählen. Wir verwenden Twenty Twenty-Two, das möglicherweise bereits installiert ist, wenn Sie WordPress 5.9 oder später verwenden.

Zugriff auf die Stil-Oberfläche

Als nächstes gehen Sie zu Ihrem Theme-Editor (Aussehen > Editor). In der oberen rechten Ecke des Bildschirms sehen Sie einen halb schattierten Kreis, der das Styles-Panel darstellt:

Wenn Sie das erste Mal darauf klicken, wird ein Styles-Begrüßungsleitfaden angezeigt. Wenn Sie in Zukunft darauf zugreifen müssen, finden Sie ihn, indem Sie auf die drei vertikalen Punkte in der oberen rechten Ecke klicken und Welcome Guide auswählen.

Das Vorschaufenster zeigt Ihnen, wie der aktuelle Stil Ihres Themes aussieht. Im Styles-Panel finden Sie Einstellungen für:

• Typografie
• Farben
• Layout
• Blöcke

Lassen Sie uns einen genaueren Blick auf jedes werfen.

Typografie

Unter Typography können Sie die Typografieeinstellungen für zwei Elemente verwalten: Text und Links.

Sie können die Schriftart und -größe ändern:

Sie können auch die Zeilenhöhe anpassen und ein Schriftgewicht auswählen. Diese Optionen stehen Ihnen auch für Ihre Links zur Verfügung. Wenn Sie fertig sind, vergessen Sie nicht, Ihre Änderungen zu speichern.

Farben

Unter Colors finden Sie die Standardfarbvoreinstellungen, die mit Ihrem Thema geliefert werden. Um Ihre eigenen Farbpaletten zu erstellen, können Sie die HEX-Wertnummern eingeben oder den Drag-and-Drop-Farbwähler verwenden, um Ihre bevorzugten Farben zu erzeugen:

Sie können die Farben auch in etwas identifizierbareres oder beschreibenderes als die standardmäßigen hexadezimalen alphanumerischen Werte umbenennen. Sie können benutzerdefinierte Verläufe hinzufügen, Duoton-Filter auf Bilder anwenden und mehr.

Als nächstes können Sie die Farben für drei Hauptelemente ändern: Hintergrund, Text und Links. Sie können auch eines dieser Elemente auswählen, um das Styling anzupassen. Die Änderungen werden sofort beim Bearbeiten angewendet.

Layout

Unter Layout können Sie das Padding und andere Elemente anpassen. Dies ist unkompliziert und kann sehr nützlich sein, wenn Sie eine kleine Anpassung vornehmen müssen (beispielsweise aus Gründen der Seitensymmetrie).

Blöcke

Schließlich können Sie das Erscheinungsbild einzelner Blöcke ändern. Nachdem Sie Blöcke im Stil-Panel ausgewählt haben, finden Sie eine Liste der Blöcke auf Ihrer Website.

Angenommen, Sie möchten den Stil Ihres Überschriftsblocks ändern. Sie können Überschrift aus der Liste auswählen und dann deren Farben und Typografie Einstellungen anpassen:

Wenn Sie fertig sind, können Sie auf Speichern klicken. Wenn Sie zu den vorherigen Themestilen zurückkehren möchten, bevor Sie Änderungen vorgenommen haben, können Sie zum Styles Panel navigieren, auf die drei vertikalen Punkte klicken und dann Zurücksetzen auf Standard auswählen.

Ein besserer Weg, WordPress zu nutzen und zu gestalten

WordPress arbeitet kontinuierlich daran, das Bearbeitungserlebnis für seine Benutzer zu verbessern. Jetzt, dank Global Styles, ist die Theme-Entwicklung für Anfänger und erfahrene Profis viel einfacher geworden.

Wie in diesem Beitrag besprochen, können Sie eine theme.json-Datei erstellen, um globale Stilkonfigurationen auf Ihr Thema anzuwenden. Sie können auch den Stil-Editor mit einem blockbasierten Thema verwenden, um das Erscheinungsbild Ihrer Website anzupassen. All dies macht das Design einer erfolgreichen Website zum Kinderspiel.

DreamHost ist ein Team von erfahrenen Web-Experten. Wir verstehen die Bedeutung der Optimierung Ihrer WordPress-Erfahrung. Wir versprechen, Ihre Bemühungen mit der neuesten Open-Source-Technologie und preisgekröntem Support zu unterstützen. Schauen Sie sich noch heute unsere verwalteten WordPress-Hosting-Pläne an, um mehr zu erfahren!