Hinzufügen von Rückenwind -CSS zu neuen und vorhandenen WordPress -Themen

Seit ich in etwa 15 Jahren begann, WordPress-Websites zu machen, hatte nichts mehr Einfluss (und eine große Lücke) darauf, wie produktiv ich war und wie sehr ich mich mit Front-End-Entwicklung genossen habe.

Als ich anfing, Rückenwind zu verwenden, gab es ein neuestes Repository für Erstanbieter auf GitHub, der beschrieben hat, wie man Rückenwind in WordPress verwendet. Das Repository wurde seit 2019 nicht aktualisiert. Das Fehlen von Aktualisierungen veranschaulicht jedoch nicht die Praktikabilität von Rückenwind für WordPress -Entwickler. Durch das Beste ist WordPress als bestes, was WordPress beider Plattformen ist und moderne Websites in kürzerer Zeit erstellt.

Das Beispiel für Mindesteinstellungen in diesem Artikel soll das ursprüngliche Einstellungs -Repository aktualisieren und so geändert werden, dass sie mit den neuesten Versionen von Rückenwind und WordPress kompatibel sind. Dieser Ansatz kann auf eine Vielzahl von WordPress -Themen erweitert werden, von abgeleiteten Standardthemen bis hin zu vollständig benutzerdefinierten.

Warum WordPress -Entwickler dem Rückwind folgen sollten

Bevor wir die Einstellung diskutieren, lohnt es sich, zu überprüfen, wie Rückenwind funktioniert und was es in einer WordPress -Umgebung bedeutet.

Mit Tailwind können Sie HTML-Elemente mit bereits bestehenden Dienstprogrammklassen stylen und die Notwendigkeit beseitigen, die meisten oder alle CSS Ihrer Website selbst zu schreiben. (Denken Sie an Klassen wie hidden for display: hidden oder uppercase für text-transform: uppercase .) Wenn Sie in der Vergangenheit Frameworks wie Bootstrap und Foundation verwendet haben, ist der größte Unterschied, den Sie in Tailwind CSS finden, die leere Schiefermethode des Designs und das leichte Merkmal von CSS, das nur CSS-Wiederherstellungen enthält. Diese Eigenschaften ermöglichen hoch optimierte Websites, ohne Entwickler auf die ästhetische Einbau des Rahmens selbst zu drängen.

Darüber hinaus kann im Gegensatz zu vielen anderen CSS -Frameworks "Standard" -Ergebäude zum Laden von Rückenwind -CSS aus vorhandenen CDNs nicht durchgeführt werden. Die generierte CSS -Datei ist aufgrund aller enthaltenen Versorgungsklassen zu groß. Tailwind bietet ein "Play CDN", wird jedoch nicht in Produktionsumgebungen verwendet, da es die Leistungsvorteile von Rückenwind erheblich verringert. (Es ist jedoch sehr praktisch, wenn Sie schnelles Prototyping durchführen oder auf andere Weise mit Rückenwind experimentieren möchten, ohne es tatsächlich zu installieren oder den Build -Prozess einzurichten.)

Dies erfordert die Verwendung von Tailwind -Erstellungsprozess, um eine Untergruppe von Rahmenbedienungsklassen zu erstellen, die für Ihr Projekt spezifisch sind, und es ist sehr wichtig zu verstehen, wie Tailwind entscheidet, welche Dienstprogrammklassen enthalten sind und wie sich dieser Prozess auf die Verwendung von Dienstprogrammklassen im WordPress -Editor auswirkt.

Schließlich bedeutet Tailwinds aggressives Preflight (seine CSS -Reset -Version), dass einige Teile von WordPress nicht genau mit seinen Standardeinstellungen zum Framework passen.

Schauen wir uns zunächst an, welche Aspekte des Rückenwinds in WordPress gut funktionieren.

Der Aspekt von Rückenwind und Wordpress arbeiten zusammen

Damit der Rückenwind ohne große Anpassung gut läuft, muss es als Haupt -CSS für eine bestimmte Seite fungieren.

Wenn Sie beispielsweise ein WordPress-Plugin erstellen und Front-End-CSS einschließen müssen, wird der Vorflug von Tailwind direkt mit dem aktiven Thema in Konflikt stehen. Wenn Sie den WordPress -Administratorbereich (extern zum Editor) stylen müssen, kann der eigene Stil des Managementbereichs überschrieben werden.

Es gibt verschiedene Möglichkeiten, diese beiden Probleme zu lösen: Sie können Preflight und Präfix aller Versorgungsklassen deaktivieren oder mit POSTCS -Namensnamen für alle Selektoren einfügen. In jedem Fall werden Ihre Konfiguration und Ihr Workflow komplexer.

Wenn Sie jedoch ein Thema erstellen, kann Rückenwind direkt verwendet werden. Ich habe mit klassischen Redakteuren und Blockeditoren erfolgreich benutzerdefinierte Themen erstellt, und ich glaube, dass es bei der ortsweiten Reifung viele seitenweite Bearbeitungsfunktionen gut mit Tailwind passt.

In ihrem Blog-Beitrag "Gutenberg Site-wide Editoren müssen nicht vollständig sein", beschreibt Tammie Lister die stellvertretenden Redakteure als eigenständige Funktionssatz, die teilweise oder vollständig übernommen werden kann. Es ist unwahrscheinlich, dass globale Stilfunktionen für die ortsweite Bearbeitung mit Tailwind funktionieren, aber viele andere Funktionen können möglicherweise.

Also: Sie erstellen ein Thema, der Tailwind ist installiert und konfiguriert und fügt eine Versorgungsklasse mit einem Lächeln hinzu. Aber funktionieren diese Versorgungskurse im WordPress -Editor?

Durch Planung können Sie! Versorgungsklassen sind im Editor verfügbar, solange Sie im Voraus entscheiden, welche Dienstprogrammklassen verwendet werden sollen. Sie können den Editor nicht öffnen und alle Rückenwind-Dienstprogrammklassen verwenden.

Es gibt viele Möglichkeiten, dies zu tun: Sie können eine sichere Liste in der Tailwind-Konfigurationsdatei erstellen.

Die Redakteurklasse zu bestimmen, war für mich noch nie ein Hindernis für die Arbeit, aber dies ist immer noch die meisten, die ich nach der Beziehung zwischen Rückenwind und WordPress gefragt habe.

Minimales WordPress -Thema mit minimaler Rückenwind -CSS -Integration

Beginnen wir wie möglich mit dem grundlegenden WordPress -Thema. Es gibt nur zwei erforderliche Dateien:

• style.css
• index.php

Wir werden Tailwind verwenden, um style.css zu generieren. Beginnen wir für Index.php mit etwas Einfachem:

  Php
/**
 * Die Hauptvorlagendatei.
 *
 * Dies ist die allgemeinste Vorlagendatei in einem WordPress -Thema
 * und eine der beiden erforderlichen Dateien für ein Thema (das andere ist style.css).
 * Es wird verwendet, um eine Seite anzuzeigen, wenn nichts spezifischeres mit einer Abfrage übereinstimmt.
 * ZB, es wird die Startseite zusammengestellt, wenn keine Home.php -Datei vorliegt.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_twenty_one
 * @Since zwanzig einundzwanzig 1.0
 */

get_header ();
?>

<main id="site-content" role="main">

     Php
    if (Have_posts ()) {

        while (Have_posts ()) {
            the_post ();

            get_template_part ('template-parts/content', get_post_type ());

        }

    } anders {

        get_template_part ('template-parts/content', 'keine');

    }
    ?>

</main>

 php get_foter ();

Es gibt viele Dinge, die WordPress -Themen tun sollten, und der obige Code tut dies nicht - wie Pagination, Post -Miniaturansichten, Link -Elemente anstelle von Warteschlangen -Stylesheets usw. -, aber das reicht aus, um einen Beitrag zu zeigen und zu testen, ob Rückenwind wie erwartet funktioniert.

In Bezug auf den Rückenwind benötigen wir drei Dateien:

• package.json
• Tailwind.config.js
• Die Eingabedatei des Rückenwinds

Sie brauchen NPM, bevor wir fortfahren. Wenn Sie es nicht gewohnt sind, es zu verwenden, haben wir einen Leitfaden für den Einstieg mit NPM, was ein großartiger Ort ist, um anzufangen!

Da es noch keine Package.json -Datei gibt, erstellen wir eine leere JSON -Datei im selben Ordner wie index.php, indem wir den folgenden Befehl im Terminal ausführen:

 echo {}> ./package.json

Mit dieser Datei können wir Rückenwind installieren:

 NPM Installieren Sie Tailwindcss-Save-dev

Und generieren Sie unsere Rückenwind -Konfigurationsdatei:

 NPX Tailwindcss init

In unserer Datei Tailwind.config.js müssen wir den Tailwind nur anweisen, in unserer PHP -Datei nach Dienstprogrammklassen zu suchen:

 module.exports = {
  Inhalt: ["./**/*.php"],
  Thema: {
    verlängern: {},
  },
  Plugins: [],
}

Wenn unser Thema Komponist verwendet, möchten wir das Lieferantenverzeichnis ignorieren, das durch Hinzufügen von "! **/Lieferanten/**" zum Inhaltsarray erfolgen kann. Wenn jedoch alle PHP -Dateien Teil des Themas sind, funktioniert die oben genannte!

Wir können die Eingabedatei für jeden gewünschten Namen benennen. Erstellen wir eine Datei namens Tailwind.css und fügen Sie Folgendes hinzu:

 /*!
Themenname: WordPress Rückenwind
*/

@TailWind Base;
@TailWind -Komponenten;
@TailWind Utilities;

Die Annotation oben ist erforderlich, damit WordPress das Thema erkennen kann.

Das war's! Wir können jetzt den folgenden Befehl ausführen:

 npx tailwindcss -i ./tailwind.css -o ./style.css -Watch

Dies gibt der Tailwind -CLI an, dass Tailwind.css als Eingabedatei verwendet wird, um unsere style.css -Datei zu generieren. Das Flag -Watch -Flag wird die Datei style.css -Datei kontinuierlich neu aufbauen, wenn Dienstprogrammklassen aus jeder PHP -Datei im Projektrepository hinzugefügt oder entfernt werden.

Es ist so einfach wie ein WordPress-Thema mit dem angetriebenen WordPress, aber es ist unwahrscheinlich, dass es etwas ist, das Sie in einer Produktionsumgebung einsetzen möchten. Lassen Sie uns also einige Wege zum produktionsbereiten Thema diskutieren.

Fügen Sie einem vorhandenen Thema Rückenwindcss hinzu

Es gibt zwei Gründe, warum Sie einem vorhandenen Thema, das bereits über ein eigenes CSS für ein eigenes native CSS verfügt, Rückenwind -CSS hinzufügen möchten:

• Experiment addieren die Rückenwindkomponente zu einem gestalteten Thema
• Konvertieren Sie das Thema von nativen CSS in den Rückenwind

