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!

Divi: Lightbox ohne Plugin

Divi: Lightbox ohne Plugin

Wer eine Website mit viel Inhalt baut und dennoch eine übersichtliche Gestaltung wünscht, kommt früher oder später um das Thema Lightbox nicht mehr herum. Nun gibt es viele Plugins mit denen man diese Lightboxes erstellen kann. Aber jedes Plugin belastet...

WordPress Backup erstellen: die vollständige Anleitung.

WordPress Backup erstellen: die vollständige Anleitung.

In der Regel passiert es in den ungünstigsten Momenten: Die WordPress Seite ist plötzlich verschwunden oder ein gravierender Fehler taucht auf. Dabei lief gestern noch alles ohne Probleme. Der Grund für solche Überraschungen ist meist ein Update von WordPress, eines...

500 Internal Server Error WordPress

500 Internal Server Error WordPress

Manchmal kommt es vor, dass die liebste Website plötzlich einen Fehler 500 Internal Server Error ausgibt. Das ist ärgerlich. Vor allem passiert dies meist dann, wenn man es am wenigsten braucht. Und besser noch: es erwischt einen, wenn man mal "nicht" ein Backup zur...

|

Hey, hinterlasse mir einen Kommentar!

2 Kommentare

Einen Kommentar abschicken

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

Marco

Marco

Designer & Marketer

Später lesen?

Diesen Artikel als
E-Book downloaden!


DOWNLOAD

Pin It on Pinterest

Share This

Durch der Website stimmst du der Cookie-Verwendung zu. Impressum | Datenschutzerklärung | Cookie-Settings