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!

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...

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