Entwerfen einer einzigartigen 404-Fehlerseite für Ihre WordPress-Webseite

Sie besuchen einen Link und sehen statt einer funktionierenden Seite nur einen 404 "Seite nicht gefunden"-Fehler. 

Als Besitzer einer Webseite gibt es nur wenige Dinge, die frustrierender sind, als über einen 404-Fehler zu stolpern. Für die Besucher Ihrer Webseite kann das genauso frustrierend sein, vor allem, wenn sie zum ersten Mal auf Ihrer Webseite sind.  

Eine schlau gestaltete 404-Fehlerseite kann jedoch selbst diese frustrierenden Szenarien in ein positives Erlebnis verwandeln, indem sie Ihren Benutzern zeigt, was sie als Nächstes tun können. Sie ist ein wesentlicher Bestandteil des Webseitendesigns und der Benutzererfahrung und bietet einen Silberstreifen am Horizont in einer Situation, die frustrierend hätte sein können.  

Und das Beste daran? Sie können dies ohne Weiterleitungs-Plugins oder Programmierkenntnisse erreichen. In diesem Artikel lernen Sie die Grundlagen von 404-Fehlern kennen und erfahren, wie Sie eine benutzerdefinierte 404-Seite in WordPress erstellen.

Was ist ein HTTP-Fehler "404 nicht gefunden"?

Wenn der Server die von einem Browser angeforderte Ressource nicht finden kann, gibt er eine HTTP 404 Not Found Antwort zurück. Solche Links werden als tote, defekte oder verwaiste Links bezeichnet.  

Beispiel für eine 404-Fehlerseite(Quelle)

Sie können verschiedene Methoden verwenden, um "404 Not Found"-Fehler zu verfolgen und zu protokollieren. Sie können zum Beispiel Google Analytics oder WordPress Plugins zur Fehlerüberwachung verwenden.   

Wie bei den meisten Fehlern können Sie diese vermeiden, indem Sie alle Ihre Links doppelt überprüfen. Sie können die meisten Fehler auch beheben, aber wenn Ihre Webseite wächst und sich weiterentwickelt, werden Sie feststellen, dass es fast unmöglich ist, alle Fehler zu vermeiden. Das bringt uns zum nächsten Abschnitt!

Warum eine benutzerdefinierte 404-Fehlerseite erstellen?

Laut Google lohnt es sich nicht, die meisten 404-Fehler zu beheben, da sie die Indizierung oder das Ranking Ihrer Webseite nicht beeinträchtigen. Das mag erklären, warum die 404-Seite von Google eine einfache 404. Das ist ein Fehler . Seite ist. 

Die 404-Fehlerseite von Google(Quelle)

Aber SEO ist nur ein Teil der Gleichung. 404-Fehler können auch die Benutzerfreundlichkeit Ihrer Webseite beeinträchtigen, und das sollten Sie ernst nehmen.  

Normalerweise verlassen die meisten Benutzer die Seite, nachdem sie auf eine Fehlerseite gestoßen sind. Wenn Sie jedoch eine benutzerdefinierte 404-Fehlerseite einrichten, die Ihre Benutzer auf relevantere Webseitenbereiche verweist, können Sie diese dennoch behalten. Dies kann dazu beitragen, die Absprungrate Ihrer Webseite zu senken und die Nutzerbindung zu erhöhen.  

Und wenn Sie diese Seite ein wenig humorvoller und unterhaltsamer gestalten können - in Maßen, ohne Ihre Benutzer zu verwirren - dann gibt es nichts Besseres!

Beispiele für großartige benutzerdefinierte 404-Fehlerseiten

Im Folgenden finden Sie einige Beispiele für hervorragende benutzerdefinierte 404-Fehlerseiten. In späteren Abschnitten werden wir Ihnen zeigen, wie Sie ähnliche benutzerdefinierte Fehlerseiten für Ihre WordPress-Webseite erstellen können.  

Mozillas benutzerdefinierte 404-Fehlerseite(Quelle)

