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!