Astreine Tipps & Tricks für das Astra-Theme

Das Astra-Theme für WordPress erfreut sich seit längerer Zeit großer Beliebtheit, was sich wohl auf schnelle Ladezeiten sowie seine universelle Einsetzbarkeit zurückführen lässt. Astra wird von Brainstorm Force aus dem indischen Pune entwickelt und spielt in einer Liga mit Themes wie dem ebenfalls populären GeneratePress.

Bei mir kam Astra zuletzt als Basis-Theme für Websites mit integrierten WooCommerce-Shops zum Einsatz – sowohl mit dem Block Editor als auch mit Elementor. Soweit war das eine gute Erfahrung, denn Astra bietet (insbesondere zusammen mit dem kostenpflichtigen Ergänzungs-Plugin Astra Pro) eine gesunde Zahl an Einstellungs- und Erweiterungsmöglichkeiten, ohne gleich zu einem überladenen Wollmilchsau-Theme zu werden. Bei meinen Projekten bin ich allerdings auf ein paar Punkte gestoßen, die ein händisches Eingreifen erforderten. Hier also eine Reihe von Tipps & Tricks, die ich fortlaufen aktualisieren werde.

Änderungen direkt am Astra-Theme

Footer immer an den unteren Bildschirmrand verschieben

Astra hat von Haus aus eine etwas nervige Einstellung: Wenn der Inhalt einer Seite oder eines Blog-Beitrags nicht die Höhe des Bildschirms ausfüllt, dann rutscht der Footer nach oben. Leider gibt es hierfür keine Einstellung im Customizer, aber ein Code-Schnipsel reicht, um den Footer unten sticky zu machen – hier in der offiziellen Astra-Dokumentation ist die Lösung.

Block Editor den Settings aus dem Customizer entsprechend anpassen

Das ist auch etwas merkwürdig: Warum spiegelt bei Astra der Block Editor so wenig die Settings im Customizer wider? Das wird bei anderen Themes besser gelöst.

Bei Jochen Gererstorfer finde ich einen Hinweis, wie ich die Breite des Editors anpassen kann.

Eine weitere Merkwürdigkeit: Wenn ich Adobe Fonts nutze und über den Customizer ausgewählt habe, warum wird dann im Block Editor zwar der Seitentitel entsprechend ausgeben, aber Texte – etwa im Paragraph-Block – nicht?

Das lässt sich beheben, in dem man diese Regel in die block-editor-style.css hinzufügt:

.edit-post-visual-editor .block-editor-block-list__block {
    font-family: 'Minion-3',minion-3,serif!important;
}

Ohne !important-Auszeichnung funktionierte es bei mir allerdings nicht.

Gutenberg Blocks – Ultimate Addons for Gutenberg

Brainstorm Force, die Entwickler:innen von Astra haben natürlich auch ein Block-Plugin an den Start gebracht, das kostenlos über die WordPress Plugin Repository verfügbar ist und auf die Nutzung mit Astra abgestimmt ist: Gutenberg Blocks – Ultimate Addons for Gutenberg, kurz UAGB.

UAGB Post Grid – Icons aus der Post Meta entfernen

Das UAGB-Plugin bringt einen ganz praktischen Post-Grid-Block mit, der eine ganze Reihe an Einstellungsmöglichkeiten hat. Eine Einstellung habe ich aber vermisst, denn lasse ich mir hier Post-Meta-Daten wie das Veröffentlichungsdatum oder die Beitragskategorie anzeigen, zeigt der Post Grid Block hier kurzerhand jeweils „passende“ Icons aus der WordPress-eigenen Icon-Familie Dashicons an, ohne dass ich das ausschalten kann. Mit ein wenig CSS blende ich die Icons aus:

.uagb-post-grid .dashicons {
	display: none;
}

Zudem werden die Metadaten von einem Zeichen namens middot oder interpunct getrennt – einem dickeren Punkt auf halber Zeilenhöhe (CSS content code: \b7). Das möchte ich anders haben, und zwar mit einem Slash so wie auf der Standard-Astra-Blogseite. Dafür suche ich mir den entsprechenden CSS-Code für das Zeichen raus (etwa hier) und baue ihn so ein:

.uagb-post-grid .uagb-post__author:not(:last-child)::after, .uagb-post-grid .uagb-post__date:not(:last-child)::after {
    content: "\002F"; /*Hier den CSS Code für das Trennzeichen*/
    vertical-align: initial; /*Änderung von middle*/
    margin: 0; /*Hier passe ich die Abstände an */
    line-height: 1;
}

/* Verringerung des Abstands nach dem Slash */
.uagb-post-grid .uagb-post-grid-byline > * {
    margin-right: 2px;
}

Weiterhin merkwürdig ist, dass die Metadaten in Großbuchstaben gesetzt sind, ohne dass ich das im Block-Editor ändern kann. Nervig, denn die Schriftgröße kann ich dort ja anpassen. Das folgende CSS-Snippet schafft Abhilfe:

.uagb-post-grid .uagb-post-grid-byline {
    text-transform: none;
    letter-spacing: 0;
}

Insgesamt sind mir die Stilvorgaben des UAGB Post Grid Block dann doch etwas zu opionated dafür, dass ich sie nicht im Editor anpassen kann.

Astra und The Events Calendar

Mein Plugin der Wahl für komplexere Veranstaltungskalender ist The Events Calendar (hier in der WordPress-Repo, und hier die offizielle Website mit Informationen zur Pro-Version). Die Macher:innen von The Events Calendar behaupten zwar auf ihrer Website, die Kombination ihres Plugins mit Astra sei problemlos: „There was absolutely no hassle setting [Astra] up to work with The Events Calendar — in fact, it works as is.“ Meiner Erfahrung nach sind aber einige grundsätzliche Anpassungen nötig, damit das Zusammenspiel überhaupt funktioniert.

So sah es nämlich zuletzt aus, als ich Astra und The Events Calendar auf einer frischen WP-Installation zusammen aktiviert hatte und ein Beispiel-Event veröffentlicht hatte:

Astra-Theme-Styles kollidieren mit The Events-Calendar

Zum einen erben die einzelnen Events ein ziemlich großes Padding, und dann laufen sie nicht über die ganze Breite des Kalenders, sondern nur über ein Drittel der Content-Breite.

Die folgenden zwei CSS-Regeln haben den Murks behoben:

/* Übergroßes Padding entfernen */
.tribe-events .ast-article-post {
	padding: 20px 0;
}

/* Event-Beitrag über die gesamte Content-Breite laufen lassen */
.tribe-events .ast-width-md-4 {
    width: 100%;
}