Artikel mit Schlagwort

function csstricks_toc($post=false) {
  global $post;
  $blocks = parse_blocks( $post-post_content );
  $headings = array();

  foreach( $blocks as $block ) {
    if( 'core/heading' === $block['blockName'] ) {
      if( false !== strpos( $block['innerHTML'], 'id=' ) ) {
        $element = 'h' . $block['attrs']['level'];
        

…

Schriftarten sind ein entscheidendes Merkmal des Designs jeder Website. Das schließt WordPress-Themes ein, wo es üblich ist, dass Theme-Entwickler einen Dienst wie Google Fonts in die WordPress Customizer-Einstellungen für ein „klassisches“ PHP-basiertes Theme integrieren. Das ist noch nicht …

Die WordPress Style Engine generiert den CSS-Code für ein Block-Theme. Warum sollten Sie wissen wollen, wie ein unsichtbarer Prozess wie dieser funktioniert? Nun, genau wie beim Schreiben von CSS möchten Sie sicherstellen, dass Ihr Code organisiert und strukturiert ist, damit Ihre Stile die CSS-Kaskade richtig nutzen.

Wir haben in dieser Serie viel abgedeckt. So viel, dass ich dachte, es wäre hilfreich, alle verschiedenen Block-Theme-Einstellungen und Stile aus theme.json auf einer einzigen Seite hier zusammenzufassen.

Kommen wir zum anderen Top-Level-Abschnitt von theme.json, wo wir die CSS eines Block-Themes konfigurieren können: styles. Wir werden lernen, was es genau ist und wie wir es verwenden können, um die in Teil 2 behandelten voreingestellten Werte zu überschreiben und anzuwenden.

Nehmen wir das, was wir über die theme.json-Struktur in WordPress-Block-Themes gelernt haben, und wenden wir es auf zwei Hauptabschnitte der Datei an: settings und styles. Diese Arrays sind die "Top-Level"-Ebene für die Konfiguration von WordPress-Funktionen und die CSS-Ausgabe des Themes.

Um zu beginnen, lassen Sie uns zunächst einige Glossarbegriffe überprüfen, die wichtig sind, um zu verstehen, was die theme.json-Datei ist, wie sie strukturiert ist und wie man sie konfiguriert. Wir werden Beispiele behandeln, aber das Hauptziel hier ist es, sich mit Begriffen vertraut zu machen, denen wir in dieser Serie begegnen werden.

Die Verwaltung von CSS in WordPress hat sich dramatisch verändert, seit Full-Site-Editing-Funktionen in Block-Themes eingeführt wurden. Diese Anleitung richtet sich an Block-Themes und deren Konfiguration, von der Aktivierung von Editor-Funktionen und Steuerelementen bis hin zur Definition von Theme-weiten CSS und der Anpassung des Erscheinungsbilds spezifischer Blöcke.

Vor einiger Zeit schrieb Ganesh Dahal einen Beitrag hier auf CSS-Tricks als Antwort auf einen Tweet, in dem nach dem Hinzufügen von CSS-Box-Schatten zu WordPress-Blöcken und -Elementen gefragt wurde. Es gibt dort viele großartige Dinge, die neue Funktionen nutzen...