Wir werden dies demonstrieren, indem wir den Rückenwind in einundzwanzig Jahren installieren (das Standardthema für WordPress). (Warum nicht zweiundzwanzig?

Wenn das Thema nicht in Ihrer Entwicklungsumgebung installiert ist, sollten Sie es herunterladen und installieren. Danach müssen wir nur die folgenden Schritte ausführen:

• Navigieren Sie zum Themenordner im Terminal.
• Da zwanzig einundzwanzig bereits eine eigene Paket.json-Datei hat, können Sie Tailwind installieren, ohne eine neue Datei zu erstellen:

 NPM Installieren Sie Tailwindcss-Save-dev

• Fügen Sie Ihre Datei tailwind.config.json hinzu:

 NPX Tailwindcss init

• Aktualisieren Sie Ihre Datei tailwind.config.json in derselben Datei wie im vorherigen Abschnitt.
• Kopieren Sie die zwanzig einundzwanzig vorhandene Style.css-Datei in Tailwind.css.

Jetzt müssen wir der Datei Tailwind.css drei @TailWind -Anweisungen hinzufügen. Ich schlage vor, Sie konstruieren die Datei tailwind.css wie folgt:

 /* WordPress -Themendateiheader ist hier. */

@TailWind Base;

/* Alle vorhandenen CSSS sind hier. */

@TailWind -Komponenten;
@TailWind Utilities;

Wenn Sie die Basis unmittelbar nach dem Thema des Themas setzen, stellt WordPress weiterhin Ihr Thema fest und stellt gleichzeitig sicher, dass das Rückenwind -CSS -Reset so früh wie möglich in der Datei erscheint.

Alle vorhandenen CSSs befinden sich hinter der Basisschicht, um sicherzustellen, dass diese Stile Vorrang vor dem Zurücksetzen haben.

Schließlich werden die Komponenten- und Versorgungsschichten sofort befolgt, sodass sie mit der gleichen Spezifität Vorrang gegenüber jeder CSS -Erklärung haben können.

Jetzt werden wir wie unser minimales Thema den folgenden Befehl ausführen:

 npx tailwindcss -i ./tailwind.css -o ./style.css -Watch

Jetzt, da Ihre neue style.css -Datei jedes Mal generiert wird, wenn Sie die PHP -Datei ändern, sollten Sie nach subtilen Rendering -Unterschieden zwischen dem geänderten Thema und dem ursprünglichen Thema überprüfen. Diese werden durch das CSS -Reset von Tailwind verursacht, was etwas gründlicher ist, als einige Themen erwarten könnten. Für zwanzig einundzwanzig ist die einzige Modifikation, die ich vorgenommen habe, die Textdekorationszeile hinzuzufügen: Unterstreichen Sie dem A-Element.

Nachdem wir das Rendering-Problem gelöst haben, fügen wir die Header-Bannerkomponente aus der UI (Tailwind-Komponentenbibliothek) hinzu. Kopieren Sie den Code von der Tailwind UI -Website und fügen Sie ihn nach dem Link "zum Inhalt springen" in Header.php ein.

sehr gut! Da wir jetzt Utility -Kurse verwenden, um einige vorhandene in das Thema integrierte höhere Spezifitätsklassen zu überschreiben, werden wir der Datei Tailwind.config.js eine Zeile hinzufügen:

 module.exports = {
  Wichtig: wahr,
  Inhalt: ["./**/*.php"],
  Thema: {
    verlängern: {},
  },
  Plugins: [],
}

Dies markiert alle Rückenwind -CSS -Dienstprogramme als! Wichtig, damit sie vorhandene Klassen mit höherer Spezifität überschreiben können. (Ich habe in der Produktionsumgebung nie wichtig gesetzt, aber wenn ich eine Website von nativem CSS in Rückenwind konvertiere, mache ich es mit ziemlicher Sicherheit.)

Durch Hinzufügen einer kurzen No-Underline-Klasse zum Erlernen von mehr Link und dem Hinzufügen von BG-Transparent und Border-0 zum Schließen sind wir fertig:

Es sieht ein bisschen hart aus, wenn die Komponenten der Rückenwind -Benutzeroberfläche in das WordPress -Standardthema verschmelzen, aber dies ist eine schöne Demonstration der Rückenwindkomponenten und ihre inhärente Portabilität.

Fangen Sie von vorne an

Wenn Sie Tailwind verwenden, um ein neues Thema zu erstellen, ist Ihr Prozess dem obigen minimalen Beispiel sehr ähnlich. Anstatt die Tailwind -CLI direkt aus der Befehlszeile auszuführen, möchten Sie möglicherweise separate NPM -Skripte für Entwicklungs- und Produktionsaufbaute erstellen und Änderungen überwachen. Möglicherweise möchten Sie auch einen separaten Build für den WordPress -Editor erstellen.

Wenn Sie nach einem Ausgangspunkt suchen, der über das kleinste Beispiel über das obige Beispiel hinausgeht - aber nicht über das Ausmaß, in dem es selbst seinen selbstgerechten Stil hat -, habe ich einen von unterstrichen (_S) inspirierten WordPress -Themengenerator für mit dem kanonische WordPress inspirierte WordPress -Typengenerator erstellt. Mit dem Namen _tw ist dies ein kurzer Start, den ich hoffe, wenn ich zum ersten Mal Rückenwind mit WordPress verwendet habe. Es ist immer noch der erste Schritt in allen meinen Kundenprojekten.

Wenn Sie bereit sind, Ihrem Toolkit weiter von der Struktur eines typischen WordPress -Themas abzuweichen und LaRavel Blade -Vorlagen hinzuzufügen, ist Sage eine großartige Option und verfügt über einen Setup -Leitfaden für Rückenwind, um Ihnen den Einstieg zu erleichtern.

Unabhängig davon, wie Sie anfangen möchten, ermutige ich Sie, sich etwas Zeit zu nehmen, um sich an das CSS von Rathwind anzupassen und Utility -Kurse zu verwenden, um HTML -Dokumente zu stylen.

Das obige ist der detaillierte Inhalt vonHinzufügen von Rückenwind -CSS zu neuen und vorhandenen WordPress -Themen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!