TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

10 Tipps zum Anpassen des Astra-Designs

10

Astra ist eines der beliebtesten Themes, die im kostenlosen WordPress-Theme-Repository verfügbar sind. Es gibt mehr als 1 Million aktive Installationen mit fast 5-Sterne-Bewertung von 5K+ Benutzern. Sie können dieses Thema leicht in der Kategorie „Beliebt” finden, wenn Sie versuchen, ein Thema über das Admin-Panel zu installieren. Wenn Sie das kostenlose Astra-Theme mit dem Pro-Add-on verwenden, finden Sie hier einige Tipps, um das Thema anzupassen und Ihre Website auf die nächste Stufe zu bringen.

10 Tipps zum Anpassen des Astra-Designs

Astra bietet die meisten Anpassungen über den Abschnitt "Darstellung > Anpassen", ähnlich wie bei allen anderen Standard-WordPress-Themes. Bei Hunderten von verfügbaren Optionen können Sie sich jedoch leicht verirren. Darüber hinaus sind mit dem Astra-Theme auch zusätzliche Plugins und Layoutänderungen möglich. Hier werden wir die 10 wichtigsten Tipps zum Anpassen des Astra-Designs auflisten.

10 Tipps zum Anpassen des Astra-Designs

Astra-freies Thema

1 Laden Sie Seiten aus verschiedenen Starter-Vorlagen herunter

Sie wissen, dass Astra Starter-Vorlagen als separates Plugin anbietet. Sie können dieses Plugin verwenden, um eine der vordefinierten Startvorlagen zu installieren, anstatt sie von Grund auf neu zu erstellen. Wenn Sie jedoch mehrere Vorlagen mögen, ist es einfach, nur bestimmte Seiten aus dieser Demo zu übernehmen. Sie können beispielsweise die Seite „Kontakt” von einer Demo und die Seite „Über uns” von einer anderen Demo auswählen.

  • Nach der Aktivierung des Astra Pro-Plugins sehen Sie eine Administratorbenachrichtigung für das Plugin und andere Abschnitte, um Startvorlagen zu verwenden. Klicken Sie auf die Schaltfläche „Erste Schritte”, um das Starter-Template-Plugin zu installieren. Alternativ können Sie das Plugin im WordPress-Plugin-Repository-Bereich suchen und installieren.

10 Tipps zum Anpassen des Astra-Designs

Installieren Sie das Astra Starter Template Plugin

  • Wenn Sie die Demo-Vorlagen anzeigen, sehen Sie zwei Optionen.

10 Tipps zum Anpassen des Astra-Designs

Importieren einer Einzelseitenvorlage in Astra

  • Sie können entweder die komplette Vorlage importieren oder die ausgewählten Seitenvorlagen importieren. Auf diese Weise können Sie aus verschiedenen Demo-Vorlagen nur die Seiten importieren, die Ihnen gefallen.
  • Sie werden eine Eingabeaufforderung sehen, die Sie darüber informiert, dass beim Importieren der Vorlage zusätzliche Plugins für die Seitenvorlagen installiert werden.
  • Wenn Sie fortfahren, wird die Seitenvorlage importiert und Sie sehen eine Erfolgsmeldung wie unten.

10 Tipps zum Anpassen des Astra-Designs

Seitenvorlage erfolgreich importiert

  • Wählen Sie auf ähnliche Weise verschiedene Vorlagen aus verschiedenen Demos aus, um sie auf Ihre Site zu importieren.

Hinweis: Wir empfehlen Ihnen, Vorlagen für denselben Page Builder wie Gutenberg oder Elementor auszuwählen. Dies wird Ihnen helfen, die Installation mehrerer Plugins auf Ihrer Site zu vermeiden. Alle importierten Seitenvorlagen befinden sich im Entwurfsstatus, Sie müssen den Inhalt bearbeiten und die Seiten veröffentlichen.

2 Fügen Sie Yoast SEO hinzu oder ranken Sie Math Breadcrumb

In den meisten Fällen verwenden Sie das Yoast SEO-Plugin mit dem Astra-Theme für Zwecke der Suchmaschinenoptimierung. Eine der Schwierigkeiten mit Yoast besteht darin, dass Sie die Vorlagendatei des Themes (meistens single.php oder header.php) manuell bearbeiten müssen, um einen Breadcrumb- Trail einzufügen. Das Astra-Design löst dieses Problem jedoch für Sie, indem es diese Option im Customizer anbietet. Gehen Sie zum Abschnitt „Darstellung > Anpassen” und wählen Sie die Position für Ihren Breadcrumb im Abschnitt „Breadcrumb”. Klicken Sie auf das Dropdown-Menü „Breadcrumb Source” und wählen Sie die Option „Yoast SEO Breadcrumbs”.

10 Tipps zum Anpassen des Astra-Designs

Yoast oder Rank Math Breadcrumb einfügen

In ähnlicher Weise können Sie auch die Breadcrumb-Option des Rank Math-Plugins aus der Quell-Dropdown-Liste auswählen, wenn Sie dieses Plugin verwenden. Dies ist eine einfache Möglichkeit, den vorhandenen Breadcrumb aus dem Plugin zu verwenden, ohne die Datei des Themes zu bearbeiten.

Verwandte: GeneratePress Premium Vs Astra Pro – Welches ist das beste Thema für Sie?

3 Tags unten einfügen

Die nächsten Tipps zum Astra-Thema sind für diejenigen gedacht, die die Position der Tag-Anzeige in einzelnen Blog-Posts ändern möchten. Standardmäßig können Sie mit dem Astra-Thema Post-Meta-Details unter dem Titel einfügen. Sie können Metadetails wie Kategorien, Tags, Veröffentlichungsdatum, Autor und Kommentare aktivieren oder deaktivieren .

10 Tipps zum Anpassen des Astra-Designs

Tag-Anzeige in Astra

Viele WordPress-Blogger verwenden mehrere Tags, um die Beiträge zu gruppieren. In diesem Fall kann die Anzeige aller Tags unter dem Beitragstitel Platz beanspruchen und überfüllt aussehen. Sie können die Tags ganz einfach unter den Inhalt verschieben, indem Sie den folgenden Code in Ihre Datei functions.php einfügen. Stellen Sie sicher, dass Sie das Astra Child-Theme verwenden und fügen Sie den Code in die Datei functions.php Ihres Child-Themes ein.

// removes the tags in meta below the title add_filter( 'astra_post_tags', 'remove_tags_callback' ); function remove_tags_callback(){ return ' '; } add_action('wp', 'tags_call_back'); function tags_call_back(){ if( is_single()) { add_action( 'astra_entry_bottom', 'add_tags_callback'); } } // display the tags with link at the respective action hook function add_tags_callback(){ $output = ''; $tags_list = get_the_tag_list( '', __( ', ', 'astra') ); if ($tags_list) { $output .= ''. $tags_list. ''; } if(! empty($tags_list)) { echo 'Tags: '. $output. ''; } }

4 Datum der letzten Aktualisierung anzeigen

Das Astra-Theme bietet eine Option zum Anzeigen oder Ausblenden des Veröffentlichungsdatums in Ihren Blog-Posts und Archivseiten. Viele Blogger ziehen es jedoch vor , das letzte aktualisierte Datum anstelle des ursprünglich veröffentlichten Datums als Metadaten anzuzeigen. Deaktivieren Sie zuerst die Option für das veröffentlichte Datum und fügen Sie den folgenden Code in Ihre Datei functions.php ein, um das letzte aktualisierte Datum anzuzeigen.

function your_prefix_post_date( $output) { $output = ''; $format = apply_filters( 'astra_post_date_format', '' ); $modified_date = esc_html( get_the_modified_date( $format) ); $modified_on = sprintf( esc_html( '%s' ), $modified_date ); $output .= ''; $output .= ' '. $modified_on. ''; $output .= ''; return $output; } add_filter( 'astra_post_date', 'your_prefix_post_date' );

Standardmäßig können Sie in WordPress eine einzige Seitenleiste auf Ihrer gesamten Website verwenden. Dies ist jedoch möglicherweise nicht für alle Websitebesitzer der Fall. Möglicherweise haben Sie völlig unterschiedliche Kategorien und möchten für jede Kategorie unterschiedliche Seitenleisten anzeigen. Gehen Sie zum Abschnitt „Darstellung > Astra-Optionen” und scrollen Sie nach unten zum Abschnitt „Astra mit kostenlosen Plugins erweitern”.

10 Tipps zum Anpassen des Astra-Designs

Sidebar-Manager-Plugin

Klicken Sie auf den Link "Aktivieren" bei "Sidebar Manager". Dadurch wird das Plugin auf Ihrer Website installiert und aktiviert und zur Seite „Einstellungen” des Plugins navigiert. Hier können Sie eine neue Seitenleiste erstellen und Ihre Standard-Seitenleiste ersetzen. Klicken Sie auf das Dropdown-Menü "Anzeigen auf" und wählen Sie "Spezifische Seiten / Beiträge / Taxonomien usw." Möglichkeit. Wählen Sie dann „Alle Singulars aus Ihrer Kategorie”, um die Seitenleiste nur für diese bestimmte Kategorie anzuzeigen.

10 Tipps zum Anpassen des Astra-Designs

Benutzerdefinierte Seitenleiste für bestimmte Kategorien

6 Deaktivieren Sie das Laden von Schriftartsymbolen

Das Astra-Design verwendet eine Schriftartdatei zur Verwendung auf den Navigationssymbolen. Diese Datei kann Probleme wie das Vorladen von Schlüsselanforderungen und die kumulative Layoutverschiebung im Google PageSpeed ​​Insights-Tool verursachen. Sie können die Schriftartdatei auf Ihrer Site ganz einfach deaktivieren, indem Sie den folgenden Code in die Datei functions.php Ihres Child-Themes einfügen.

