Divi Archiv Titel und Beschreibung hinzufügen (WordPress Archive Page Title)

Hi zusammen, in diesem Tutorial werden wir die den Divi-Archiv-Seiten Titel und Beschreibung hinzufügen. Los geht´s!

In diesem Beitrag möchte ich euch zeigen, wie ihr bei Divi die Archivseite etwas verbessern könnt. Dies ist es zum einen optisch ratsam, zum anderen aber auch aus SEO-Sicht denn die klassische Archivseite hat bei Divi keinen Titel und keine Beschreibung – und das natürlich etwas ungünstig, gerade wenn es um SEO geht.

 

Die einfachste Möglichkeit ist, die Archivseite über den Pagebuilder anzupassen.  So kann auf jeder Seite über das Modul BLOG eine eigene Kategorie ausgegeben werden. Das ist simpel. Problematisch sind aber nicht die einzelnen Seiten, die ich als Archiv nutzen möchte, sondern die automatischen Archivseiten, die WordPress und Divi ausgeben. Hier habe ich zwar meine Seitenleiste und ein großes Bildchen, samt Überschrift, Auszug und Kategorie. Was mir aber fehlt ist die H1 Überschrift und die Beschreibung der Kategorie.

wordpress standard archiv seite

Hier gibt es leider keine Möglichkeit seitens Divi, das Template einfach anzupassen. Wir müssen also die Templates ein bisschen umbauen. Keine Sorge, das ist nicht kompliziert. Los geht´s:

1. Eine Datei Category.php erstellen

Logge dich per FTP auf deinem Server ein,  gehe zu Theme-Ordner und suche die Datei index.php.

Lade ich die Datei herunter und benenne die Datei jetzt in Kategorie um (category.php)

Das ist wichtig, denn so können wir diese Datei individuell anpassen und müssen nicht bei jedem Update immer wieder die Index-Datei anpassen, sondern können einfach diese eigene Datei in unseren Child-Theme-Ordner kopieren. Damit bleibt diese Datei bei jedem Update erhalten.

2. Den Code für die WordPress Archiv-Titel und Beschreibung hinzufügen

So, jetzt öffnen wir die Datei mit jedem Texteditor oder HTML-Editor und suchen nach dem DIV-Part gleich zu Anfang der Datei.

HINTER <div id=“left-area“>  füge folgenden Code ein:

<?php if ( have_posts() ) : ?>
<header class="blog-title">
<h2><?php printf( __( '%s', 'Divi' ), '<span>' . single_cat_title() . '</span>' ); ?></span></h2>
<?php the_archive_description( '<div class="taxonomy-description">', '</div>' );?>
<hr class="archive-line"/>
</header>
<?php endif; ?>

Das Ganze sollte nun so ausschauen.

Jetzt speichern wir die Datei und kopieren diese und laden diese direkt in den Ordner unseres Childthemes (du kannst die Datei auch in den Ordner des Hauptthemes schieben, in dem die index.php liegt. Ich würde aber empfehlen die angepassten Dateien immer in deinen Childtheme-Ordner zu kopieren).

Prima! Damit sind wir dann aus SEO-Sicht glücklich. Wir haben jetzt eine H1-Überschrift und einen Beschreibungstext für jede Kategorie.

3. Den Divi Archive-Title per CSS optimieren

Jetzt können wir den ganzen Spaß noch bisschen hübscher gestalten. Ich möchte per CSS das Design etwas bearbeiten. dazu kopieren wir ein wenig CSS-Code in die Datei style.css von unserem Childtheme.

/* BLOG TITEL UND BESCHREIBUBNG */
.blog-title {
margin-bottom: 61px;
background-color: #ffffff;
padding: 30px;
}
hr.archive-line {
width: 22%;
float: left;
border: 0;
height: 5px;
background-color: #901688;
}
/* ENDE */

Ihr könnt den CSS Code einfügen wo ihr wollt, also gleich ganz am Anfang hinter diesem Sternchen Flash oder auch an das Ende der Datei.

 

In diesem Beispiel habe ich den Titel mit einem weißen Kasten hinterlegt (background-color) und ein wenig inneren Abstand zum Kasten (padding) hinzugefügt. Damit sieht die Archivseite nun so aus:

Das war´s. Die erste Überschrift auf unserer Archiv-Seite ist nun eine H1-Überschrift. Zudem haben wird die Beschreibung der Kategorie ausgegeben. Und wir können all dies per CSS leicht formatieren.

Ich hoffe dir hat der Beitrag gefallen?! Falls ja, dann hinterlasse mir einen Kommentar und abonnierte meine YT-Kanal. Das hilft mir und das hilft dir, da ich so mehr Videos für dich machen kann. Danke!

Tool-Tipp:

Folgende Apps nutze ich in meinem Blog. Zu den meisten dieser Apps findest du auf meinem YouTube-Kanal oder direkt hier eine ausführliche Review.

Keyword-Strategie: WriterZen, LongTailPro, Link Assistant
Content-Erstellung: Frase, StoryChief, Bramework, NeuronWriter
Optimierung Pagespeed: WP Rocket, ShortPixel
Optimierung Conversion: Convertbox
Sicherheit: WPVivid

Du suchst nach einer Lösung für dein Marketing, deiner SEO- oder Content-Strategie? Dann schau auch gern in meiner Akademie vorbei: Businesserfolg.de

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!

Geheimtipps für einen einzigartigen Online-Shop

Geheimtipps für einen einzigartigen Online-Shop

Sie wollen also einen Online-Shop starten und in das eCommerce-Business einsteigen? Toll! Es war noch nie leichter als hier und jetzt. Was braucht man da eigentlich? Der Inhalt, die Struktur, das Design und das war's. Nur drei Elemente, aber deren Einfluss darf man...

„In den Warenkorb“ auf WooCommerce Shopseite aktiveren

„In den Warenkorb“ auf WooCommerce Shopseite aktiveren

WooCommerce ist ein tolles Shopsystem, aber einige Dinge sind bei WooCommerce-Themes nicht ganz nachzuvollziehen. So fehlt aus designtechnischen Gründen beispielsweise oft der Button "In den Warenkorb" auf der Shopseite. Leider bietet hier WooCommerce keine...

Google Maps – Eine eigene API erstellen

Google Maps – Eine eigene API erstellen

Google Maps stellt sein Kartenmodul nach wie vor kostenlos zur Verfügung. Allerdings benötigt man zur Nutzung einen sogenannten API Key (API Schlüssel). In diesem kleinen Tutorial zeige ich dir, wie du eine API erstellst und für deine Website nutzt. Hast du ein...

Platz für deinen Kommentar!

3 Kommentare

  1. Amelie

    Der Artikel gefällt mir sehr gut. Ich konnte sehr viel beim Lesen mitnehmen. Weiter so Marco :)

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Workshops

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download

Überblick

Galerie

Features

Preise