Elegante 404-Seite für Divi

Elegante 404-Seite für Divi

Immer tiefer in den Kaninchenbau, beziehungsweise in meinen Fall immer tiefer hinein in die Inserieren des WordPress Themes „Divi“. Mir macht es Spaß, die Grenzen auszuloten und herumzuknobeln, um eine Lösung zu finden.

Für einige der typischen Divi-Probleme gibt es im Netz bereits Lösungen. Kleine Code-Schnipsel oder ausführliche Anleitungen, wie sich ein bestimmtes Verhalten von Divi verändern lässt. Auf der Suche nach Tipps bin ich gestern über das Problem mit der 404-Seite im Divi-Theme gestolpert. Die sieht nämlich ziemlich ernüchternd aus.

Default 404-Seite in Divi
Default 404-Seite in Divi
Das ist, ehrlich gesagt, ärgerlich. Man gibt sich Mühe, eine schöne Seite zu bauen und dann so was. Zum Glück findet man recht schnell, wie sich das Ganze lösen lässt. Unter anderem bei Divi Space gibt es eine Anleitung, um ein Template für eine eigene 404-Seite zu bauen. Die Schritte habe ich gestern für quer.durch.koeln soweit nachvollzogen, zudem noch etwas CSS ergänzt, um den Footer auf der 404-Seite unten zu behalten — 404-Seiten haben nämlich in der Regel zu wenig Inhalt, so dass die Footer-Leiste nach oben rutscht.

Heute Nacht, zwischen wach liegen und schlafen grübelte ich dann über die Methode nach. Wenn man das für die 404-Seite so lösen kann, müsste es doch auch möglich sein, auf diese Weise die Kategorien-Seiten von WordPress innerhalb von Divi besser zu gestalten. Als ähnlich wie beim anderen Elegant Theme „Extra“. Das geht tatsächlich. Bevor ich dazu komme, möchte ich erstmal eine überarbeitete Version der 404-Seite vorstellen.

Die Lösung von Divi Space ist gut, aber es geht noch besser, mit weniger CSS. Innerhalb des Divi Child-Themes wird dazu zunächst eine neue PHP-Datei angelegt mit der Bezeichnung „404.php“. Laut dem Modell der Template Hierarchie in WordPress wird diese Datei aufgerufen, wenn es ansonsten serverseitig bei einer WordPress Installation zu einer 404 Meldung kommen würde.

Zunächst legt man in WordPress eine neue Seite an, bei der man ganz normal auch den Divi-Builder verwendet (und verwenden sollte, da der nachfolgende Code genau davon ausgeht). Nach dem Abspeichern merkt man sich die ID der Seite.

Folgende Zeilen werden dann in die PHP-Datei eingetragen:

<?php get_header(); ?>
<div id="main-content">
<div class="entry">
<!--If no results are found-->
<?php $id = SEITEN-ID; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
</div>
</div> <<!-- #main-content -->
<?php get_footer(); ?>

Dabei wird SEITEN-ID durch die ID der angelegten Seite ersetzt. Jetzt fehlt nur noch eine Ergänzung in der style.css des Child-Themes, um das Problem mit dem nach oben rutschenden Footer in den Griff zu bekommen:

.error404 #main-footer {
position: fixed;
width: 100%;
bottom: 0;
}
.error404 #main-content {
margin-bottom: 45px;
}

Der eigenen, individuellen 404-Seite steht jetzt nichts mehr im Weg. Jetzt aber zu dem, was mir heute in der Nacht eingefallen ist. Wenn das auf diese Weise für die 404-Seite funktioniert, müsste es theoretisch auch für Kategorie-Seiten klappen. Schaut man in die Referenz der Template Hierarchie, steht dort etwas von einer Datei namens „category.php“. Ein solche legt man genau wie für die 404-Seite in den Ordner des Child-Themes an. Dort kopiert man den gleichen Code wie für die 404-Seite rein, ändert aber hier die Seiten-ID auf eine Seite, die in WordPress später die Kategorien anzeigen soll. Mit dem Pagebuilder und dem Modul „Blog“ lässt sich dann diese Seite mit Inhalt füllen. Wer das noch weiter verfeinern will, legt für jede Kategorie eine eigene Seite an und verwendet dann für die Datei-Bezeichnungen zusätzlichen den Slug der Kategorie, also zum Beispiel „category-allgemeines.php“.

Einen kleinen Schönheitsfehler hat der Lösungsweg noch (gilt auch für die 404-Seite). Da mit einer echten Seite in WordPress gearbeitet wird, lässt sich deren Inhalt sowohl über die Kategorie-URL als auch über die URL der Seite selber aufrufen. Nehmen wir an, wir haben die Seiten „Kategorie Allgemeines“ genannt. Dann ist die URL „http://meine-domain.de/kategorie-allgemeines“ genau so gültig wie „http://meine-domain.de/kategorie/allgemeines/“. Was Otto-Normal-Nutzer nicht stört, hört sich für SEO-Menschen dagegen suboptimal an.

Eintrag in Redirection
Eintrag in Redirection
Lösen lässt sich das entweder durch einen individuellen Eingriff in die .htaccess Datei der WordPress Installation oder eleganter (und für Laien sicherer) durch ein entsprechendes Plugin wie „Redirection“ (eine gute Übersicht findet sich drüben bei Elegant Themes).

Fazit: Mit ein paar kleineren Anpassungen lässt sich die Ausgabe beim Divi-Theme noch flexibler gestalten.

One Reply to “Elegante 404-Seite für Divi”

  1. Hallo,
    Danke für diesen tollen Beitrag.
    Habe dies mit meiner Category Seite gemacht, und mit redirection umgeleitet.

    Was mir noch etwas Kopfzerbrechen bereitet,
    wie setze ich eine Filter für die Kategorien?

    stehe gerade irgendwie neben mir.

    Kannst du weiterhelfen, oder hast eine Idee?
    Würde später wenn es geht gerne auf meiner Blog Seite die Kategorien anzeigen, und dann erst zu den (Unterkategorien) Blogs gehen.
    Freue mich auch über antworten die keine Hilfe sind

    Grüße
    Nico

Kommentar verfassen

über Thomas Boley

Geboren wurde ich im Jahre des Herren 1971 in Wesel am Niederrhein – die Kommentare an dieser Stelle bezüglich des Bürgermeisters bitte verkneifen! Mein Verhältnis zu dieser Stadt würde wohl den Umfang dieser Seite sprengen. Nur soviel sei gesagt: Es ist durchaus durchwachsen, worin es sich aber nicht von meinem Verhältnis zu Bielefeld unterscheidet. Nach dem üblichen Werdegang (Kindergarten, Schule, Abitur, Zivildienst) und den üblichen jugendlichen Irrungen und Wirrungen verschlug es mich zum Studium nach Bielefeld verschlagen. 18 Jahre später ging es dann zurück an den Rhein, in die Domstadt Köln. mehr erfahren