WordPress: 404-Fehlerseite gestalten

WordPress: 404-Fehlerseite gestalten

Ein 404-Fehler ist zwar harmlos, kann aber auf Websitebesucher abschreckend wirken. Mit einem individuellen Template sorgst Du dafür, dass sie nicht abspringen.

Ob gelöschte Datei oder fehlerhafte URL: Der 404-Error hat verschiedene Ursachen. Wie Du das Problem löst, haben wir hier beschrieben. In manchen Fällen lässt sich der Fehler jedoch nicht vermeiden – etwa bei einem fehlerhaften Link oder wenn die URL von einem Nutzer falsch eingegeben wurde. WordPress gibt dann standardmäßig folgende Meldung aus: „Die Seite konnte leider nicht gefunden werden.“

Diese Meldung ist leider nicht besonders ansprechend. Allerdings wirst Du derartige 404-Templates in den meisten Themes vorfinden. Bei einer professionellen Fehlerseite mit individuellem Text, Bild und Widgets bleiben Deine Besucher eher auf Deiner Website. Alles was Du dafür benötigst, ist ein Hosting-Paket, WordPress mit aktiviertem Child Theme und PHP-Kenntnisse.

Standard-404-Fehlerseite
Standard-404-Fehlerseite beim Theme Twenty Seventeen

Fehlermeldung anpassen

Als Erstes solltest Du den Wortlaut der Fehlermeldung an den Inhalt Deiner Website anpassen. Wichtig: Die entsprechenden Sprachdateien (.po- und .mo-Dateien für mehrsprachige Texte) werden bei WordPress nicht im Theme-Ordner, sondern in einem zentralen Language-Verzeichnis gespeichert. Würdest Du die Sprachdatei einfach ändern, gingen die Änderungen bei einem Update verloren. Um das Problem zu umgehen, legst Du eine neue Sprachdatei an.

Am einfachsten geht das mit dem Plugin Loco Translate. Navigiere nach der Installation im WordPress Backend über Loco Translate -> Themes zu Deinem Theme (laut Plugin-Vorgabe nicht Child Theme!). Klicke oben auf New Language, wähle als Sprache Deutsch und als Ort languages/loco/themes/twentysventeen-de_DE.po (bzw. die entsprechende .po-Datei Deines Parent Themes). Damit erstellt das Plugin eine zusätzliche Sprachdatei und legt diese in einem separaten Unterverzeichnis ab.

loco-translate
Wichtig: Die Übersetzung musst Du im Loco-Ordner speichern.

Um die 404-Meldung zu modifizieren, navigierst Du nun über Loco Translate -> Themes zu Deinem Theme und klickst unterhalb des Sprach-Icons auf Edit. Wähle die neue Sprachdatei im Custom-Folder:

loco translate
Anschließend gibst Du den Wortlaut der 404-Fehlermeldung Deines Themes oben in den Filter ein. Das Plugin zeigt daraufhin die entsprechende Textstelle an, die Du dann per Klick auswählen und in den Feldern unten bearbeiten kannst.

loco translate
Filterfunktion in Loco Translate

Fertig. Auf diese Weise kannst Du die beiden Standardtexte und alle anderen Sprachdateien von Themes und Plugins beliebig anpassen:

Fertig. Auf diese Weise kannst Du die beiden Standardtexte und alle anderen Sprachdateien von Themes und Plugins beliebig anpassen.

404 angepasst

404-Template erstellen

Um Bilder oder Widgets hinzuzufügen, benötigst Du ein 404-Template. Die Datei 404.php liegt im Hauptverzeichnis Deines Themes. Lege eine Kopie der Datei in das Hauptverzeichnis Deines Child Themes. Falls Dein Theme über keine 404.php verfügt, erstellst Du diese Datei selbst. Dazu kannst folgenden Code verwenden (ersetze „twentyseventeen“ mit dem Namen Deines Themes):

<?php
get_header(); ?>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<section class="error-404 not-found">
				<header class="page-header">
					<h1 class="page-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'twentyseventeen' ); ?></h1>
				</header><!-- .page-header -->
				<div class="page-content">
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyseventeen' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .page-content -->
			</section><!-- .error-404 -->
		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();

Bild einfügen

Ist das 404-Template erstellt, kannst Du Bilder und Widgets in die Fehlerseite integrieren. Mit einem Bild wirkt Deine 404-Seite gleich viel ansprechender. Lade dazu die 404.php im Hauptverzeichnis Deines Parent Themes herunter und füge einfach einen Image-Tag mit der URL Deines Bildes in der Mediathek ein. Zum Beispiel:

<img src="http://katzenfreunde-suedsachsen.de/wp-content/uploads/2018/09/animal-1238228_1920.jpg" alt="Maus" />
Mouse Content
Mouse Content

Widgets hinzufügen

Um Deine Besucher bei der Stange zu halten, kannst Du zusätzlich Widgets hinzufügen. Hier eignet sich am ehesten die Anzeige Deiner aktuellen Beiträge. So können die Besucher direkt zu den Inhalten springen.

Gib den nachfolgenden Code in die functions.php Deines Child Themes ein, um einen Widget-Bereich für die 404-Fehlerseite zu registrieren (in diesem Beispiel für ein Twenty Seventeen Child Theme):

function twentyseventeen_child_widgets_init() {
register_sidebar(array(
'name'          => '404-Fehlerseite',
'id'            => '404-fehlerseite',
'description'   => 'Widgets hier hinzufügen, um sie auf der 404-Fehlerseite anzuzeigen.',
'before_widget' => '<div class=”404-widget”>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'twentyseventeen_child_widgets_init' );

Kopiere anschließend die folgenden Zeilen in die 404.php des Child Themes, um WordPress mitzuteilen, wo der Widget-Bereich anzeigt werden soll:

<?php if ( is_active_sidebar( '404-fehlerseite' ) ) : ?>
<?php dynamic_sidebar( '404-fehlerseite' ); ?>
<?php endif; ?>

Nun erscheint im Backend unter Design -> Widgets der neue Bereich „404-Fehlerseite“. Ziehe dort wie gewohnt per Drag & Drop ein oder mehrere Widgets hinein. Mit den aktuellen Beiträgen sieht das anschließend so aus:
404 fertig

404-Fehlerseiten können lustig sein

Wie Deine Besucher auf eine nicht gefundene Seite reagieren, hängt von Deiner Kreativität ab. Weil der 404-Fehler nicht dramatisch ist, dürfen 404-Meldungen auch lustig sein. Solange der Error eine Ausnahme bleibt und Du Deinen Besuchern Optionen anbietest, bleiben Sie Dir höchstwahrscheinlich erhalten.

Über die gezeigten Schritte hinaus kannst Du Dein Template natürlich weiter anpassen – vom Entfernen der Listenpunkte bis hin zum Fullwidth-Layout. Vielleicht sehen Deine Besucher den Error dann ebenfalls mit Humor. Und wenn nicht, leitest Du sie einfach per Plugin auf die Startseite weiter. 😉

Schlagworte: , ,

Teilen

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen