So erstellen Sie eine benutzerdefinierte 404-Seite in einem untergeordneten WordPress-Theme

Unabhängig davon, wie gut Ihre Website gestaltet und aufgebaut ist, werden Benutzer irgendwann auf eine 404-Seite stoßen. Es kann etwas so Einfaches sein wie das Eingeben einer URL mit einem Rechtschreibfehler. Wenn Sie beispielsweise eine Kontaktseite unter www.website.com/contact gefunden haben und jemand versucht, auf www.website.com/contacts zu landen, besteht eine gute Möglichkeit, dass er auf die 404-Seite umgeleitet wird. Außerdem berücksichtigen Anpassungen des Website-Inhalts möglicherweise nicht immer Seiten, die ohne Umleitung von Links hätten verschoben werden können. Hoffentlich passiert diese Erfahrung Ihren Benutzern nicht allzu oft, aber wenn doch, ist es eine Gelegenheit, Hilfe anzubieten und etwas Einzigartiges aus Ihrer Marke zu machen.

Wahrscheinlich sind Ihnen 404-Seiten im Web nicht fremd, also haben Sie vielleicht schon ein Design im Sinn. Wenn nicht, finden Sie alle möglichen Inspirationen, indem Sie „coole 404-Seiten“ googeln. Design kann alles sein, von ernst bis lustig, textlastig oder minimalistisch oder irgendwo dazwischen.

Unten sind einige meiner Favoriten. Sie sind gute Beispiele dafür, wie Kreativität bei der Gestaltung der Seite eingesetzt wird.

Figma

Figma ist eine einfache 404-Seite, aber die Grafik passt sehr gut zu den Vektorpunkten. Ich mag, wie einfach und mutig es ist; es ist wirklich alles, was benötigt wird.

Airbnb

Inhaltlich bietet dieses Beispiel etwas mehr. Der illustrative Ansatz fügt eine humorvolle Komponente hinzu. Dazu gehören einige der wichtigsten Links. Wenn sich ein Benutzer vertippt hat, ist es möglich, dass er in der Liste findet, wonach er sucht.

MailChimp

Das Design auf der MailChimp-Site macht immer Spaß, besonders mit der jüngsten Neugestaltung. Es hat sowohl im Text als auch in der Illustration ein humorvolles Element.

Holen Sie sich Genesis Framework & StudioPress-Designs kostenlos!

Wenn Sie Ihre Websites auf Flywheel hosten, haben Sie direkt von unserem ansprechenden Dashboard aus Zugriff auf über 30 Premium-WordPress-Themen (einschließlich Genesis!). Das ist ein Wert von über 2.000 $, mit dem Sie für nur 15 $/Monat beginnen können! Erfahren Sie hier mehr.

Erstellen einer benutzerdefinierten 404-Seite

Das Wichtigste zuerst: Alle Anpassungen sollten in einem untergeordneten Thema vorgenommen werden. Auf diese Weise werden Änderungen nicht durch Aktualisierungen des regulären Designs überschrieben. Diese 404-Seite wird eine Datei im Child-Theme sein, die Datei mit dem Namen 404.php , um genau zu sein.

So fügen Sie CSS-Variablen hinzu, um WordPress-Child-Themes anzupassen

CSS-Variablen, auch als benutzerdefinierte CSS-Eigenschaften bezeichnet, ermöglichen eine einfache Wiederverwendung in Ihren CSS-Stylesheets. Wenn Sie mit WordPress-Child-Themes gearbeitet haben, finden Sie sich wahrscheinlich dabei, viel Stil zu machen ...

Denken Sie auch daran, dies in einer Testumgebung zu tun. Wenn Designdateien geändert werden, besteht immer die Möglichkeit von Syntaxfehlern, die die Site zum Absturz bringen können.

1. Erstellen Sie eine neue Datei

Wenn Sie das untergeordnete Thema haben, besteht der erste Schritt darin, eine neue Datei zu erstellen, mit der Sie arbeiten können. Sie sollten den Ordner öffnen, in dem Sie das untergeordnete Thema erstellt haben, und eine 404.php -Datei hinzufügen.

2. Bearbeiten Sie die Datei

Einfaches Beispiel

Dieses Beispiel berücksichtigt eine Seite mit Text und einem Bild. Die Designidee hier ist, etwas Einfaches zu schaffen, das eine illustrierte Grafik erfordert.

Fügen Sie den folgenden Code in die Seite 404.php . Es ist ein grundlegender Anfang. Sie können Dinge in eine andere Struktur ändern, um sie wirklich zu Ihrer eigenen zu machen (dh wenn Sie keine Seitenleiste möchten, kann diese entfernt werden).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Es gibt ein paar Modifikationen, die Sie vornehmen müssen. Einer ändert den Pfad zum Bild und fügt den gewünschten Titel ein. Vergessen Sie nicht, eine benutzerdefinierte Nachricht zu schreiben und dann Ihre Änderungen zu speichern.

Wenn Sie die Anweisungen bis hierher befolgt haben, haben Sie eine benutzerdefinierte Vorlage mit einem Bild, einer Nachricht und einer Standardkopfzeile, Seitenleiste und Fußzeile erstellt. (Sie können dies auch auf den anderen Seiten haben.)

Widget-Ansatz

Dies ist optional, aber viele Designer arbeiten lieber mit Widget-Bereichen. Es ist einfacher, Änderungen vorzunehmen und wartbarer. Ein Widget ist beispielsweise eine effiziente Möglichkeit, die neuesten und beliebtesten Blogartikel anzuzeigen.

Hinzufügen des Widgets

Um das Widget zur 404.php file hinzuzufügen, müssen Sie einen neuen Widget-Bereich erstellen. Ein Child-Theme benötigt eine functions.php -Datei, also ist es jetzt an der Zeit zu überprüfen, ob das Child-Theme eine hat.

In der Datei functions.php wird ein Ausschnitt benötigt, um ein neues Widget auf der Seite hinzuzufügen.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Dieses Snippet fügt nur das Widget hinzu. Um es tatsächlich zu verwenden, muss diese Funktion aufgerufen werden. Es wird in der Datei 404.php . Halten Sie Ausschau nach dem Ort, an dem Sie diesen Widget-Bereich haben möchten.

Kopieren Sie den folgenden Code und fügen Sie ihn dort ein, wo Sie neue Widgets anzeigen möchten (z. B. nach Titel und Text):

<?php dynamic_sidebar( '404' ); ?>

Nachdem Sie nun festgelegt haben, wo der neue Widget-Bereich angezeigt werden soll, ist es an der Zeit, den Widget-Inhalt hinzuzufügen, indem Sie zu Darstellung > Widgets gehen. Hier können Sie Dinge wie einen HTML-Block, beliebte Posts oder andere Widgets für die 404-Seite auswählen.

Egal, ob Sie etwas Einfaches oder eine Seite mit vielen Links erstellen, das Erstellen einer benutzerdefinierten 404-Seite ist ziemlich einfach. Durch die Verwendung eines Child-Themes und der Nutzung von Widgets ergeben sich unbegrenzte Gestaltungsmöglichkeiten.

Suchen Sie nach weiteren Möglichkeiten, Ihre Website anzupassen? Schauen Sie sich diese Tutorials an:

• So fügen Sie CSS-Variablen hinzu, um WordPress-Child-Themes anzupassen
• Einfache Anpassungen für Ihr untergeordnetes Genesis-Theme
• So erstellen und verwenden Sie benutzerdefinierte Felder in WordPress