kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Schriftgrößen im WordPress Block Editor (Gutenberg) anpassen oder deaktivieren

Für Textabschnitte stellt der Block Editor von WordPress die Möglichkeit zur Verfügung, die Schriftgröße zu verändern. Die auswählbaren Optionen lassen sich beliebig anpassen. Von Haus aus bietet WordPress fünf festgelegte Schriftgrößen an, sowie die Möglichkeit einen individuellen Wert anzugeben. Für den Fall, dass ihr das zur Verfügung stehende Werkzeug für euer Theme anpassen möchtet, zeigen wir euch, wie ihr Optionen deaktivieren oder eine Auswahl mit eigenen Größen registrieren könnt.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Schriftgrößen im Block Editor deaktivieren

Wenn ihr keine Veränderung von Schriftgrößen im Editor erlauben, diese also ausschließlich über das Stylesheet eures Themes steuern möchtet, könnt ihr die Typografie-Optionen, analog zum Entfernen der Farbpalette, mit folgendem Code vollständig deaktivieren. Der Code wird in der functions.php eingefügt.

function disable_font_sizes() {
   add_theme_support('editor-font-sizes', array()); 
   add_theme_support('disable-custom-font-sizes');
}
add_action('after_setup_theme', 'disable_font_sizes');

Eigene Schriftgrößen anlegen

Um eine eigene Auswahl an Schriftgrößen zu registrieren, übergebt ihr der Funktion add_theme_support() den Namen des Features 'editor-font-sizes', sowie ein Array mit den Schriftgrößen. Die Informationen zu den jeweiligen Größen stehen in assoziativen Arrays, in denen ihr jeweils Name, Slug und die Größe in Pixel festlegt. Der Name wird dabei als Info im WordPress Editor angezeigt. Aus dem Slug generiert WordPress eine CSS-Klasse, über die ihr die Schriftgröße in der style.css eures Themes definieren könnt. In der Editor-Vorschau wird die angegebene Größe verwendet.

function customize_font_sizes() {
   add_theme_support('editor-font-sizes', array(
      array(
         'name' => 'Small',
         'slug' => 'small',
         'size' => 12,
      ),
      array(
         'name' => 'Medium',
         'slug' => 'medium',
         'size' => 20,
      ),
      array(
         'name' => 'Large',
         'slug' => 'large',
         'size' => 30,
      ),
   ));
}
add_action('after_setup_theme', 'customize_font_sizes');

Die vordefinierten Schriftgrößen von WordPress werden damit nicht ergänzt, sondern überschrieben.

Angepasste Schriftgrößenauswahl im WordPress-Block-Editor
Angepasste Schriftgrößenauswahl im WordPress-Block-Editor

Option für individuelle Schriftgröße deaktivieren

Standardmäßig enthält WordPress neben den festgelegten Schriftgrößen die Option eine individuelle Größe anzugeben. Wenn ihr die Auswahl auf die vordefinierten Größen beschränken möchtet, könnt ihr diese Option deaktivieren, indem ihr die Funktion customize_font_sizes() um die Zeile add_theme_support('disable-custom-font-sizes'); ergänzt.

function disable_custom_font_sizes() {

   // …

   add_theme_support('disable-custom-font-sizes');

}
add_action('after_setup_theme', 'disable_custom_font_sizes');

Schriftgrößen im CSS definieren

Für die zur Auswahl stehenden Schriftgrößen werden CSS-Klassen nach dem Muster has-$slug-font-size generiert und dem Block hinzugefügt. Diese Klassen könnt ihr jetzt im CSS beliebig stylen. Für die drei Größen aus unserem Beispiel sieht das beispielsweise so aus:

.has-small-font-size { font-size: 12px; }
.has-medium-font-size { font-size: 20px; }
.has-large-font-size { font-size: 30px; }

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

1 Kommentar

  1. Domi

    Verfasst am 2. November 2020 um 23:16 Uhr.

    Danke dafür. Das ist gar keine schlechte Möglichkeit um dem Kunden nur das machen zu lassen, was auch vom Entwickler abgesegnet ist. :-)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.