add_filter( 'astra_enable_default_fonts', '__return_false' );

7 WooCommerce-Caching

Wenn Sie WooCommerce verwenden, funktioniert es in den meisten Fällen nicht mit dem Astra-Theme, wenn es mit Caching-Plugins wie WP Rocket verwendet wird. Dies führt auf mobilen Geräten zu Problemen, da die Produkt- und Shopseiten ähnlich wie auf dem Desktop geladen werden. In unserem Artikel erfahren Sie, wie Sie WooCommerce-Seiten vom Caching ausschließen, um sicherzustellen, dass Ihre Shop-Seiten auf Mobilgeräten ordnungsgemäß geladen werden.

8 Kopf- und Fußzeilen-Generator

Das neueste Pro-Addon hat einen schönen Header- und Footer-Builder. Sie können diese Optionen verwenden, um Ihre Kopf- und Fußzeilen-Layouts nach Ihren Bedürfnissen zu erstellen. Navigieren Sie nach der Aktivierung des Pro-Add-Ons zum Abschnitt „Darstellung > Anpassen” und beginnen Sie mit der Erstellung Ihrer Kopf- und Fußzeilen-Erstellungsabschnitte.

10 Tipps zum Anpassen des Astra-Designs

Astra Theme Header Builder

Darüber hinaus können Sie auch die Option „Seitenüberschriften” im Abschnitt „Darstellung > Astra-Optionen” aktivieren. Dies wird Ihnen helfen, einzelne oder websiteweite Seitenkopfzeilen im Abschnitt „Darstellung > Astra-Optionen > Seitenkopfzeilen > Neu hinzufügen” zu erstellen.

10 Tipps zum Anpassen des Astra-Designs

Seitenkopfzeilen-Generator in Astra

9 Verwenden Sie das Hooks-Plugin, um Code einzufügen

Die nächsten Tipps zum Astra-Thema sind für diejenigen, die daran interessiert sind, Code-Snippets auf ihrer Website einzufügen. Benutzer von Pro-Themen können die Option "Benutzerdefiniertes Layout" verwenden, um Google Analytics und andere Layout-Einfügungen einzufügen. Wenn Sie ein kostenloses Theme verwenden, müssen Sie Astra Hooks-Plugins installieren, um Code in den Kopf- und Fußbereich einzufügen.

10 Tipps zum Anpassen des Astra-Designs

Astra Hooks-Plugin

Nach der Installation und Aktivierung des „Astra Hooks”-Plugins werden automatisch zusätzliche Optionen im WordPress-Anpasserbereich unter „Hooks” hinzugefügt. Sie können Site-weite Codes in Kopfzeile, Fußzeile, Seitenleiste, Kommentar oder Inhaltsbereich einfügen.

10 Tipps zum Anpassen des Astra-Designs

Verwenden von Astra Hooks

Verwandte: Top 7 WordPress-Portfolio-Themen.

10 Verwenden Sie ein benutzerdefiniertes Layout, um Abschnitte einzufügen

Pro-Benutzer können die benutzerdefinierte Layout-Funktion verwenden, um HTML- und Skriptinhalte überall auf der Site ohne das Astra Hooks-Plugin einzufügen. Nachdem Sie die Option „Benutzerdefinierte Layouts” aktiviert haben, können Sie einen Layoutbereich erstellen und basierend auf Regeln einfügen. Sie können Google Analytics- Code mit der Aktion wp_head einfügen. Stellen Sie sicher, dass Sie beim Einfügen von Codes auf die Schaltfläche „WordPress-Code-Editor” in der oberen Admin-Leiste klicken. Dies wird Ihnen helfen, richtige einfache und doppelte Anführungszeichen in Ihrem Code zu verwenden.

Darüber hinaus können Sie benutzerdefinierte Abschnitte in jeden Beitrag oder jede Seite mit einer bestimmten Anzahl von Blöcken oder vor einer bestimmten Anzahl von Überschriftenblöcken einfügen. Dies ist nützlich, um Werbung oder Affiliate-Banner an vordefinierten Positionen im Layout Ihrer Website einzufügen.

10 Tipps zum Anpassen des Astra-Designs

Erstellen Sie ein benutzerdefiniertes Layout im Astra-Design

Letzte Worte

Das Schöne am Astra-Theme ist, dass es beim Laden im Browser weniger als 50 KB Größe hinzufügt. Dies bedeutet jedoch nicht, dass Sie mit einer einfachen minimalistischen WordPress-Site leben müssen. Sie können Hooks oder benutzerdefinierte Layouts verwenden und Starter-Vorlagen importieren, um schöne Websites wie alle anderen kommerziellen WordPress-Themes zu erstellen.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen