Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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; }

Geschrieben von Konstantin Hanke

thumb

Konstantin arbeitet als Webentwickler bei kulturbanause®. Seine Aufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von freier Software.

Feedback & Ergänzungen – 2 Kommentare

  1. Ronny Schneider
    schrieb am 03.12.2020 um 09:27 Uhr:

    Also ich versuche eigentlich lieber das meiste an Einstellungen über CSS seitenweit festzulegen.

    Das macht es bei vielen Inhalten einfacher.

    Natürlich kann man auch die Optionen in WordPress selbst nutzen. Gerade für Programmier-Laien eine gute Möglichkeit.

    VG
    Ronny

    Antworten
  2. Domi
    schrieb am 02.11.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. :-)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: