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!

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!
Bilder in Artikel einfügen

Bilder in Artikel einfügen

Bilder machen einen Blog lebendig. In diesem Tutorial wird gezeigt, wie man Fotos (das gleiche Prinzip gilt auch für andere Medien – wie Videos) in Artikel oder Seiten einfügt.

WordPress – Datei zum Download anbieten

WordPress – Datei zum Download anbieten

Egal ob PDF, ZIP oder Bilder – immer wieder kommt man in die Verlegenheit, eine Datei zum Download anbieten zum müssen. Aber wie binde ich eine Datei zum Download in meine Wordpressartikel ein? In diesem Video-Tutorial wird erklärt, wie ich möglichst einfach eine Datei zum Download anbieten kann.

E-Mail verlinken

E-Mail verlinken

Wie kann man in Wordpress einfach eine E-Mail-Adresse als Link einfügen. das Prinzip ist ganz gleich dem Einfügen eines Links. Anbei ein kleines Video Tutorial. Hinweis: Obwohl das Menü ab WordPress 3.1 ein wenig anders aussieht, ist dieses Tutorial dennoch zu sinnvoll. Die Art und Weise, wie man eine E-Mail-Adresse verlinkt ist gleich geblieben.

WordPress Artikel planen

WordPress Artikel planen

Manchmal möchte mal ein klein wenig “vorarbeiten” oder bestimmte Inhalte erst zu einem späteren Zeitpunkt veröffentlichen. Eine tolle Funktion ist hier die “Plan-Funktion” von Wordpress. Also wie plant man Artikel? Ganz einfach: Die Artikel werden einfach nicht sofort veröffentlicht, sondern so gespeichert, dass diese zu einem bestimmten Zeitpunkt in der Zukunft automatisch von WordPress veröffentlicht werden.

|

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

Mehr verkaufen

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
 Workshop SEO & Marketing

Download

Pin It on Pinterest

Share This