So kompilieren Sie SCSS mit PHP: Fügen Sie dem WordPress Customizer Variablen hinzu, um Theme-CSS zu kompilieren

Dieses Tutorial zeigt Ihnen, wie Sie Theme-Einstellungen, zB Theme-Farben, im WordPress Customizer hinzufügen und das Theme-Stylesheet mit den gewählten Variablen neu kompilieren. Indem Sie Design-Styling in SCSS mithilfe einer Bibliothek haben, können Sie Design-Benutzern problemlos erlauben, alle Variablen im Design-Stylesheet anzupassen, ohne dass sie die SCSS-Dateien selbst bearbeiten müssen.

Jedes gute Thema sollte ein gutes Maß an Anpassung ermöglichen. Zumindest sollte es möglich sein, die Farben des Hauptthemas einzustellen. Anstatt viel hässliches CSS zu schreiben, um die Designfarben überall zu überschreiben, können Sie stattdessen das vollständige Stylesheet direkt aus dem Customizer neu kompilieren. In diesem Tutorial erfahren Sie, wie!

Was wir machen – und was wir brauchen

Ich nehme an, Ihr Thema hat bereits ein wenig Styling in SCSS-Dateien, die Sie bereits in die main des Themas kompilieren style.css. Und mit SCSS definieren Sie höchstwahrscheinlich wiederkehrende Dinge wie Farben, Größen oder Haltepunkte als SCSS-Variablen und verwenden diese Variablen in Ihrem gesamten Styling.

Sie können beliebig viele Customizer-Einstellungen für die Variablen in Ihrer SCSS-Datei erstellen. Colorpicker, Zahlen- und Texteingaben sind dafür perfekt. Während der Benutzer die Einstellungen im WordPress Customizer ändert, sieht er eine Vorschau des Designs mit den geänderten Variablen. Und wenn sie auf „Speichern” klicken, wird das endgültige CSS mit den ausgewählten Werten in die Haupt-Stylesheet-CSS-Datei kompiliert.

Als Beispiel für dieses Tutorial nehme ich an, dass die Haupt-Stylesheet-SCSS-Datei des Themas @importeine variables.scssDatei erstellt. Darin haben wir drei Variablen definiert, die wir im Customizer anpassen möchten: Zwei Farben und eine Textgröße in px.

$main: #594c74 !default;
$secondary: #555 !default;
$text-size: 12px !default;

Bitte beachten Sie, dass, damit SCSS Variablen neu definieren kann, diese mit definiert werden müssen !default. Dies ist eine Regel in SCSS. Damit dieses Tutorial funktioniert; Alle Variablen, die Sie anpassen möchten, müssen in Ihren SCSS-Dateien als Standard definiert werden.

Es liegt an Ihnen, wann (oder ob) Sie die CSS-Datei überschreiben möchten. Dieses Tutorial geht davon aus, dass der Benutzer, wenn er im Customizer auf „Speichern” klickt, neu kompiliert und in das CSS des Themes schreibt. Während die Customizer-Vorschau jedoch aktiv ist und der Benutzer Einstellungen ändert (bevor er auf Speichern klickt), geben wir einfach das kompilierte CSS in der Kopfzeile für die Website-Vorschau aus. Wir möchten die CSS-Datei nicht sofort überschreiben, falls der Benutzer vorgenommene Änderungen rückgängig machen möchte.

  Merken Sie sich…

Dieses Tutorial überschreibt die Theme- style.cssDatei jedes Mal, wenn Customizer-Einstellungen gespeichert werden.

Ich gehe davon aus, dass Sie Ihre SCSS-Dateien bereits mit einem Compiler-Programm (z. B. Koala oder Befehlszeile) kompilieren. Wenn Sie diesen Code in Ihrem Design haben, wird die CSS-Datei überschrieben, aber Ihre SCSS-Quelldateien werden nicht geändert. Das bedeutet, wann immer Sie Änderungen im Customizer vornehmen und dann zu Ihren ursprünglichen SCSS-Dateien zurückkehren und neu kompilieren, gehen Ihre Customize-Einstellungen verloren!

