So bearbeiten Sie eine 404-Seite in WordPress (Leitfaden zur Anpassung) | WP-Buffs

Veröffentlicht: 2022-01-07

Jeder Inhaltsersteller und Site-Administrator weiß, dass kleine Details sehr wichtig sind und es im Internet keinen zweiten Eindruck gibt. Ein schönes Farbschema, ein hervorragender Animationseffekt oder eine attraktive 404-Seite sind Details, die das Benutzererlebnis ausmachen oder brechen.

Eine 404-Seite ist der technische Ausdruck, der Situationen beschreibt, in denen eine Seite nicht gefunden wird. Dies kann beispielsweise daran liegen, dass der Benutzer eine URL im Browser-Tab falsch eingibt oder diese Webseite nicht mehr online ist.

In den folgenden Abschnitten erfahren Sie, wie Sie eine 404-Seite in WordPress bearbeiten. Eine attraktive 404-Seite ist die beste Lösung, um einen peinlichen Moment zu überwinden. Anstatt Website-Besucher zu enttäuschen, trägt eine hervorragende 404-Seite zu einem besseren Image Ihrer Marke bei.

Was eine 404-Seite ist

Sie klicken auf einen Link oder geben eine URL-Adresse im Browser-Tab ein. Als nächstes beginnt der Browser, Daten von dem Server anzufordern, auf dem die Website gehostet wird, die Sie besuchen möchten. Dies ist eine grundlegende Erklärung des Surfens im Internet. Der Informationsaustausch zwischen Browser und Server impliziert unter anderem einige Statuscodes. Darüber hinaus gibt es Status zur Beschreibung der Webseitenumleitung, der Client- oder Serverfehler oder zu Informationszwecken.

Alle Statuscodes mit Formular 4XX beziehen sich auf Clientfehler. 403 Forbidden liegt beispielsweise vor, wenn der Server die Anfrage des Browsers versteht, sich aber weigert, die Daten bereitzustellen. Die 404-Seite ist mit Abstand der bekannteste Statuscode. Sie erhalten eine 404-Seite, wenn Sie auf einen defekten Link klicken, eine falsche URL eingeben, die zu einer nicht existierenden Webseite führt, oder wenn die angeforderte Ressource noch nie existiert hat.

Selbst wichtige Websites, wie riesige Nachrichtenmagazine oder stark besuchte Geschäfte, können einen 404-Seiten-Fehler enthalten. Natürlich ist es unvermeidlich, aber Sie sollten wissen, wie Sie über die peinliche Situation hinweggehen. Daher wäre es hilfreich, wenn Sie alles tun würden, um eine gut aussehende 404-Fehlerseite für Ihre Website zu erstellen.

Die Anatomie einer guten 404-Seite

Bild des 404-Seitendesigns von tiktok.com als Beispiel für die Bearbeitung einer 404-Seite in WordPress.
Das 404-Seiten-Design von tiktok.com

Einige Websites verdienen sich einen Backlink und öffentliche Anerkennung, indem sie in Listen mit coolen 404-Seiten erwähnt werden. Seitenbesucher schätzen ein gutes Design oder eine humorvolle Botschaft auf einer 404-Seite. Dies sollte Sie davon überzeugen, dass eine gut aussehende 404-Fehlerseite eine Priorität für Ihr Online-Geschäft ist. Folgendes sollte eine gute 404-Seite beinhalten:

Die Fehlermeldung – Benutzer sollten ein Problem erkennen, sobald sie auf einer 404-Seite landen. Machen Sie es deutlich, damit es jeder versteht.

Links zu Ihren Inhalten – Sie möchten nicht, dass Benutzer Ihre Website verlassen. Geben Sie ihnen Links zu relevanten Inhalten. Ob es Ihr bester Inhalt oder etwas im Zusammenhang mit der fehlenden Seite ist, es liegt ganz bei Ihnen. Was zählt, ist, sie auf Ihrer Website zu halten.

Entschuldigung – Lassen Sie andere wissen, dass Sie sich für die Unannehmlichkeiten entschuldigen. Verwenden Sie, wenn möglich, Humor – das ist die beste Methode, um sie zu ermutigen, Ihrer Website eine zweite Chance zu geben.

