Tipps und Tricks für das WordPress Astra Theme

Nachfolgend habe ich ein paar Tipps und Tricks für das bekannte und weit verbreitete Astra Theme für WordPress zusammengetragen.

FacetWP mit dem Astra Theme nutzen

FacetWP ist ein mächtiges WordPress Plugin, über das Archive, Suchergebnisse, etc. anhand von definierten Kriterien gefiltert und verfeinert werden können. Mehr Informationen über FacetWP sind hier zu finden: FacetWP Website.

Out of the box funktioniert FacetWP relativ gut im Zusammenspiel mit dem Astra Theme – nur ein Punkt macht Probleme, die Pagination.

Ein Beispiel: Zeigt ein Archiv zehn Seiten mit insgesamt 98 Beiträgen und ich wähle ein Kriterium in FacetWP, um die Anzahl der Beiträge auf 15 zu filtern, dann bleibt die Anzahl Seiten in der Pagination bei zehn (statt korrekterweise zwei bei zehn Beiträgen pro Seite).

FacetWP versucht das Element zu erkennen, das den WordPress Loop enthält. Findet FacetWP ein mögliches Element, dann wird automatisch die Class .facetwp-template hinzugefügt. Bei der Nutzung des Astra Themes identifiziert FacetWP das DIV-Element mit der ID #main. Dieses Element ist falsch, korrekt ist das Element mit der ID #primary.

Um das Problem zu beheben muss man .facetwp-template an der korrekten Stelle manuell hinzufügen. Dazu einfach folgenden Code ergänzen, beispielsweise in einem Child Theme:

add_filter(
    'astra_primary_class',
    function ($classes) {
        $classes[] = 'facetwp-template';
        return $classes;
    }
);

Nachdem die Klasse manuell hinzugefügt wurde funktioniert FacetWP so wie es gedacht ist und die Paginierung enthält die korrekte Anzahl Seiten.

Weiterlesen-Link immer anzeigen

Das Astra-Theme zeigt den Weiterlesen-Link in Archiven nur immer dann an, wenn der Text nicht vollständig angezeigt werden kann. Wird jedoch beispielsweise ein kurzer Blog-Post in einem Archiv angezeigt, dann kann es vorkommen, dass der Weiterlesen-Link („Read more…“) nicht angezeigt wird. Das führt zu einem nicht einheitlichen Erscheinungsbild und kann ggf. stören.

Um das Verhalten zu ändern kann man den Standard-Weiterlesen-Link einfach entfernen und pauschal hinter jeden Beitrag in einem Archiv einfügen. Dadurch wird der Link immer angezeigt. Dazu ist folgender Code erforderlich:

add_action(
    'after_setup_theme',
    function () {
        // Remove "Read more", conditionally added by astra
        remove_filter('excerpt_more', 'astra_post_link', 1);

        // Add "Read more" to every post
        add_filter(
            'the_excerpt',
            function ($content) {
                return $content . astra_post_link();
            },
            99
        );

        // Remove "..." added by astra
        add_filter(
            'astra_post_link',
            function ($value) {
                return str_replace("…", "", $value);
            }
        );
    }
);

Nun sollte der Weiterlesen-Link hinter jedem Beitrag in Archiven angezeigt werden.

Laden von Google Fonts deaktivieren

Bedingt durch die rechtlich unklare Situation bzgl. der Nutzung von Google Fonts im Hinblick auf die DSGVO ist es unbedingt empfehlenswert, die Google Fonts selbst zu hosten.

Das Astra-Theme lädt jedoch Google Fonts per Default, sofern man nicht Systemschriften im Typografie-Bereich auswählt. Mit nachfolgenden Code-Zeilen kann man das Laden von Google Fonts durch Astra pauschal deaktivieren. Die Zeilen müssen beispielsweise via Child Theme hinzugefügt werden.

add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});

Auf diese Weise kann man per Customizer bequem und schnell die gewünschte Schriftart auswählen. Durch die Code-Zeilen wird das Laden der Google Fonts unterbunden, ich kann sie selbst mittels style.css in einem Child Theme lokal laden lassen und bin dadurch was die Google Fonts angeht „sauber“.

Den erforderlichen Code für die Datei style.css sowie die eigentlichen Schrift-Dateien kann man sich über den Google Webfonts Helper generieren lassen.

Achtung: Es kann natürlich vorkommen, dass beispielsweise Plugins zusätzliche Schriftarten via Google Fonts laden. Daher solltest du in jedem Fall immer per Developer Tools im Browser prüfen, mit welchen Adressen kommuniziert wird und welche Daten von dort abgerufen werden.

Standardfarben für den Customizer definieren

Um Standardfarben für den WordPress Customizer zu definieren kann man folgenden Code nutzen:

function sw_astra_color_palettes() {

  $color_palettes = array(
   '#ffffff',
   '#0E7490',
   '#155E75',
   '#65A30D',
   '#4D7C0F',
   '#001cbf',
   '#00a55d',
   '#8e009b',
);

  return $color_palettes;
}

add_filter( 'astra_color_palettes', 'sw_astra_color_palettes' );

Dieser Code muss beispielsweise der functions.php des aktuellen (Child-)Themes hinzugefügt werden. Die angegebenen HEX-Werte müssen entsprechend der gewünschten Farben angepasst werden.