Hinzufügen von Unterstützung der Flüssigkeits Typografie zu WordPress -Block -Themen

Fluid Typografie passt die Schrifteigenschaften (Größe, Linienhöhe) dynamisch anhand der Ansichtsfenstergröße an und verbessert die Reaktionsfähigkeit. Auch als Responsive Typografie, flexibler Typ oder Typografie zur Ansichtsfenster bezeichnet, bietet sie eine überlegene Benutzererfahrung. Dieser Artikel konzentriert sich auf die Implementierung der Fluid-Typografie in WordPress 6.1 und nutzt die integrierten Block-Editor-Funktionen.

Beim einfachen Hinzufügen einer clamp() -Funktion zu style.css erstellt Fluid -Text, erfordert eine echte Block -Editor -Integration einen anderen Ansatz.

Gutenbergs Fluid Typografieunterstützung

Viele WordPress-Themenentwickler haben clamp() in ihren Themen verwendet, einschließlich Blockthemen wie zweiundzwanzig und dreiundzwanzig. Gutenberg (WordPress-Blockeditor) führte jedoch die Unterstützung der Fluid-Typografie in Version 13.8 ein und ermöglichte die Implementierung auf Themenebene für die direkte Anwendung innerhalb des Blockeditors. Diese Funktionalität wurde Teil des WordPress Core in Version 6.1.

Rich Tabor, ein wichtiger Mitwirkender, unterstreicht die Kraft und Einfachheit der Funktion. Der Ansatz konzentriert sich auf die Unterstützung auf Blockebene, wobei standardmäßig dynamisch flüssige Schriftgrößen angewendet werden. Zu den Vorteilen gehören:

• Implementierung des Themas Autor.
vereinfacht.
Wardierbare, wiederverwendbare Anwendung auf bestimmte Elemente/Blöcke.
Flexibilität in Schriftgrößeneinheiten (PX, REM, EM, %).

theme.json contentSize: 768px Fluid Typografie wird über widesize: 1600px, eine Block -Themenkonfigurationsdatei, implementiert. Betrachten Sie eine große Schriftart mit clamp() und

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

fontSizes fluidSize Geben Sie dann

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

Dies fügt der "großen" Schriftgröße (2,25REM zu 3REM) einen Flüssigkeitstyp hinzu. Die "große" Schriftart kann dann mit Schriftstellungen auf einen beliebigen Block angewendet werden. theme.json

<code>.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}</code>

<p></p> clamp() angewendet auf Elemente wie

-Werten beitragen.

Beispiele

Beispiel 1: Setzen Sie eine neue Fluid -Schriftart

sicherstellen, dass Gutenberg (13,8) oder WordPress 6.1 verwendet werden. Aktivieren Sie den Flüssigkeitstyp in theme.json:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

Einstellungen der Schriftgröße hinzufügen:

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

"Normal" im Blockeditor anwenden und das Front-End-Markup und das CSS verifizieren.

Beispiel 2: Ausschluss einer Schrifteinstellung aus Fluidtyp

Flüssigkeitstyp wie zuvor aktivieren. Definieren Sie Schriftgrößen und deaktivieren Sie den Flüssigkeitstyp für einen:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

WordPress erzeugt CSS entsprechend, ausgenommen die "extra große" Einstellung von den Anpassungen vom Flüssigkeitstyp. Überprüfen Sie das Front-End-Markup und das CSS.

Blockthemen mit Fluid Typografieunterstützung

Viele Themen verwenden clamp() für den Flüssigkeitstyp. Mehrere kürzlich veröffentlichte Themen unterstützen die neue Feature der Fluid -Typografie.

Community -Feedback

Die Feature der WordPress -Fluid -Typografie hat von der Entwicklergemeinschaft ein positives Feedback erhalten und ihre Vorteile sowohl für Entwickler als auch für Inhaltsverbraucher hervorgehoben. Einige Entwickler schlagen vor, bestimmte Aspekte eher als standardmäßig zu entscheiden.

Schlussfolgerung

Die WordPress -Fluid -Typografie -Funktion ist aktiv entwickelt. Obwohl die Autoren der Themen derzeit verwendbar sind, sollten die Autoren mit Vorsicht vorgehen und relevante Github -Probleme überwachen. Zahlreiche Ressourcen liefern weitere Informationen zur Fluid -Typografie und deren Implementierung in WordPress.

Das obige ist der detaillierte Inhalt vonHinzufügen von Unterstützung der Flüssigkeits Typografie zu WordPress -Block -Themen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!