Gutes Design – Menschen sind enttäuscht, wenn sie auf einer 404-Seite landen, und neigen zu Überreaktionen. Ein atemberaubendes Design kann neben ansprechenden Inhalten ihre Meinung ändern. Geben Sie Ihr Bestes, um eine hervorragende 404-Seite zu erstellen.

So bearbeiten Sie eine 404-Seite in WordPress

Glücklicherweise haben wir verschiedene Möglichkeiten, eine 404-Seite in WordPress zu bearbeiten. Die erfahrensten Benutzer können die Datei 404.php bearbeiten. Dies ist die Datei, die für die Anzeige der 404-Fehlerseite verantwortlich ist. Webadministratoren, die lieber einen Seitenersteller wie Elementor verwenden, können eine 404-Seite erstellen. Schließlich sind ein paar Plugins zum Erstellen von 404-Seiten für diejenigen verfügbar, denen es an Programmierkenntnissen mangelt. Lassen Sie uns alle Möglichkeiten zum Erstellen und Bearbeiten einer 404-Seite in WordPress analysieren.

Bearbeiten Sie eine 404-Seite über einen FTP-Client

Eine gute Faustregel ist, eine Sicherungskopie Ihrer Website zu erstellen, bevor Sie den Code bearbeiten. Überspringen Sie diesen Schritt niemals – in den meisten Fällen benötigen Sie kein Site-Backup, aber wenn Sie unvorbereitet sind, passieren schlimme Dinge. Machen Sie also diese Sicherung, um sicher zu sein!

Nehmen wir an, Sie haben ein vollständiges Site-Backup durchgeführt und sind bereit, tiefer in die Materie einzutauchen. Verwenden Sie den FTP-Client Ihrer Wahl und verbinden Sie sich mit der Site localhost. Suchen Sie nach einer Datei namens 404.php-Datei – das ist die Datei, die für die Anzeige der 404-Fehler-Webseite verantwortlich ist. Normalerweise haben WordPress-Themes eine dedizierte 404.php-Datei, aber einige könnten diese Datei vermissen. Überprüfen Sie noch einmal, ob Ihr Designcode eine 404.php-Datei enthält. Wenn Ihr Design keine 404.php-Datei hat, müssen Sie eine erstellen. Erstellen Sie eine neue Datei und kopieren Sie die folgenden Codezeilen:

404-Seitenvorlage

 <?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

Quelle : Erstellen einer Fehler-404-Seite im WordPress-Codex

Dies ist der Code hinter dem Thema 404 Page of Twenty Thirteen – es ist eine Basisseite, die sich zum Bearbeiten und Verwenden für Ihr Projekt eignet. Natürlich können Sie sich auch andere Standard-WordPress-Themes ansehen und ihre 404-Seiten überprüfen. Die 404-Seite des Themes Twenty Thirteen ruft die Kopf- und Fußzeile Ihrer Website auf, sodass die Seite dem Stil Ihrer Website entspricht. Unabhängig davon, wie Ihre Website aussieht, hat die 404-Fehlerseite ein ähnliches Design. Allerdings müssen Sie die auf dieser Seite angezeigten Inhalte anpassen. In dieser Phase kommt das Talent Ihres Content-Erstellers ins Spiel.

Optional können Sie die Datei 404.php bearbeiten, um den auf Ihrer Website veröffentlichten Inhalt anzuzeigen. Die Optionen sind endlos, sehen wir uns also einige mögliche Modalitäten zur Verbesserung des 404-Seitenfehlers an.

  • Zeigen Sie die Titel der letzten sieben Posts an. Alles, was Sie tun müssen, ist, dieses Code-Snippet in die Datei 404.php einzufügen:
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>
  • Anzeigen der Titel von sieben zufälligen Posts Fügen Sie den folgenden Code ein, um sieben zufällige Posts anzuzeigen:
 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

Fügen Sie Ihr Logo oder ein lustiges Bild hinzu (Katzen und Hunde funktionieren immer), um die Zuschauer zum Lächeln zu bringen und Ihnen eine zweite Chance zu geben. Testen Sie als Nächstes die 404-Seite, nachdem Sie die Bearbeitung abgeschlossen haben. Um Ihre 404-Seite anzuzeigen, geben Sie Ihre Site-Adresse in die Browserleiste ein und fügen Sie danach eine zufällige Buchstabenfolge hinzu. Das Ergebnis sollte in etwa so aussehen:

 https://example.com/dfdfddfd

