Twenty Twenty-Three: Tipps zu Breakpoints und einiges mehr

Beitragsdatum: 18.06.2023 | Letztes Update: 10.11.2023

Twenty Twenty-Three: Tipps zu Breakpoints, oberen Rand, quadratische Beitragsbilder, etc.

Das Standard-Theme Twenty Twenty-Three (ein sogenanntes Block Theme), besticht einerseits durch seine Schlichtheit, ist aber unglaublich flexibel und kann den eigenen Wünschen umfassend entsprechend fast beliebig angepasst werden. Twenty Twenty-Three (TT3) überzeugt darüber hinaus durch seine exzellenten Werte insbesondere bei der Performance. In diesem Beitrag stelle ich einige Tipps z. B. zu Breakpoints, oberen Rand, quadratische Beitragsbilder, etc. zusammen.

Bei der Entwicklung verschiedener Kundenprojekte und Testinstanzen habe ich in den letzten Monaten häufig Twenty Twenty-Three fast ausschließlich eingesetzt. Dabei habe ich einige Dinge selbst entwickelt bzw. auch durch entsprechende Recherchen gefunden, die für die Umsetzung von Projekten mit TT3 interessant sein könnten. Hier ein erster Einblick. Die Reihe wird fortgesetzt.

Zusätzliches CSS bei Block Themes

In WordPress kann ab Version 6.2.1 zusätzliches CSS (Custom CSS) wie folgt eingegeben werden. Einen umfangreicheren Beitrag, in dem weitergehende Möglichkeiten dargestellt werden, habe ich bereits vor einiger Zeit erstellt.

Zusätzliches CSS bei WordPress 6.2.1
Zusätzliches CSS bei WordPress ab Version 6.2.1

Oberen Rand “ausschalten”

Ich habe mehrere Hinweise nach Veröffentlichung dieses Beitrags bekommen, dass diese Option durchaus auch ohne CSS mit Bordmitteln eingestellt werden kann. Dazu wählt man über den Website-Editor das Template und anschließend den Header. Hier kann man über Stile („Halbmond“ rechts oben) den Innenabstand auf 0 setzen:

Grafik: haurand.com

Bei einem Block Theme wie z. B. bei dem aktuellen Standard-Theme Twenty Twenty-Three gibt es seit WordPress 6.2 die Möglichkeit, CSS-Regeln nach Klick auf Design > Website-Editor der Startseite im Website-Editor zu erstellen:

Custom CSS bei WordPress 6.2 und einem Block Theme
Custom CSS bei WordPress 6.2 und einem Block Theme

Standardmäßig ist bei Aktivierung des Themes oben ein innerer Rand (Padding) eingeschaltet. Mit einer einfachen CSS-Regel kann man diesen inneren Rand deaktivieren:

.wp-site-blocks {
    padding-top: 0px;
}

Breakpoint setzen

Wenn man den Breakpoint (Wechsel zum mobilen Menü, also dem Hamburger) an einer anderen Stelle setzen möchte, kann man auch das mit einer entsprechenden CSS-Regel erreichen.

Eine Möglichkeit dazu habe ich hier gefunden: https://stackoverflow.com/questions/75186930/change-mobile-menu-breakpoint-wordpress-twenty-twenty-three-theme/)

@media screen and (max-width: 767px) {
  /* hamburger button */
  .wp-block-navigation__responsive-container-open  {
    display: block !important;
  }

  /* full menu */
  .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
    display: none !important;
  }
}

Eine weitere Option wurde im englischsprachigen Support-Forum genannt:
https://wordpress.org/support/topic/2023-theme-mobile-menu-break-point/