Die 404-Fehlerseite von Mozilla ist einfach und auf den Punkt gebracht. Sie enthält eine hilfreiche Aufforderung, zum Browser zurückzukehren, und Links zu anderen wichtigen Bereichen der Webseite.  

Pixar's benutzerdefinierte 404-Fehlerseite(Quelle)

Die 404-Fehlerseite von Pixar ist eine humorvolle Interpretation einer ihrer berühmten Figuren. Marken mit ständig aktualisierten Inhalten können relevant bleiben, indem sie ihre 404-Seiten regelmäßig aktualisieren.  

Die benutzerdefinierte 404-Fehlerseite von Amazon.com(Quelle)

Amazon mag zwar fast alles unter der Sonne verkaufen, aber bei einem so umfangreichen Katalog sterben einige seiner Produktlinks irgendwann aus. Das mag für die Kunden frustrierend sein, aber Amazon setzt süße Hunde ein, um sie aufzuheitern. Sie fügen auch Links hinzu, um die Benutzer auf ihrer Webseite zu halten und sie zu weiteren Einkäufen zu ermutigen. Das ist ein wesentlicher Bestandteil der Verbesserung des Checkout-Workflows.   

Spotifys benutzerdefinierte 404-Fehlerseite(Quelle)

Die 404-Fehlerseite von Spotify bleibt markengerecht, indem sie auf ein beliebtes Album von Kanye West verweist. Die Seite enthält auch hilfreiche Links, durch die der Benutzer navigieren kann.  

Die benutzerdefinierte 404-Fehlerseite von StarWars.com(Quelle)

Die 404-Fehlerseite der Star Wars-Webseite verwendet den ikonischen Todesstern, um auf den Punkt zu kommen. Sie enthält auch einen Link Versuchen Sie etwas anderes? und eine Suchleiste am unteren Rand.  

Können Sie hier ein gemeinsames Thema erkennen? Alle diese benutzerdefinierten 404-Fehlerseiten sind einfach, witzig, markengerecht und funktional. Der folgende Abschnitt geht auf diese Punkte ein, damit Sie Ihre 404-Fehlerseiten besser gestalten können.  

Tipp: Sie möchten weitere Ideen für 404-Fehlerseiten? Rufen Sie Ihre Lieblingswebseite auf - oder sogar die eines Konkurrenten - und tippen Sie eine beliebige Seiten-URL falsch ein.  

Tipps zum Erstellen einer guten benutzerdefinierten 404-Fehlerseite

Das Hauptziel einer benutzerdefinierten 404-Seite ist es, sie unterhaltsam und ansprechend zu gestalten. Hier sind ein paar Tipps, wie Sie das erreichen können:

1. Geben Sie eine klare Fehlermeldung aus, die darauf hinweist, dass es sich um einen 404 "Seite nicht gefunden"-Fehler handelt, damit der Benutzer nicht verwirrt ist, warum er auf der falschen Seite ist. Stellen Sie den Fehler in den Mittelpunkt Ihrer Seite.  
2. Fügen Sie Links zu wichtigen Bereichen Ihrer Webseite hinzu, z. B. zur Homepage, Sitemap, Kontaktseite, Hilfeseite und zu sozialen Links. Sie können einen Abschnitt für die neuesten und beliebtesten Seiten einfügen, wenn Sie Nachrichten- oder Blog-Seiten sind, oder für Ihre beliebtesten Produkte oder Kategorien, wenn Sie ein E-Commerce-Shop sind. Vermeiden Sie jedoch unnötige Ablenkungen, wenn sie nicht zu den Zielen Ihrer Webseite beitragen.  
3. Versuchen Sie, eine Suchleiste einzubauen, damit die Benutzer sofort nach dem suchen kann, was er sucht. 
4. Halten Sie das Design und den Ton der Fehlerseite im Einklang mit dem Rest Ihrer Webesite. Verwenden Sie einen freundlichen Ton und fügen Sie ansprechende visuelle Elemente wie benutzerdefinierte Grafiken und Illustrationen hinzu, um die Erfahrung des Benutzers weniger frustrierend zu machen.  
5. Bieten Sie eine Option an, mit der Benutzer den defekten Link melden können. Sie können zwar 404-Fehler protokollieren und anzeigen, aber die Meldefunktion ist es wert.  
6. Leiten Sie eine 404-Seite nicht automatisch auf Ihre Homepage oder eine andere Seite Ihrer Webseite weiter. Dies führt zu einer schlechten Benutzererfahrung, da die Benutzer nicht wissen, warum sie weitergeleitet wurden. Leiten Sie die Benutzer stattdessen von der benutzerdefinierten 404-Fehlerseite dorthin, wo sie hingehen sollen.  

