Styling -Schaltflächen in WordPress -Blockthemen

Neue Funktionen, die in WordPress 6.1 eingeführt wurden, bieten die Steuerung für die direkte Anwendung von Schatten direkt in der Benutzeroberfläche von Blockeditor und Site -Editor. Dieser Artikel wird in eine Möglichkeit eintauchen, Schaltflächen in WordPress -Block -Themen zu stylen, insbesondere mit theme.json Dateien.

Warum die Schaltfläche auswählen? Dies ist eine gute Frage, fangen wir hier an.

verschiedene Arten von Schaltflächen

Im Kontext des WordPress -Block -Editors müssen wir zwischen zwei verschiedenen Arten von Schaltflächen unterscheiden:

1. Subblocks im Button -Block.
2. Schaltflächen, die in anderen Blöcken verschachtelt sind (z. B. der Artikel -Kommentar -Formularblock für Artikel).

Wenn wir diese beiden Blöcke zur Vorlage hinzufügen, haben sie standardmäßig das gleiche Erscheinungsbild.

Aber seine Markierungen sind sehr unterschiedlich:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Wir können sehen, dass die HTML -Tagennamen unterschiedlich sind. Es sind die gemeinsamen Klassennamen - .wp-block-button und .wp-element-button -, die den konsistenten Stil der beiden Schaltflächen sicherstellen.

Wenn wir CSS schreiben, werden wir diese beiden Klassen ansprechen. Aber wie wir alle wissen, haben WordPress -Block -Themen unterschiedliche Stilverwaltungsmethoden, dh über theme.json Dateien.

Wie definieren Sie Knopfstile in theme.json ohne tatsächliche CSS zu schreiben? Lass es uns zusammen machen.

Erstellen Sie grundlegender Stil

theme.json ist ein strukturierter Satz von Mustern, die in Form von Attribut geschrieben sind: Wertpaare. Das Attribut auf der obersten Ebene heißt "Abschnitte" und wir werden den Abschnitt styles verwenden. Hier befinden sich alle Stilrichtlinien.

Wir werden in styles besondere Aufmerksamkeit schenken. Dieser Selektor lokalisiert HTML -Elemente, die zwischen den Blöcken geteilt werden. Hier ist das grundlegende Framework, das wir verwenden: elements

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Was wir tun müssen, ist ein Tastenelement zu definieren.

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Diese Taste entspricht dem HTML -Element, mit dem das Taste -Element am vorderen Ende markiert wird. Diese Schaltflächen enthalten HTML -Tags, die möglicherweise einer unserer zwei Tastentypen sein können: eigenständige Komponenten (d. H. Tastenblöcke) oder Komponenten, die in einem anderen Block verschachtelt sind (z. B. Artikel -Kommentarblöcke).

Anstatt jeden einzelnen Block stylen zu müssen, erstellen Sie einen gemeinsamen Stil. Lassen Sie uns die Standard -Hintergrundfarbe und die Textfarbe für die zwei Schaltflächentypen im Thema ändern. Es gibt ein Farbobjekt darin, das wiederum Hintergrund- und Texteigenschaften unterstützt, wo wir den gewünschten Wert festlegen:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

Dies verändert die Farben beider Tasten.

Wenn Sie Devtools öffnen und die von WordPress für die Schaltfläche generierten CSS anzeigen, werden wir feststellen, dass die

-Klasse den in .wp-element-button: theme.json definierten Stil hinzufügt

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

Dies sind unsere Standardfarben! Als nächstes möchten wir Benutzern visuelles Feedback geben, wenn sie mit Schaltflächen interagieren.

Implementieren Sie den interaktiven Schaltflächenstil

Da es sich um eine Site über CSS handelt, sind viele von Ihnen bereits mit dem Interaktionsstatus von Links und Schaltflächen vertraut. Wir können den Mauszeiger über sie schweben (:hover), Registerkarte ihnen, um sie zu konzentrieren (:focus) und sie klicken, um sie aktiv zu halten (:active). Es gibt sogar einen :visited Status, der dem Benutzer visuell zeigt, dass er zuvor darauf geklickt hat.

Dies sind CSS-Pseudoklassen, mit denen wir die Interaktion von Links oder Schaltflächen lokalisieren.

In CSS können wir den :hover Zustand wie folgt stylen:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

In theme.json werden wir diese Pseudoklassen verwenden, um vorhandene Tastenerklärungen zu erweitern.

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Bitte beachten Sie die "strukturierten" Eigenschaften. Wir folgen im Grunde einer Zusammenfassung:

• Element
  • Element
    • Objekt
      • Eigenschaften
        • Wert

