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.
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:
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:
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.
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.
Links und Quellen
- Sticky Header bei Twenty Twenty-Three:
https://haurand.com/twenty-twenty-sticky-header/ - Navigation bei Twenty Twenty-Three:
https://haurand.com/navigation-im-cover-block-bei-twenty-twenty-three/ - Twenty Twenty-Three anpassen
https://einstieg-in-wp.de/thema/tt3-anpassen/ - Issues Twenty Twenty-Three:
https://core.trac.wordpress.org/search?q=twenty+twenty-three - Neuigkeiten rund um WordPress, u. a. Vorstellung neuer (Block) Themes (Podcast):
https://wp-sofa.de/ - Podcast PressWerk: interessante Hintergründe und unterhaltsame Gespräche rund um WordPress:
https://presswerk.net/
Weitere Beiträge zum Thema
- Gestaltung von Headings (Überschriften) bei Block Themes
- Shrinked Header bei Twenty Twenty-Four
- Cover Block in WordPress 6.5
- WordPress: All-in-One WP Migration, Backup-Migration und Duplicator
- GeneratePress und theme.json: Mehr Einstellungsmöglichkeiten bei den Blöcken
Mehr erfahren auf dieser 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 (104) Anleitung (67) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (69) Veranstaltungen (3) WordPress (112)
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).
Danke für den Kommentar und Deinen Tipp zur Alternative für den oberen Rand. Das kannte ich noch nicht.
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.
Danke für den Kommentar.
Ja das stimmt: Den Fehler hatte ich vor einiger Zeit auch gefunden. Wenn ich mich nicht irre, gibt es dazu auch einen Issue auf Github, den ich aber gerade nicht gefunden habe.
Wie man das Website-Logo ändert, habe ich vor einiger Zeit in dem folgenden Beitrag beschrieben:
https://haurand.com/website-logo-beim-full-site-editing-einfuegen/
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).
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.
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.