@media (min-width: 1000px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    left: 0;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

@media (max-width: 999px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

Breakpoint ein- und zweispaltig beim Abfrage-Block

In einigen Fällen kann es sinnvoll sein, den Breakpoint auch beim Abfrage-Block anders zu setzen. Hier die entsprechende CSS-Regel dazu

/* Abfrage Block */
/* zweispaltig */
@media (min-width: 600px) {
.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li {
    width: calc(50% - .625em);
	}
}

/* dreispaltig */
@media (min-width: 1000px) {
.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li {
    width: calc(33.33333% - 0.83333em);
	}
}

Quadratische Bilder beim Post Featured Image (Abfrage-Block)

Im Post Template kann man bei den Styles unter Dimensions bei „ASPECT RATIO“ eintragen, ob man z. B. quadratische Bilder („square“) einstellen möchte. Das Seitenverhältnis eines Bildes oder Videos ist das proportionale Verhältnis der Breite zur Höhe. Man kann das an zwei durch einen Doppelpunkt getrennten Zahlen im x:y-Format erkennen. Beispielsweise hat ein 6×4-Zoll-Bild ein Seitenverhältnis von 3:2, während ein 1920×1080-Pixel-Video ein Seitenverhältnis von 16:9 hat.

Quadratische Bilder im Abfrage-Block
Quadratische Bilder im Abfrage-Block

Hier eine entsprechende CSS-Regel:

.wp-block-cover.has-custom-content-position.is-position-bottom-center {
    aspect-ratio: 1/1;
    max-width: 100%;
}

Fazit

Mittlerweile gehört Twenty Twenty-Three (neben GeneratePress) zu einem meiner wenigen Lieblings-Themes. Es gibt einige Dinge, die sich – wie übrigens auch bei vielen klassischen Themes – nur über entsprechende CSS-Regeln lösen lassen. Da sollen die hier genannten Tipps helfen. Übrigens haben wir mittlerweile nicht nur bei Testinstanzen Twenty Twenty-Three, sondern erstmals auch eine – wenn auch zugegebenermaßen – „kleine“ Website damit fertiggestellt. Soviel kann ich sagen: Es hat richtig Spaß gemacht. Aber nicht nur Twenty Twenty-Three ist ein sehr interessantes Block Theme. Es gibt daneben noch einige weitere Block Themes, die man sich ansehen sollte, z. B. Björk, Poe, Abisko (alle Themes übrigens von Anders Norén), Frost und Lemmony.

Weitere Beiträge zum Thema


Mehr erfahren auf dieser Webseite

Twenty Twenty-Three ist ein hochflexibles Block Theme (WordPress): Tipps zu Breakpoints, oberen Rand, quadratische Beitragsbilder, etc.


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (107) Anleitung (72) Block-Editor (45) CSS (10) Full Site Editing (36) Keine Anzeige (1) Plugins (28) Short News (1) Theme (31) Tipps (70) Veranstaltungen (3) WordPress (117)

7 Gedanken zu „Twenty Twenty-Three: Tipps zu Breakpoints und einiges mehr“

  1. Twenty Twenty-Three ist als Grundlage für einfache Websites wirklich flexibel, deutlich besser als es auf den ersten Blick aussieht und eine gute Grundlage zum Kennenlernen des Website-Editors.

    Danke für die Tipps. Der Beitrag ist gebookmarkt, und ich freue mich schon auf die Fortsetzung 😉

    P.S. „Oberen Rand ausschalten“ kann man auch im Website-Editor. Einfach in „Stile“ > „Layout“ im Bereich „Innenabstand“ für „Oben“ eine „0“ eintragen (siehe Schritt 5 im Beitrag https://einstieg-in-wp.de/tt3-anpassen-05/#header-und-footer-farblich-gestalten).

    Antworten
  2. Wenn man den Stil des Themes ändert, sind die CSS-Angaben weg, deshalb gehe ich über die url „…/wp-admin/customize.php“ in den alten Customizer („Zusätzliches CSS“). Die Stile finde ich ganz gut, um unterschiedliche Farben zu ändern und zu testen.

    Im alten Customizer stelle ich auch das Website Icon (für das Favicon) ein. Ich habe noch nicht herausgefunden, wie das mit dem neuen Editor geht.

    Antworten
      • Vielen Dank, den kleinen Schalter (als Website Icon verwenden) habe ich übersehen.

        Ich finde es immer etwas schwierig, dass WordPress nicht zwischen Logo (Schriftzug) und Icon unterscheidet, was ja nicht dasselbe ist. Das sind zwei verschiedene Bilder und Formate. Vorher habe ich das gut lösen können über Customizer (Icon) und Template (Logo).

        Antworten
  3. Ich suche die Möglichkeit, innerhalb des Footers mehrere Elemente untereinander pro „Spalte“ einzufügen – und das schaffe ich in der vordefinierten Zeile nicht (aber vielleicht lässt sich das anders lösen, damit wäre meine folgende Frage hinfällig?!?)

    Mein Ansatz besteht darin, im Footer einen Block vom Typ „Spalte“ hinzuzufügen. Je nachdem, auf welcher Ebene ich das tue, ist die Gesamtbreite der Spalten aber entweder deutlich schmäler als die der vordefinierten Zeile – oder deutlich breiter. Ich moechte aber, dass meine Spalten sich bzgl. Gesamtbreite genauso verhalten wie die vordefiniere Zeile.

    Der Zeile übergeordnet ist ja eine „Gruppe“ – aber auch wenn ich die Gruppierung aufhebe, verstehe ich nicht, wie es im Template-Standard gelöst ist.

    Antworten
    • Hallo Matthias,
      leider kann ich dazu ohne eine URL zur Website kaum was sagen.
      Auf der folgenden Testinstanz von uns habe ich einen mehrzeiligen Footer mit einem Wavy Divider und einer Gruppe darunter eingebaut.
      Bei Gruppen gibt es rechts auch die Option für „Die inneren Blöcke verwenden die Breite des Inhalts“. Evtl. hängt das Problem damit zusammen.

      Antworten

Schreibe einen Kommentar