Wir haben nun die vollständige Definition der Standard- und interaktiven Stile der Schaltfläche abgeschlossen. Aber was ist, wenn wir einige in andere Blöcke verschachtelte Tasten stylen wollen?

Stellen Sie den Stil der Schaltflächen ein, die in jedem Block verschachtelt sind

Nehmen wir an, wir möchten, dass alle Schaltflächen mit einer Ausnahme unseren grundlegenden Stil haben. Wir möchten, dass die Schaltfläche "Senden" im Artikel -Kommentarformularblock für Artikel blau ist. Wie sollen wir es erreichen?

Dieser Block ist komplexer als ein Schaltflächenblock, da er aktivere Teile enthält: Formulare, Eingänge, beschreibender Text und Schaltflächen. Um die Schaltflächen in diesem Block zu lokalisieren, müssen wir dieselbe JSON -Struktur wie das Schaltflächenelement befolgen, jedoch auf den Block "Artikel Kommentarformular" an das core/post-comments-form Element zugeordnet werden:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Bitte beachten Sie, dass wir in elements nicht mehr arbeiten. Stattdessen arbeiten wir innerhalb von blocks, wodurch die tatsächlichen Blöcke konfiguriert werden. Im Gegensatz dazu werden Schaltflächen als globales Element angesehen, da sie in Blöcken verschachtelt werden können, selbst wenn sie als eigenständige Blöcke verwendet werden können.

JSON -Struktur unterstützt Elemente innerhalb von Elementen. Wenn im Artikel -Kommentarformular Block ein Schaltflächenelement vorhanden ist, können wir ihn im core/post-comments-form -Block finden:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

Dieser Selektor bedeutet, dass wir nicht nur einen bestimmten Block lokalisieren, sondern auch ein bestimmtes Element lokalisieren, das in diesem Block enthalten ist. Jetzt haben wir eine Reihe von Standard -Schaltflächenstilen, die für alle Schaltflächen im Thema gelten, und eine Reihe von Stilen, die für bestimmte Schaltflächen gelten, die im Artikel -Block für Artikelkommentare enthalten sind.

WordPress erzeugte CSS hat daher einen genaueren Selektor:

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

Was ist, wenn wir verschiedene interaktive Stile für die Schaltfläche "Article Comment Form" definieren möchten? Dies ist genauso wie für die Standardstile, außer dass diese Stile im core/post-comments-form -Block definiert sind:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Was soll ich tun, wenn die Tasten in Nicht-Blocks?

WordPress generiert automatisch die richtigen Klassen, um diese Schaltflächenstile auszugeben. Aber was ist, wenn Sie ein "hybrides" WordPress-Thema verwenden, das Block- und Standortbearbeitung unterstützt, aber auch "klassische" PHP-Vorlagen enthält? Oder was ist, wenn Sie einen benutzerdefinierten Block erstellt haben, sogar eine alte Version des Shortcode mit einer Schaltfläche? Diese werden nicht von Motoren im WordPress -Stil gehandhabt!

Mach dir keine Sorgen. In all diesen Fällen fügen Sie die .wp-element-button -Kläufe zur Vorlage, dem Block- oder Shortcode -Tag hinzu. Die von WordPress erzeugten Stile werden dann angewendet.

In einigen Fällen können Sie die Markierung möglicherweise nicht kontrollieren. Zum Beispiel können einige Block -Plugins zu willkürlich sein und ihre eigenen Stile nach Belieben anwenden. Zu diesem Zeitpunkt können Sie normalerweise zur erweiterten Option im Blockeinstellungsfeld wechseln und die Klasse dort anwenden:

Zusammenfassung

Während es sich möglicherweise umständlich anfühlt, "CSS" in theme.json zuerst zu schreiben, fand ich es als zweite Natur. Wie CSS können Sie eine begrenzte Anzahl von Eigenschaften ausgiebig oder sehr genau mit dem richtigen Selektor anwenden.

Und vergessen Sie nicht, theme.json drei Hauptvorteile zu verwenden:

1. Stile gelten für Tasten in Front-End-Ansicht und Blockeditor.
2. Ihr CSS wird mit zukünftigen WordPress -Updates kompatibel sein.
3. Die generierten Stile sind mit Blockthemen und klassischen Themen kompatibel - und muss nichts in einem separaten Stilblatt kopieren.

Wenn Sie den theme.json -Stil in Ihrem Projekt verwenden, teilen Sie bitte Ihre Erfahrungen und Ideen mit. Ich freue mich darauf, Kommentare und Feedback zu lesen!

Das obige ist der detaillierte Inhalt vonStyling -Schaltflächen in WordPress -Blockthemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!