Wie Sie eine benutzerdefinierte 404-Seite in WordPress erstellen

Nachdem Sie nun erfahren haben, was 404-Fehlerseiten sind und warum Sie diese brauchen, lassen Sie uns nun erkunden, wie Sie eine benutzerdefinierte 404-Fehlerseite in WordPress erstellen können. Es gibt viele Möglichkeiten, dies zu tun.  

1. Bearbeiten Sie die 404-Vorlage des WordPress-Themes

WordPress verwendet Vorlagen, mit denen Entwickler das Layout und die Struktur von Beiträgen und Seiten, einschließlich 404-Fehlerseiten, erstellen können. Daher wird fast jedes WordPress-Theme, einschließlich der Standardthemen, mit einer eigenen Vorlagenseite geliefert. WordPress zeigt Benutzern diese Vorlage automatisch an, wenn ein 404 Page Not Found-Fehler auftritt.  

Normalerweise finden Sie diese Vorlage unter dem Dateinamen 404.php oder 404.html. Lesen Sie in der Dokumentation des Themas nach, wo Sie diese Datei finden können.   

Klassische WordPress-Themes wie Twenty Twenty enthalten beispielsweise eine Vorlage 404.php für die Anzeige einer 404-Fehlerseite.

Sie finden diese Datei, indem Sie auf Dashboard ➡️ Appearance ➡️ Theme File Editor gehen und in der Seitenleiste unter Theme Files auf die Datei 404 Template (404.php) klicken.

Navigieren Sie zu der standardmäßige WordPress 404-Vorlage.

Schauen wir uns den obigen Code im Detail an, um seine verschiedenen Teile zu verstehen.