Es gibt mehrere Methoden, um dies zu umgehen, und es hängt von Ihrem Projekt und Ihrer Arbeitsweise ab. In den meisten Fällen wäre es kein Problem. Es ist normalerweise nur eine Sache, die Sie im Hinterkopf behalten sollten, während Sie Ihr Thema entwickeln. Wenn Sie Ihr fertiges Design an jemand anderen zur Verwendung weitergeben, würde dieser Ihre SCSS-Dateien normalerweise sowieso nicht anfassen.

Lassen Sie uns damit beginnen, zu untersuchen, wie wir dies tun:

1. Machen Sie sich mit der SCSSPHP-Bibliothek vertraut und integrieren Sie sie in unser Design
2. Erstellen Sie Customizer-Einstellungen für jede SCSS-Variable, die anpassbar sein soll
3. Stellen Sie sicher, dass der Customizer die Änderungen unterwegs in der Vorschau anzeigt
4. Beim Speichern von Customizer-Einstellungen wird die CSS-Datei des Themes neu kompiliert und überschrieben.

1 Die SCSSPHP-Bibliothek

Zum Kompilieren der SCSS-Dateien verwenden wir eine SCSSPHP-Bibliothek von leafo (MIT-Lizenz). Bitte beachten Sie, dass dieses Tutorial für die SCSS-Bibliothek ist. Der Bibliotheksautor hat eine ähnliche LESS-PHP-Bibliothek, wenn Sie lieber LESS verwenden möchten, aber denken Sie daran, dass das folgende Tutorial für die SCSS-Bibliothek ist.

Die SCSSPHP-Bibliothek ist wirklich einfach zu verwenden! Hier ist eine vereinfachte Übersicht darüber, wie wir die Bibliothek im PHP unseres Themes verwenden werden:

• Wir schließen die Bibliothek ein
• Erstellen Sie eine neue Instanz der Compilerklasse aus der Bibliothek
• Laden Sie den Inhalt der SCSS-Quelldatei und übergeben Sie ihn an das Compiler-Objekt
• Definieren Sie ein assoziatives Array; SCSS-Variablennamen (einschließlich $) als Schlüssel und ihre Werte. Jedes Element in diesem Array überschreibt Variablen mit demselben Namen in der bereitgestellten SCSS-Datei.
• Wir bitten das Compiler-Objekt zu kompilieren und erhalten das kompilierte CSS als String zurück. Dieses CSS können wir dann entweder intern ausgeben oder in die Datei headdes Themes schreibenstyle.css

  Welche Art von SCSS-Variablen können wir kompilieren?

Die einfache Antwort lautet: Jede Art von gültiger SCSS-Variable!

Die SCSSPHP-Bibliothek kann jede Art gültiger SCSS-Variablen kompilieren, aber denken Sie daran, dass Sie sicherstellen müssen, dass sie vom Customizer korrekt formatiert werden. Beispielsweise müssen Farben entweder mit einem vorangestellten #Hexadezimalzeichen für Farben versehen oder als rgb()oder – rgba()Definitionen formatiert werden. Eine Größenvariable müsste normalerweise mit ‘ px‘, ‘ em‘, ‘ %‘ usw. angehängt werden.

Wenn Sie vorhaben, ein erweitertes System zum Kompilieren von SCSS-Variablen über das Customizer-Design zu erstellen, stellen Sie sicher, dass Sie über ein gutes System verfügen, um jeden Variablentyp richtig zu formatieren!

Machen wir den ersten Schritt aus dem Weg; Laden Sie die Bibliothek herunter und binden Sie sie in unser Thema ein:

Herunterladen und Einbinden der SCSSPHP-Bibliothek in Ihr Design

Der erste Schritt ist das Herunterladen der SCSSPHP-Bibliothek. Klicken Sie auf der verlinkten Seite ganz oben auf die Schaltfläche „Download”. Wenn Sie lieber Composer verwenden möchten, bietet die Website eine Anleitung dazu.