Wenn es nicht funktioniert, kann der Server Ihre benutzerdefinierte 404.php-Datei nicht finden. In diesem Szenario sollten Sie zur .htaccess-Datei der Website gehen und die folgende Codezeile einfügen:

FehlerDokument 404 /index.php?error=404

Wichtig : Wenn Sie eine neue oder kürzlich gestartete Website bearbeiten, enthält diese möglicherweise nicht die .htaccess-Datei. Es ist kein großes Problem – ändern Sie die Permalinks Ihrer Website und speichern Sie Ihren Vorgang. Kehren Sie dann unmittelbar danach zu Ihrem bevorzugten Permalink-Format zurück. Auf diese Weise haben Sie die .htaccess-Datei generiert.

Bearbeiten einer 404-Seite durch den Theme-Editor (nicht empfohlen)

Bild, wie man eine 404-Seite in WordPress mit dem Theme-Editor bearbeitet.
Bearbeiten einer 404-Seite über den Theme-Editor

Eine beträchtliche Anzahl von Artikeln, die sich mit der Bearbeitung einer 404-Seite in WordPress befassen, erwähnen den Theme-Editor als praktikable Lösung. Es ist nicht! Obwohl es bequem und einfach ist, den Site-Code direkt über das WordPress-Admin-Dashboard zu bearbeiten, ist es gefährlich und kann zu einem Fiasko führen. Ganz zu schweigen davon, dass es überhaupt nicht professionell ist, die Website zu bearbeiten, während sie online und für alle zugänglich ist. Außerdem verschwindet Ihre Bearbeitung, sobald Sie das Design aktualisieren (es sei denn, Sie verwenden ein untergeordnetes Design).

Bearbeiten Sie eine 404-Seite durch Seitenersteller

Diese Methode ist sicher, einfach und effektiv. Sie sind wahrscheinlich mit Seitenerstellern wie Elementor, Divi Builder, Beaver Builder, SeedProd oder Themify Builder vertraut. Was Sie wählen, ist nicht relevant, solange Sie es gut verstehen. Mit diesen Buildern können Sie eine hervorragende 404-Seite erstellen, ohne eine einzige Codezeile schreiben zu müssen. Dies ist die beste Lösung, wenn Sie Bedenken haben, Code-Snippets in Ihre Site-Dateien einzufügen.

Überprüfen Sie den Blog und die Dokumentation Ihres bevorzugten Seitenerstellers, und höchstwahrscheinlich finden Sie ein Tutorial, das erklärt, wie man eine 404-Seite erstellt. Darüber hinaus haben einige Seitenersteller spezielle Vorlagen für 404-Seiten. Wählen Sie eine Vorlage und personalisieren Sie sie passend zu Ihrer Marke.

404-Seiten-WordPress-Plugins

Sie haben nicht viele Alternativen, um eine 404-Seite mit einem dedizierten Plugin zu erstellen. Einige Plugins verdienen jedoch Ihre Aufmerksamkeit. Ihr Hauptvorteil besteht darin, dass Sie keinen Code schreiben müssen, um 404-Seiten zu erstellen und zu bearbeiten. Die Plugins sind einfach, effektiv und leichtgewichtig.

404Seite  

404page-Plugin im WP-Repository
404page-Plugin im WP-Repository

Sie könnten versucht sein zu glauben, dass Sie ein Programmierer sein müssen, um eine gute 404-Fehlerseite zu erstellen. Dank dieses Plugins kann sich jeder eine ansprechende 404-Fehlerseite ausdenken. Außerdem ist das 404page-Plugin nicht so komplex wie Seitenersteller. Sie konzentrieren sich auf Ihr Endprodukt – eine gute 404-Fehlerseite.

Installieren und aktivieren Sie das Plugin. Erstellen Sie als Nächstes eine 404-Seite genauso wie die übrigen Seiten Ihrer Website. Gehen Sie in Ihrem WordPress-Admin-Dashboard zu Darstellung > 404-Fehlerseite und wählen Sie die Seite, die Sie gerade erstellt haben, als Ihre benutzerdefinierte 404-Fehlerseite für Ihre Website aus.

Dieses Plugin erlaubt keine Umleitung von Webseiten; es teilt den Such-Bots lediglich mit, dass die Webseite fehlt. 404page ist ein persönliches Projekt eines Entwicklers, also steht hinter diesem Plugin keine Agentur. Berücksichtigen Sie, dass das Plugin 100.000 aktive Installationen und eine fast perfekte Bewertung hat – 4,9 von 5 Sternen. Unter diesen Umständen verdient der Plugin-Entwickler unsere Anerkennung!

