Astra Theme - Tipps und Tricks

Dieser Artikel wurde zuletzt aktualisiert am 15.06.2020

Dieser Artikel ist eine Sammlung an Code Snippets, Tipps und Tricks für das mächtige Astra Theme.

Fixed Header Sprungmarken ausgleichen

Nutzt du ein Inhaltsverzeichnis oder andere interne Sprungmarken und gleichzeitig den fixed Header vom Astra Theme, werden Inhalte um die Höhe des fixen Headers abgedeckt. Dieser CSS Code löst das Problem.

/* Fixed header fix */
:target:before {
	content: "";
	display: block;
	height: 65px; /* same as your fixed header height */
	margin: -65px 0 0; /* negative fixed header height */
}

Widget Title Heading Tag H2 ändern

Auch das fabelhafte Astra-Theme geht mit Überschriften fehlerhaft um. Leider!
Als Standard wird der Heading Tag H2 vergeben. Anscheinend wird das von einem WordPress-Default-Theme so übernommen. Das möchte ich aber nicht, da die Überschriften H2 sehr wichtige Marker im Beitragsinhalt darstellen.

Die Änderung machen wir in der functions.php unseres Astra Child-Themes. Wenn du dir nicht sicher bist, wohin damit, dann ganz am Ende anfügen:

// Change Sidebar Widget Title Heading Tag
add_filter( 'astra_widgets_init', 'j0e_widget_title_tag', 10, 1 );
function j0e_widget_title_tag( $atts ) {
  $atts['before_title'] = '<div class="widget-title">';
  $atts['after_title'] = '</div>';
return $atts;
}

Viele vergeben für die Widget-Überschriften dann H4. Ich verwende aber einen div-Container. Optisch bleibt alles gleich, da die CSS-Klasse class="widget-title" verwendet wird.

Bei den Astra-Footer-Widgets funktioniert der Filter leider nicht. Der Support hat mir aber zugesagt, dass sie den Filter auch auf die Footer-Widgets erweitern möchten.

Als Workaround kannst du bei HTML-Widgets den Title direkt in den Inhaltsbereich schreiben:

<div class="widget-title">Dein Title</div>
...

Bilder und Caption anpassen

Beim Astra-Theme sind die Bilder und die Image Caption sehr einfach gehalten. Schatten, links gehaltener Text und kein Rahmen. Mit dem CSS Element figure kannst du etwa einen Rahmen oder Schatten vergeben. figcaption beinhaltet den Text unter dem Bild.

/* Bilder und Caption */
figure {
  box-shadow: 2px 2px 8px 0px #eaeaea;
}
figcaption {
  text-align: center;
}

Im Beispielcode habe ich rund um Bild und Caption einen Schatten gemacht. Die Caption habe ich noch zentriert.

Preload Astra Fonts – wegen Google PageSpeed

Google PageSpeed Insights bemängelt, dass die Fonts-Datei astra.woff mit dem Attribut rel=“preload“ geladen werden soll. Dadurch verzögert die Datei das fertige Laden der gesamten Seite nicht mehr.

Wichtige Anforderungen vorab laden
Mit <link rel=preload> kannst du das Abrufen von Ressourcen priorisieren, die derzeit beim Seitenaufbau erst später angefordert werden.
…fonts/astra.woff

https://developers.google.com/speed/pagespeed/insights/

Diese Änderung kannst du über einen Filter vornehmen. Füge den folgenden Code in die functions.php deines Astra Child-Themes ein:

add_filter( 'astra_enable_default_fonts', 'temp_disable_astra_fonts' );
function temp_disable_astra_fonts( $load ) {
  $load = false;
  return $load;
}
add_action( 'wp_head', 'add_astra_fonts_preload', 1 );
function add_astra_fonts_preload() {
  ?>
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.ttf" as="font" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.svg#astra" as="font" crossorigin />
  <style type='text/css'>
  <?php
  echo '@font-face {font-family: "Astra";src: url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");font-weight: normal;font-style: normal;font-display: fallback;}';
  ?>
  </style>
  <?php
}

Den Code findest du auch hier: https://gist.github.com/Balachandark/3bc4abaccf1bf07fcec378d1dc59b719

Google-Fonts lokal speichern und laden – Google PageSpeed

Die Google-Schriften direkt von Google zu laden ist zwar praktisch, aber nicht Datenschutzkonform und auch nicht die schnellste Option. Deshalb solltest du die genutzten Google-Fonts downloaden und dann von deinem Webserver ausliefern.

Schritt 1: Schriften downloaden

Mario Ranftl stellt kostenlos sein Tool google-webfonts-helper bereit. Da wählst du deine Google-Font aus und kannst diese bequem in allen notwendigen Formaten downloaden. Das .zip-File muss dann noch extrahiert werden.

Schritt 2: Plugin installieren

Installiere das Plugin Custom Fonts, welches ebenfalls von den Astra-Entwicklern kommt.

Unter Design > Custom Fonts kannst du nun bequem die zuvor heruntergeladenen Schriftdateien installieren. Bei Font Display wähle am besten „swap“ aus.

Schritt 3: Custom Font auswählen

Nun navigierst du zu Design > Customizer. Dort gehst du nach Global > Typografie > Basis-Typografie > Schriftfamilie und wählst unter Custom deine neu angelegte Schrift aus.
Nun wird die Google-Schrift direkt von deiner Seite gelauden.

Tipps und Trick für Astra Vorschläge?

Kennst du weitere coole Snippets oder Tools für das Astra Theme?

Falls ja, schreibe mir gerne in den Kommentaren.