Extrahieren Sie die ZIP-Datei in einen Unterordner irgendwo in Ihrem Design. Als Beispiel lege ich es in den theme/inc/scssphp/Ordner.

Öffnen Sie die PHP-Datei, in der Sie Ihren Code zum Kompilieren hinzufügen möchten. Es kann sich direkt in Ihrem Design functions.phpoder in einer PHP-Datei befinden, die von functions.php. Der Einfachheit halber schreibe ich alles hinein functions.php.

Bevor wir die Bibliothek verwenden können, müssen wir sie einbinden; so:

require_once(get_stylesheet_directory(). '/inc/scssphp/scss.inc.php');

Passen Sie den Pfad zu Ihren Dateien entsprechend an. Wir müssen die scss.inc.phpDatei einschließen, die sich im Stammordner der Bibliothek befindet. Jetzt können wir nach dieser Zeile die Klassen der Bibliothek verwenden!

2 Erstellen der Customizer-Einstellungen für die SCSS-Variablen

Lassen Sie uns die WordPress Customizer-Einstellungen für unsere Variablen erstellen. Für das Tutorial fügen wir Einstellungen für die oben erwähnten SCSS-Variablen hinzu: zwei Farbwähler und eine Zahleneingabe.

Ich werde nicht ins Detail gehen, um zu erklären, wie man Customizer-Einstellungen hinzufügt – es gibt viele Tutorials dafür. Im folgenden Codebeispiel erstelle ich einen neuen Abschnitt und füge die drei Einstellungen darin ein:

Dieser Code hängt an customize_registerund fügt einen Abschnitt namens „Theme Variables” hinzu. Dann fügt es einen Farbwähler ‘ theme-main‘, einen weiteren Farbwähler ‘ theme-secondary‘ und eine Zahleneingabe ‘ theme-text-size‘ hinzu. Dies ist alles die standardmäßige WordPress-Funktionalität. Ich füge auch hinzu, dass der Standardwert jeder Einstellung auf die gleichen Werte gesetzt wird, wie sie in der variables.scssDatei definiert sind. Dies dient nur dazu, sicherzustellen, dass die Customizer-Einstellungen mit den richtigen Farben beginnen.

Es sieht toll aus! Aber im Moment passiert nichts, wenn Sie diese Variablen anpassen. Fahren wir mit Schritt 3 fort; Handhabung der Vorschau im Customizer.

3 Kompilieren Sie CSS unterwegs in der Customizer-Vorschau

Dieser Schritt behandelt die Aktualisierung der Customizer-Vorschau, während der Benutzer Einstellungen ändert, und schreibt nicht in eine unserer Dateien. Stattdessen geben wir das kompilierte CSS in <head>der Vorschau innerhalb eines <style>Tags aus. Auf diese Weise stellen wir sicher, dass das Inline-CSS alle Stile aus der ursprünglichen CSS-Datei überschreibt.

