hallowebsite Type Variables for Kadence

DE | EN

Macht die Schriftgrößen für Fließtext und H1–H6 aus dem Kadence-Customizer als responsive CSS-Variablen verfügbar – so nutzt dein eigenes CSS immer die Typo-Skala des Themes. Mit Einstellungsseite, Copy-Buttons und statischem CSS-Export, damit du das Plugin später ohne Verlust entfernen kannst.

Benötigt WordPress
6.3
Benötigt PHP
7.4
Autor
hallowebsite

Überblick

hallowebsite Type Variables for Kadence liest die globalen Schriftgrößen aus dem Kadence-Customizer (Fließtext und H1–H6) und stellt sie als responsive CSS-Variablen bereit. So nutzt dein eigenes CSS – Karten, Teaser, Buttons, eigene Blöcke – immer dieselbe Typo-Skala wie das Theme. Änderst du eine Größe im Customizer, passt sich jede Stelle mit der Variable automatisch an.

Funktionen

  • CSS-Variablen für body und h1–h6 – responsiv und pro Gerät.
  • Übernimmt die Tablet- und Mobile-Breakpoints von Kadence, inklusive fluider clamp()-Größen.
  • Einstellungsseite mit allen aktuellen Werten und Copy CSS-Buttons.
  • Statischer CSS-Export, damit du das Plugin später ohne Verlust entfernen kannst.
  • Kein Frontend-JavaScript, keine zusätzlichen Dateien – nur ein kleiner Inline-<style>-Block.

Voraussetzungen

  • WordPress 6.3+, PHP 7.4+
  • Kadence-Theme oder Kadence-Child-Theme. Ohne Kadence wird nichts ausgegeben, im Backend erscheint ein Hinweis.

Installation

  1. ZIP unter Plugins → Installieren → Plugin hochladen hochladen und aktivieren.
  2. Einstellungen → Kadence Type Variables öffnen. Der Live-Modus ist standardmäßig aktiv.
  3. Größen wie gewohnt unter Design → Customizer → Colors & Fonts → Typography festlegen und veröffentlichen.

Variablen

VariableBedeutung
--ktv-h1-font-sizeWert für den aktuellen Viewport (responsiv)
--ktv-h1-font-size-desktopFester Desktop-Wert
--ktv-h1-font-size-tabletFester Tablet-Wert
--ktv-h1-font-size-mobileFester Mobile-Wert

h1 kannst du durch body, h2, h3, h4, h5 oder h6 ersetzen.

Verwendung

.card-title  { font-size: var(--ktv-h3-font-size, 24px); }
.small-print { font-size: calc(var(--ktv-body-font-size, 17px) * .85); }
.fixed-title { font-size: var(--ktv-h1-font-size-desktop, 32px); }

Das Plugin definiert nur Variablen – es verändert nie deine Überschriften oder den Fließtext. Gib in var() immer einen Fallback-Wert an.

Einstellungen

  • Live-CSS-Variablen aktivieren: Die Werte werden bei jedem Seitenaufruf aus dem Theme gelesen.
  • Variablen-Referenz: Tabelle mit allen aktuellen Werten und Copy-CSS-Buttons.
  • Statischer CSS-Export: Fertiges CSS zum Einfügen in Zusätzliches CSS.

Hinweise

  • Fehlende Tablet-Werte erben vom Desktop, fehlende Mobile-Werte vom Tablet.
  • Einheiten bleiben exakt wie gespeichert (px, rem, em …) und werden nicht umgerechnet.
  • Einstellungen auf Block- oder Page-Builder-Ebene gehören nicht zu den globalen Werten.
  • Nach Typo-Änderungen den Seiten-Cache leeren.

Plugin entfernen, ohne Styles zu verlieren

  1. Den kompletten statischen Export in Customizer → Zusätzliches CSS kopieren und veröffentlichen.
  2. Live-Modus deaktivieren, Caches leeren und alle Breakpoints prüfen.
  3. Plugin deaktivieren und löschen – dein zusätzliches CSS bleibt erhalten.