Alle 404-Umleitungen zur Homepage und Umleitung defekter Bilder  

Alle 404-Weiterleitungs-Plugins im WP-Repository
Alle 404-Weiterleitungs-Plugins im WP-Repository

Der Name des Plugins ist nicht sehr beeindruckend, aber er ist sehr suggestiv. Das Plugin behandelt die 404-Seitenfehler anders als die vorherige Alternative. Anstatt Besucher mit einer gut gestalteten 404-Seite zu erfreuen, leitet dieses Plugin alle 404-Fehler auf die Homepage oder eine andere Webseite um. Der größte Vorteil dieses Plugins ist, dass Sie die Kontrolle über die defekten Links auf Ihrer Website haben. Darüber hinaus können Sie dieses Plugin verwenden, um Benutzer umzuleiten. Anstatt die Leute beispielsweise einen nicht aktualisierten Blog-Beitrag besuchen zu lassen, verwenden Sie dieses Plugin, um sie zur aktualisierten Version zu führen.

Colorlib 404 Customizer  

Colorlib 404 Customizer-Plugin im WP-Repository
Colorlib 404 Customizer-Plugin im WP-Repository

Dieses Plugin ist einfach zu verwenden und hilft Ihnen wirklich dabei, ansprechende 404-Seiten zu erstellen. Es enthält professionell gestaltete 404-Vorlagen, die Sie an Ihre Bedürfnisse anpassen können. Das Colorlib 404 Customizer-Plugin ermöglicht das Einfügen von Schaltflächen für soziale Medien, das Ändern der Hintergrundfarbe oder des Bildes und das Konfigurieren der Textüberschriften. Fortgeschrittene Benutzer können benutzerdefinierten CSS-Code hinzufügen. Das Plugin ist Open Source, sodass Sie zur Verbesserung des Plugins beitragen können.

Verwenden Sie einen Seitenersteller oder tun Sie dies über Ihr Thema .

Wenn Sie bereits einen Seitenersteller verwenden, haben Sie bereits die Möglichkeit, Ihre 404-Seite damit anzupassen. So ziemlich jeder Seitenersteller ermöglicht es Ihnen, Ihre 404-Seite zu bearbeiten. Hier ist eine Liste von Plugins, von denen wir überzeugt sind, dass Sie dies tun können:

● Luftig

● Elementor

● Biberbauer

● Divi-Generator

● Site-Ursprung

Wenn Sie ein Design wie OceanWP, GeneratePress oder Astra verwenden, können Sie dies über die Designoptionen tun. Sie erhalten eine fertige, hervorragend aussehende 404-Seite, wenn Sie Demo-Inhalte importieren. Der einzige Nachteil des Imports von Demo-Inhalten und der Verwendung vorgefertigter Designs besteht darin, dass Ihre Website mehr oder weniger genau wie die Demo aussieht. Nehmen Sie zum Beispiel diese Website und die Astra-Demo. Jeder, der Astras Bibliothek von Starter-Sites durchgesehen hat, wird schnell erkennen, dass die Website-Eigentümer sie nicht selbst erstellt haben. Dies kann das Vertrauen der Benutzer in Ihre Website beeinträchtigen.

Auf der positiven Seite erweitern Astra, OceanWP und die anderen Themen mit über 500.000 Benutzern ihre Starter-Site-Bibliothek jeden Monat weiter.

Zu dir hinüber

Sie haben jetzt eine klare Vorstellung davon, wie Sie eine 404-Seite in WordPress bearbeiten. Es gibt viele Lösungen dafür, und Sie sollten diejenige auswählen, die Ihren Fähigkeiten und Bedürfnissen entspricht. Was zählt, ist eine aufregende 404-Fehlerseite, um Ihre Zuschauer zu begeistern. Die Methode und die Tools, die Sie zum Entwerfen und Implementieren dieser 404-Seite verwenden, betreffen Ihre Kunden nicht. Sie haben keine Entschuldigung dafür, dass Ihnen eine ausgezeichnete 404-Fehlerseite fehlt! Gehen Sie zum Zeichenbrett und beginnen Sie mit dem Erstellen einer benutzerdefinierten Fehlerseite!