Um zu überprüfen, ob wir gerade die Customizer-Vorschau verwenden, verwenden wir die Funktion [is_customize_preview](https://developer.wordpress.org/reference/functions/is_customize_preview/)(). Wenn dies zurückkehrt true, erstellen wir eine angehängte Funktion wp_head. Innerhalb der Funktion initiieren und richten wir die SCSSPHP-Bibliothek ein, holen die aktuellen Einstellungswerte, kompilieren das CSS und geben es in einem <style>Tag aus.

In Zeile #7definieren wir den Pfad zur SCSS-Quelldatei und laden ihren Inhalt in eine Variable bei #8. Und in Zeile #9und #10richten wir den Importpfad für die Bibliothek ein, um sicherzustellen, dass alle @imports in unseren SCSS-Dateien korrekt funktionieren. Mehr dazu können Sie auf der Dokumentationsseite der Bibliothek unter der Überschrift „Import Paths” nachlesen. Grundsätzlich muss die SCSSPHP-Bibliothek den relativen Pfad Ihres SCSS-Ordners kennen, damit alle @importPfade korrekt sind.

In Zeile #12-16erstellen wir das Array für den Compiler; ein assoziatives Array mit den Variablennamen als Schlüssel. Für die Werte, die wir verwenden [get_theme_mod](https://developer.wordpress.org/reference/functions/get_theme_mod/)(), um die Werte von Customizer zu erhalten. Die Funktion get_theme_mod()ermöglicht es Ihnen, einen Default als zweiten Parameter zu definieren, wenn der Wert nicht gespeichert wurde. Dies erspart uns das Abstürzen des Compilers mit Werten wie null. Wir stellen also denselben Standard bereit wie in unserer SCSS-Variablendatei und als wir die Customizer-Einstellungen registriert haben.

Beachten Sie auch, dass der Code in Zeile #15ein ‘ px‘ anhängt, um sicherzustellen, dass der tatsächliche Variablenwert gültig ist. Andernfalls würde es als „ $text-size: 12;” kompiliert werden, wenn wir „ $text-size: 12px;” benötigen. Wir stellen dem Compiler das Variablen-Array in Zeile bereit #17und weisen ihn an, mit diesen Variablen zu kompilieren.

Dann #19-22rufen wir in Zeile die compile()Funktion auf, die das kompilierte CSS als String zurückgeben soll. Wir geben ein <style>Tag mit dem darin enthaltenen CSS-String aus. Da wir mit verbunden sind wp_head, rendert der Customizer die Vorschau jedes Mal mit dem geänderten CSS, wenn eine Änderung vorgenommen wird.

4 Speichern Sie das kompilierte CSS im Stylesheet des Designs

Der Code zum Kompilieren des CSS ist dem vorherigen Schritt sehr ähnlich. Der einzige Unterschied besteht darin, dass wir das CSS jetzt in eine Datei schreiben, anstatt es auszugeben. Sie sollten wirklich in Betracht ziehen, dies in eine Funktion zu integrieren, damit Sie den Code nicht wiederholen, aber der Übersichtlichkeit halber habe ich mich entschieden, die beiden zu trennen.

Wir hängen an [customize_save_after](https://developer.wordpress.org/reference/hooks/customize_save_after/)welchen Triggern, wenn jemand im WordPress Customizer auf Speichern klickt. An diesem Punkt holen wir das Quell-SCSS, definieren Variablenwerte und kompilieren es in CSS. Mit dem CSS-String verwenden wir eine einfache PHP-Funktion, um ihn in die CSS-Datei des Themas zu schreiben.

Der einzige Unterschied zu vorher besteht in der Zeile, #8in der wir die Zieldatei definieren, in die geschrieben werden soll, und in der Zeile #19, in der wir in die Datei schreiben.

  Fazit

Wir haben jetzt Customizer-Einstellungen, die Variablen in der SCSS-Datei des Designs steuern und das Haupt-Stylesheet des Designs mit diesen Variablen überschreiben. Es gibt keine Begrenzung, wie viele oder welche Art von Einstellungen Sie den Theme-Benutzern erlauben möchten, anzupassen! Investieren Sie etwas Zeit in die Einrichtung eines geeigneten Systems, um die Formatierung verschiedener Variablentypen (z. B. Präfixe oder Postfixe) zu handhaben und die Customizer-Einstellungen richtig zu strukturieren. Die Benutzer des Themes werden die Flexibilität zu schätzen wissen und wie einfach es ist, Ihr Theme anzupassen!

Sie können auch verschiedene Wege finden, um mit dem Schreiben der Datei des endgültigen CSS umzugehen. Wenn Sie das Haupt-Stylesheet nicht überschreiben möchten, möchten Sie es vielleicht in eine andere Datei ausgeben. Sie können sich auch mit der Verwendung von if-else-Bedingungen in SCSS befassen.

Dieses Tutorial wurde geschrieben, um Ihnen ein Sprungbrett zu geben, wie Sie Ihr WordPress-Theme über den Customizer anpassen können. Lassen Sie mich wissen, ob es für Sie von Nutzen war – oder ob Sie ein fortgeschritteneres Tutorial wünschen, das sicherstellt, dass das Stylesheet des Themas nicht überschrieben wird!