Suchen ist das halbe Internetleben. Doch führt nicht jede Suche zum passenden Ergebnis. Allzu oft führt sie sogar zu gar keinem Ergebnis. Ein gutes WordPress Theme stellt hierfür die passende Antwort bereit. Wann immer ein Nutzer eine URL eingibt, die Sie gar nicht (mehr) bereitstellen, gibt Ihr Theme eine 404-Fehlermeldung aus. Dafür benutzt es die Datei 404.php, die Ihr Theme-Autor für Sie erstellt hat. Oftmals ist diese Fehlerseite eher schlicht gestaltet. Das muss aber nicht so bleiben: Sie können Ihre WordPress Fehlerseite bearbeiten. So können Sie dafür sorgen, dass auf Ihrer Website selbst Fehler zu einem erfreulichen Ereignis werden.
Fehlerseiten vermeiden
Schlimmstenfalls entsteht eine 404-Fehlerseite dadurch, dass Sie einen Beitrag oder eine Seite löschen, die bereits an anderer Stelle verlinkt ist. Wer diesem Link dann folgt, landet im Internet-Nirwana. Sprich: auf Ihrer 404-Seite. Das trägt aber nicht zum Erfolg Ihres Suchmaschinenergebnisses bei. Verlinkende Seiten erfahren nicht automatisch von der Nicht-mehr-Existenz einer Ihrer Inhalte. Es sei denn, sie benutzen Plugins wie den Broken Link Checker. Davon können Sie aber nicht ausgehen. Selbst Google verlinkt manchmal noch lange auf einen Inhalt, den Sie einfach gelöscht haben.
Aber auch wenn Sie dafür sorgen, dass alle Inhalte immer verfügbar sind, kann es dazu kommen, dass jemand bei Ihnen einen Inhalt vermutet, der gar nicht vorhanden ist. Oder der Nutzer vertippt sich bei der Eingabe der Adresse. Genau für solche Fälle brauchen Sie die 404.php.
Tatsächlich gibt es eine ganze Reihe sogenannter HTTP/Statuscodes, unter ihnen auch gute wie den Code 200, der eine erfolgreiche Anfrage bescheinigt. Oder den Code 301, der darauf hinweist, dass ein Inhalt dauerhaft verschoben wurde. Andere wie der 500 Internal Server Error haben gar nichts mit Ihrer konkreten Website, sondern mit dem Server zu tun, auf dem Ihre Daten liegen. Eine Übersicht aller Antwortcodes bietet zum Beispiel Selfhtml.
Die WordPress Fehlerseite bearbeiten
Es soll durchaus Theme-Autoren geben, die nicht nur für das Funktionieren der 404.php, sondern auch für deren Attraktivität sorgen. Letzteres kann man der 404.php des aktuellen Standardthemes Twentysixteen nicht bescheinigen. Schlichter geht nimmer! Dies zu ändern ist aber wahrlich nicht schwer.
Sie sollten nur daran denken, dass jede Änderung, die Sie an einer PHP-Datei Ihres Themes vornehmen, in dem Moment verschwindet, da Sie das Theme aktualisieren. Deshalb – wir haben hier schon oft darauf hingewiesen – braucht es ein Child Theme.
Schauen wir uns die Datei 404.php einmal im Original an: Sie besteht aus zwei Bereichen, dem Header- und dem Content-Bereich. Im Header-Bereich befindet sich die Überschrift, die einen englischen Text beinhaltet, der im Rahmen einer deutschen WordPress-Installation über eine Übersetzungsfunktion auf Deutsch ausgegeben wird. Statt »Oops! That page can’t be found.« heißt es dann: »Diese Seite konnte leider nicht gefunden werden.«
Der Content-Bereich bietet nach einem erläuternden Satz (»Wie es aussieht, wurde an dieser Stelle nichts gefunden. Möchtest du eine Suche starten?«) schließlich die Suchfunktion an.
Original Twenty Sixteen
<section class="error-404 not-found">
<header class="page-header">
<h1 class="page-title"><?php _e( 'Oops! That page can’t be found.', 'twentysixteen' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentysixteen' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .page-content -->
</section><!-- .error-404 -->WordPress Fehlerseite bearbeiten
Ihrer 404.php im Rahmen Ihres Child Themes können Sie nun zum Beispiel ein Bild gönnen. Dazu braucht es nur die entsprechende HTML-Markierung, sprich: ein img-tag, das auf die Quelle Ihres Bildes verweist. Das Bild laden Sie einfach in Ihre Mediathek hoch. Dort erfahren Sie dessen Adresse, die Sie als src im tag angeben.
Auch können Sie natürlich die Texte verändern. Ob nun Überschrift oder auch erläuternder Hinweis: Statt des englischen Textes können Sie dort hineinschreiben, was Sie wollen. Ich habe mich im Beispiel für die Überschrift »Diesen Link gibt es hier gar nicht!« und den Hinweis »Vielleicht mal eine Suche probieren?« entschieden.
Im ganzen Satz sieht der Code so aus:
Twenty Sixteen bearbeitet
<section class="error-404 not-found">
<header class="page-header">
<img src="http://Ihre-Domain.de/wp-content/uploads/2016/08/404.jpg">
<h1 class="page-title"><?php _e('Diesen Link gibt es hier gar nicht!' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<p><?php _e( 'Vielleicht mal eine Suche probieren?' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .page-content -->
</section><!-- .error-404 -->Kein Suchergebnis (content-none.php)
Nicht wirklich als Fehler zu bezeichnen ist das Suchergebnis, das keinen passenden Treffer liefert. Sofern Sie die Suchfunktion auf Ihrer Website ausgeben, sagen wir im Rahmen Ihrer Sidebar, kann es vorkommen, dass dort jemand nach einem Begriff sucht, der nirgendwo auf Ihrer Website erscheint. Twenty Sixteen realisiert den dann folgenden Hinweis über die Datei content-none.php. Auch hier ist die Ausgabe sehr schlicht.
Die Logik der content-none.php hingegen ist etwas komplexer als die der 404.php. Im Content-Bereich gibt es eine if-Anweisung, die unterschiedliche Anwendungssituationen abarbeitet. Als Erstes (nach dem if ( is_home()…) geht es um die Situation, dass es noch gar keine Beiträge gibt. Dies kann nur zu Beginn Ihrer Bloggerkarriere der Fall sein. An zweiter Stelle, eingeleitet durch elseif (is_search() ), folgt die Situation, dass jemand nach einem Begriff gesucht hat, den es auf Ihrer Website nicht gibt. An letzter Stelle, nach dem else, folgt die Ausgabe für die etwas speziellere Situation, da jemand zum Beispiel die URL zu einer Kategorie eingibt, die zwar bei Ihnen existiert, der aber gar kein Beitrag (mehr) zugeordnet ist.
Original Twenty Sixteen
<section class="no-results not-found">
<header class="page-header">
<h1 class="page-title"><?php _e( 'Nothing Found', 'twentysixteen' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
<p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'twentysixteen' ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>
<?php elseif ( is_search() ) : ?>
<p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'twentysixteen' ); ?></p>
<?php get_search_form(); ?>
<?php else : ?>
<p><?php _e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', 'twentysixteen' ); ?></p>
<?php get_search_form(); ?>
<?php endif; ?>
</div><!-- .page-content -->
</section><!-- .no-results -->Auch den nicht vorhandenen Suchergebnissen können Sie ein Bild zuordnen. Dabei reicht es, das Bild einmal im Rahmen des Headers einzubinden – es erscheint dann unabhängig von der if-Anweisung oberhalb der Überschrift. Die Texte können sie genauso wie in der 404.php Ihren Wünschen gemäß anpassen.
Twenty Sixteen bearbeitet
<section class="no-results not-found">
<header class="page-header">
<img src="http://Ihre-Domain.de/wp-content/uploads/2016/08/no-result.jpg">
<h1 class="page-title"><?php _e( 'Oh nein, kein Suchergebnis!' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
<p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'twentysixteen' ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>
<?php elseif ( is_search() ) : ?>
<p><?php _e( 'Leider gibt es für diese Suche keine passenden Treffer. Vielleicht führt ein anderer Suchbegriff zum Ziel?' ); ?></p>
<?php get_search_form(); ?>
<?php else : ?>
<p><?php _e('Leider kein Treffer. Vielleicht hilft eine Suche? ' ); ?></p>
<?php get_search_form(); ?>
<?php endif; ?>
</div><!-- .page-content -->
</section><!-- .no-results -->Zugehöriges CSS
Damit Ihre Änderungen so aussehen, wie Sie es sich wünschen, braucht es noch einige CSS-Anpassungen. In meinem Fall habe ich dafür gesorgt, dass die Überschriften größer und in roter Schrift erscheinen. Den eingebetteten Bildern habe ich ein wenig Abstand nach unten gegönnt. Und schließlich wollte ich noch, dass auch die not-found-Variante (wie für no-result und error-404 realisiert) keine schwarze Rahmenlinie oberhalb des Header-Bereiches anzeigt.
.no-results h1, .error-404 h1 {font-size: 3em; color: red;}
.not-found img {margin-bottom: 1.5em;}
.not-found .page-header {border-top: 0; padding-top:0;}In guter Gesellschaft
Wenn Sie Ihre WordPress Fehlerseite bearbeiten, befinden Sie sich übrigens in guter Gesellschaft. Wie kreativ und witzig 404-Fehlerseiten aussehen können, zeigt das Suchergebnis der entsprechenden Google Bildersuche.
Beitragsbilder: Britta Kretschmer
Schreibe einen Kommentar