<?php
/**
 * The template for displaying the 404 template in the Twenty Twenty theme.
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

get_header();
?>

<main id="site-content">

	<div class="section-inner thin error404-content">

		<h1 class="entry-title"><?php _e( 'Page Not Found', 'twentytwenty' ); ?></h1>

		<div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.', 'twentytwenty' ); ?></p></div>

		<?php
		get_search_form(
			array(
				'aria_label' => __( '404 not found', 'twentytwenty' ),
			)
		);
		?>

	</div><!-- .section-inner -->

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php
get_footer();

Hier finden Sie eine kurze Erklärung des Codes der 404-Vorlagendatei:

• Der oberste Kommentarblock zwischen den <?php und ?> Tags ist für Dokumentationszwecke gedacht. Er ist optional und erklärt, wofür die Datei gedacht ist.  
• Die get_header() Funktion lädt die header.php Datei, die normalerweise Elemente wie das Logo der Webseite, das Navigationsmenü und andere Elemente enthält. 
• Der Inhalt der Seite wird zwischen den <main> Tags, die auch viele <div> Tags mit den entsprechenden Klassen enthalten, um die Struktur und den Stil der Seite zu definieren.
• Der h1-Tag legt die Seitenüberschrift fest, und der intro-text Klasse legt die Nachricht fest.
• Die Funktion get_search_form() fügt ein Suchformular in die Seite ein, mit dem die Benutzer schnell nach dem Gewünschten auf der Webseite suchen können.  
• Und schließlich, die get_template_part() und get_footer() die Fußzeilenelemente, die in der Regel die Fußzeilenmenüs, den Abspann der Webseite, die Copyright-Informationen usw. enthalten. 

Die standardmäßige 404-Vorlage enthält eine Kopfzeile "Seite nicht gefunden", einen Einleitungstext und ein Suchformular. So sieht sie standardmäßig aus:

Die Standardvorlage für die 404-Seite für das Twenty Twenty-Theme

Sie können diese Vorlage personalisieren, indem Sie den PHP-Code ändern, um eigene Texte, Bilder und andere Elemente hinzuzufügen. 

Ändern Sie nun die Kopfzeile und den Einleitungstext dieser Vorlagendatei und fügen Sie ein Bild und eine Schaltfläche für die Startseite hinzu. Hier ist der aktualisierte Code:

......
<main id="site-content">

	<div class="section-inner thin error404-content">

		<h1 class="entry-title"><?php _e( 'Well, this is awkward...', 'twentytwenty' ); ?></h1>
		
		<div class="404-image">
            <img src="http://multidots-demo.test/wp-content/uploads/Catnapping.png?quality=90" alt="<?php esc_html_e( 'Catnapping', 'twentytwenty' ); ?>">
        </div>

		<div class="intro-text"><p><?php _e( "You've reached a 404 error page. Where's the page you're looking for? Maybe it's hiding? Or taking a nap? Either way, let's get you back on track!", 'twentytwenty' ); ?></p></div>
		
		 <div class="404-links">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="button">
                <?php esc_html_e( "Let's Go Home", 'twentytwenty' ); ?>
            </a>
        </div>
</main>
......

Beachten Sie die neuen <div> Tags mit den Klassen 404-image und 404-links, die der Homepage ein Bild bzw. eine Schaltfläche hinzufügen.  

Nachdem Sie die oben genannten Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche Datei aktualisieren, um Ihre geänderte 404-Vorlage zu speichern. Sie können die Änderungen testen, indem Sie absichtlich eine der URLs Ihrer Webseite falsch eingeben. Die neue 404-Fehlerseite wird wie unten gezeigt aussehen.

Die geänderte 404-Fehlerseite

Mit grundlegenden HTML-, PHP- und CSS-Kenntnissen können Sie diese Seite weiter anpassen, damit sie kreativer wird, mehr Funktionen bietet und die Identität Ihrer Marke besser widerspiegelt. 

2. WordPress-Vorlageneditor mit einem Block-Theme verwenden

WordPress unterstützt seit Version 5.9 das Full-Site-Editing, mit dem Sie über den benutzerfreundlichen Site-Editor umfassende Designänderungen an Ihrer gesamten Webseite vornehmen können. Das Standard-Theme, Twenty Twenty-Two, war das erste Standard-Block-Theme von WordPress.  

Block-Themes - wie der Name schon sagt - verwenden Blöcke, um alle Teile Ihrer WordPress-Webseite aufzubauen, einschließlich Kopfzeile, Fußzeile, Navigationsmenü und Webseiteninhalte. 

Block-Themes unterstützen auch den Vorlagen-Editor zum Erstellen und Bearbeiten von WordPress-Vorlagen, wie z. B. der Vorlage für die 404-Fehlerseite. Sie können diese Vorlage genau wie jede andere Seite auf Ihrer Webseite mit Blöcken bearbeiten.  

Um den Vorlageneditor zu verwenden, müssen Sie zunächst ein Block-Theme installieren. Wir werden das aktuelle Standard-WordPress-Theme Twenty Twenty-Four verwenden, das ebenfalls ein Block-Theme ist.  

Twenty Twenty-Four, das Standard-Block-Theme von WordPress 6.6

 So sieht die standardmäßige 404-Fehlerseite von Twenty Twenty-Four aus:

Die standardmäßige 404-Fehlerseite von Twenty Twenty-Four

Als Nächstes gehen Sie zu Erscheinungsbild ➡️ Editor, um auf den Vorlageneditor zuzugreifen. Alternativ können Sie auch auf die Schaltfläche Anpassen unter dem Bedienfeld Themen klicken, um an denselben Ort zu gelangen.

WordPress Site Editor für Blockthemen

Klicken Sie nun im linken Design-Menü auf Templates, um alle verfügbaren Vorlagen des Themas zu sehen. 

Suchen Sie die Vorlage "Seite: 404"

Hier können Sie auch eine neue benutzerdefinierte Vorlage erstellen und sie auf eine beliebige Seite oder einen beliebigen Beitrag auf Ihrer WordPress-Webseite anwenden. Wir sind jedoch nur an der Bearbeitung der Vorlage Page: 404 interessiert.  

Klicken Sie auf den Link Seite:404, um die Vorlage in den Vorlageneditor zu laden.    

Die Vorlage "Seite: 404" im Vorlagen-Editor

Klicken Sie dann auf einen beliebigen Abschnitt der Vorlagenseite auf der rechten Seite, den Sie bearbeiten möchten um diesen Block zu bearbeiten.

Hier können Sie die Vorlagenblöcke bearbeiten, neue Blöcke hinzufügen oder bestehende Blöcke entfernen. Das funktioniert ähnlich wie bei der Bearbeitung von Seiten und Beiträgen. Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf Save um die Änderungen zu bestätigen. 

Bearbeiten der 404-Vorlagenseite

Wir haben die vorhandene Kopie bearbeitet, neue Bilder und Schaltflächenblöcke hinzugefügt und die Hintergrundfarbe geändert. Unten sehen Sie die neue benutzerdefinierte 404-Fehlerseite:

Die neue benutzerdefinierte 404-Fehlerseite

WordPress.tv bietet ein Video-Tutorial zur Verwendung des Vorlageneditors, um Ihre 404-Vorlage zu personalisieren.  

Seit seiner Veröffentlichung im Jahr 2022 ist die Zahl der Block-Themes, die Full-Site Editing unterstützen, stetig gewachsen. Weitere Block-Themes finden Sie im offiziellen Themes-Verzeichnis von WordPress unter der Registerkarte Block-Themes.    

Themen im WordPress-Themenverzeichnis blockieren

Zum Zeitpunkt der Erstellung dieses Artikels gibt es 942 Blockthemen im Verzeichnis Themes.

3. Erstellen Sie die 404-Vorlage mit WordPress Page Builders

Die meisten WordPress-Seitenersteller wie Elementor, Beaver Builder und Divi bieten in ihrer Benutzeroberfläche eine Option zur Erstellung von 404-Vorlagen mit ihren Buildern. 

Sie können zum Beispiel mit dem Theme Builder von Elementor eine benutzerdefinierte 404-Fehlerseite erstellen. Allerdings ist diese Funktion nur für Premium-Abonnenten von Elementor verfügbar.

Das Theme Builder-Bedienfeld von Elementor

Wenn Sie Elementor Pro haben, gehen Sie zu Templates ➡️ Theme Builder und klicken Sie auf die 404-Seite, um alle 404-Vorlagen-Designs aufzurufen. 

Elementor Pro's Fehler 404 Vorlagenbibliothek

Wählen Sie eines der Vorlagendesigns hier aus, klicken Sie auf das Insert und es wird auf die 404-Seitenvorlage Ihrer Webseite gezogen. Sie können dann wie mit dem Elementor Page Builder alle Änderungen vornehmen und speichern.    

Eine der 404-Seitenvorlagen von Elementor Pro

Um unsere 404-Seite anzupassen, haben wir das obige Vorlagendesign verwendet, den Text geändert und unserer Änderungen gespeichert.

Ebenso benötigt Beaver Builder sein Premium-Add-on Beaver Themer, um seine 404-Vorlagen anzupassen. 

Editor für 404-Seiten-Vorlagen von Beaver Builder(Quelle)

In der Dokumentation Ihres Page Builders finden Sie weitere Informationen darüber, wie Sie benutzerdefinierte 404-Seiten erstellen und einstellen können.

4. Installieren Sie WordPress 404-Fehlerseiten-Plugins

WordPress-Plugins sind eine weitere einfache Möglichkeit, 404-Seiten auf jeder WordPress-Webseite zu erstellen und einzustellen. Hier sind einige Plugins, mit denen Sie diese Aufgabe erledigen können.  

Intelligente benutzerdefinierte 404-Fehlerseite (404page)

Mit dem 404page WordPress-Plugin können Sie eine beliebige Seite als Ihre 404-Fehlerseite festlegen. Dieses Plugin ist ein einfacher Workaround, wenn Ihr Theme oder Page Builder Sie nicht in die Lage versetzt, Ihre 404-Seiten zu bearbeiten.  

Smart Custom 404 Error Page (404page) Plugin

Darüber hinaus bietet dieses Plugin auch Block- und Shortcode-Funktionen, um die angeforderte URL in Ihre benutzerdefinierte 404-Fehlerseite einzufügen. Lesen Sie die Dokumentation des Plugins für weitere Informationen. Sie können diese Funktion zum Beispiel verwenden, um eine einfache 404-Fehlerseite wie die von Google zu erstellen

Hinweis: Das 404-Seiten-Plugin wird nicht aktiv weiterentwickelt, aber alle seine Funktionen funktionieren ohne Probleme mit der neuesten WordPress-Version (6.6).

Colorlib 404 Anpassungsprogramm

Colorlib 404 Customizer ist ein weiteres Plugin, mit dem Sie individuelle 404-Fehlerseiten für Ihre WordPress-Webseite erstellen können. Bei diesem Plugin verwenden Sie den Live Customizer, um alle Anpassungen vorzunehmen.

Colorlib 404 Customizer-Plugin

Dieses Plugin wird mit 20 integrierten 404-Seitenvorlagen geliefert. Sie eignen sich gut für den Anfang, wenn Sie keine Lust haben, Ihre eigene Seite anzupassen oder ganz von vorne anzufangen. Sie können auch überprüfen, wie die Seite auf kleineren Bildschirmen, wie Tablets und Smartphones, aussieht, indem Sie auf die entsprechenden Symbole im Live Customizer unten links klicken.  

Benutzerdefinierte 404 Pro

Mit dem Plugin Custom 404 Pro können Sie benutzerdefinierte Seiten- und URL-Weiterleitungen für 404-Fehler einrichten. Sie können dieses Plugin verwenden, um Ihre 404-Fehler auf eine andere Seite umzuleiten.

Plugin Custom 404 Pro

Sie können dieses Plugin auch so einstellen, dass es 404-Fehlerprotokolle aufzeichnet und diese anzeigt. Setzen Sie dazu den Protokollierungsstatus auf der Registerkarte Einstellungen ➡️ Allgemein auf Aktiviert.  

Erstellen Sie eine lustige und ansprechende benutzerdefinierte 404-Seite in WordPress

Eine benutzerdefinierte 404-Fehlerseite "Seite nicht gefunden" ist für jede Webseite unerlässlich. Sie wirkt sich positiv auf Ihre Benutzer aus, wenn sie auf einen fehlerhaften Link auf Ihrer Webseite stoßen.  

Indem Sie eine benutzerdefinierte 404-Fehlerseite erstellen, können Sie Benutzer zu hilfreichen Inhalten zurückführen und sie auf Ihrer Webseite halten. Das verbessert nicht nur die Benutzerfreundlichkeit, sondern verringert auch die Absprungrate.

In diesem Artikel haben Sie viele Möglichkeiten kennengelernt, wie Sie es schaffen können:

• Direktes Bearbeiten der PHP-Datei der 404-Vorlage des Themas
• Arbeiten mit dem Vorlageneditor des WordPress-Blockthemas
• WordPress-Seitenersteller verwenden
• Installieren von 404 Seiten WordPress Plugins

Worauf warten Sie also noch? Machen Sie Ihre 404-Fehlerseiten lustig und ansprechend für Ihre Benutzer!