Die eigene 404 Seite mit WordPress

Die meisten Internet-Nutzer kennen sie, die ominösen 404-Seiten. Sie wird standardmäßig aufgerufen wenn der in die Adresszeile eingetragene Link ins Leere führt. Jetzt haben Sie als WordPress-Nutzer die Möglichkeit auf Plugins zurück zu greifen um eine 404-Seite zu erhalten, wir machen uns aber eine Eigene.

Diese nutzt direkt Funktionen und Anweisungen aus dem WordPress-Kern, um dem User das weitere Vorgehen anhand von z.B. einer Suche zu erleichtern. Auch um die Gestaltung werden wir uns kümmern, also Grafiken einbinden und entsprechende Anweisungen erstellen. Als Beispiel nehme ich meine eigene Webseite her, für welche ich kürzlich einen Fehlerseite erstellt habe. Zunächst ein Beispiel wie so eine Seite standardmäßig aussehen könnte:

404_bsp

Das Bild zeigt die Fehlermeldung welche der Mozilla Firefox uns in Gesicht klatscht, schön ist anders.

Wie gehen wir vor? Um die Übersicht zu wahren, habe ich das Projekt in vier wesentliche Schritte aufgeteilt. Diese wären Planung, Ausarbeitung der Dateien, Implementierung und Testphase. Also fangen wir an …

1. Planung

Soll die Seite ein Thema besitzen? Wie soll die Seite Aussehen? Welche Funktionen für den User soll Sie enthalten? Wohin soll die Seite verweisen? Damit beschäftigen wir uns zunächst und das am Besten, indem wir ein Blatt Papier und einen Stift zu Hand nehmen und uns die wichtigsten Eckpunkte schnell skizzieren. In meinem Beispiel soll das Thema „Geisterseite“ verwendet werden, zudem soll eine ganzseitige Grafik verwendet werden (Also ein anderer Seitenaufbau ohne Teile der regulären Webseite). Funktionell sollen dem Nutzer die neuesten Beiträge oder Seiten zur Auswahl stehen, eine Suchfunktion, ein bis zwei Hinweise und eine Möglichkeit wieder zur Hauptseite zu gelangen. Skizziert habe ich das ganze folgendermaßen …

skizze

Dies soll nur als grobe Richtlinie dienen, alle gewünschten Bestandteile der Seite sollten aber schon hier zu finden sein. Bei meinem Beispiel eine Skizze des Hintergrundbildes mit ungefährer Aufteilung. Zudem die Anordnung der Textelemente und deren Größe. Sind wir uns sicher mit der Aufteilung und Anordnung der Seite, gehen wir zu Schritt 2.

2. Ausarbeitung der Dateien

In diesem Schritt erstellen wir das Hintergrundbild und alle notwendigen PHP und CSS-Dateien. Das Hintergrundbild habe ich, passend zum Thema, mit Adobe Photoshop gebastelt und als PNG-Grafik in der Größe von 1920 x 1080 Pixeln abgespeichert. Da meine 404-Seite flexibel sein soll, decke ich so die meisten Monitorgrößen ab. Hier können Sie sich austoben, lassen Sie Ihrer Phantasie freien Lauf! Meine sieht wie folgt aus:

404_small

Nachdem die Grafik fertig ist, kümmern wir uns um die notwendigen PHP & Anweisungen. Mein Entwurf lässt sich am einfachsten in zwei Bereiche aufteilen, den Head-Bereich welcher noch die Verlinkung zu den sozialen Netzwerken beinhaltet, und den Content-Bereich in dem alle Funktionen untergebracht sind.

Das bedeutet wir erstellen 2 Dateien, eine 404.php Datei und eine header-404.php, die CSS-Anweisungen schreiben wir in die im Template enthaltene style.css. Was machen diese Dateien denn? Hier kurz eine Erläuterung:

header-404.php
Diese Datei ist im Prinzip nichts anderes als eine Kopie der header.php aus dem Template-Verzeichnis, aus welcher wir alles löschen was wir nicht brauchen. In meinem Beispiel bleiben nur teilweise die Social-Buttons übrig, der Rest fliegt raus.

404.php
Diese Datei ist für die Ausgabe unserer eigentlichen Inhalte verantwortlich. Hier erzeugen wir mit PHP einige Funktionen die auf das CMS-System zugreifen. Hier verschaffen wir uns Zugriff auf das Archiv und lassen uns die letzten 10 Beiträge anzeigen, lassen uns die Suche noch einmal ausgeben und verweisen auf die Startseite. Der Rest ist Formatierung mit HTML&CSS.

style.css
Hier ergänzen wir nur die Template Style-Anweisungen mit den notwendigen Angaben unserer 404-Seite.

2.1 – header-404.php – Inhalt und Ausgabe

Diese Datei hat zwei Aufgaben, das einbinden der CSS-Datei des verwendeten Templates und das Verbinden mit den Sozialen Netzwerken. Dies sieht natürlich je nach verwendetem Theme anders aus, deswegen schreibe ich hier nur die allgemein notwendigen Anweisungen:

Quellcode:

<!-- Aufruf des Webseiten.Titels: -->
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<!-- Einbinden der CSS-Datei: -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" title="no title"/>

Den Aufruf der Social-Buttons spare ich mir, da ich diese Funktion selbst geschrieben habe und sie somit nicht allgemein gültig ist.

2.2 – 404.php – Content der Fehlerseite erzeugen

In dieser Datei greifen wir auf bordeigene Mittel von WordPress zurück.

Ganz wichtiger Hinweis: Wer sich jetzt noch nicht mit dem WordPress-Codex beschäftigt hat sollte dies jetzt tun. Hier sind alle Platzhalter, vordefinierten Funktionen oder hilfreiche Tipps zur Arbeit mit dem WordPress-Kern zu finden.
Zu finden unter folgender url: codex.wordpress.org

Nun zurück zu unserer Datei, hier rufen wir zunächst unsere vorbereitet header-404.php datei auf, dies tun wir mit folgenden Zeilen:

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

Vergleicht man diesen Aufruf mit der Standard-Integration des Headers, nämlich get_header(‚ ‚); fällt auf das lediglich das 404 zwischen den Hochkommas ergänzt wurde. Betrachtet man dann den Namen „header-404.php“ erkennt man, dass WordPress nur zwischen die Hochkommas schaut und diese Bezeichnung nur hinter dem Bindestrich des Dateinamens stehen muss. Diese „404“ ist nicht zwingend, Sie können die Datei benennen wie Sie möchten.

Als nächstes erstellen wir unser HTML-Gerüst, indem wir ein einfach einen DIV-Container erstellen und mit einigen Listen und Absätzen füllen. Das Grundgerüst in meiner Datei sieht so aus:

<div class="content_vier">

<h2>Überschrift der Fehlerseite</h2>

<p>Textabsatz</p>
<ol> <!-- Erste Liste für die letzten Beiträge -->
<p>Textabsatz</p>
<ul>
<li>Ausgabe der letzten Beiträge, Seiten</li>
</ul>
<br/><!-- Erzwungener Umbruch -->
<li >Alternative Ausgabe</li>
<p>Textabsatz</p>
<ol>
<br/><!-- Erzwungener Umbruch -->
<br/>
<li>
<p>Überschrift der Suche</p>
<form><!-- Suchfeld -->
<input type="text"/><input type="submit"/>
</form>
</li>
<br/><!-- Erzwungener Umbruch -->
<br/>
<li>Platz für weitere Hinweise</li>
<br/><!-- Erzwungener Umbruch -->
<br/>
<li>Link zu Startseite</li>
</ol>
</div>

Noch kein Hexenwerk, ungewöhnlich sind die vielen erzwungenen Umbrüche. Das war aber die schnellste Lösung, ohne gleich meine ganze CSS-Formatierung der restlichen Webseite zu überarbeiten.

Hier ist die Datei gefüllt mit allen notwendigen PHP-Anweisungen und etwas CSS-Code um meine Template-CSS Anweisungen durch die höhere Hierarchie zu übergehen.

<div class="content_vier">

<h2 style="font-family: 'rokkittregular', Arial, sans-serif; font-size: 42px; color: #33acbe;"><span style="font-size: 70px;">404 !?</span> WUAAAAAAAH! Eine Geisterseite!</h2>

<p class="plop">Ganz ruhig, lass uns zusammen suchen, ich helf dir besser ...</p>
<?php
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
$posts = query_posts('post_type=any&name='.$s);
$s = str_replace("-","",$s);
if (count($posts) == 0) {
$posts = query_posts('post_type=any&s='.$s);
}
if (count($posts) > 0) {
echo "<ol  style='margin-left: 30px;'><li style='border: none;'>";
echo "<p><strong>I.</strong> Suchst du vielleicht einen <strong>der letzten Beitr&auml;ge oder Seiten</strong>?</p>";
echo "<ul style='margin-left: 30px;'>";
foreach ($posts as $post) {
echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
}
echo "</ul>";
echo "<br/>";
echo "<li style='border: none;'><p style='background:#FFFFFF; line-height: 1.6; display:inline;'><strong>Nichts gefunden?</strong> Nicht traurig sein, ich habe noch ein paar Ideen:</p></li>";
} else {
echo "<p><strong>Immernoch nicht weinen!</strong> Ich hab noch mehr Tipps:</p>";
echo "<ol>";
}
?>
<br/><br/>
<li style="border:none;">
<label for="s"><strong>II.</strong> Oder <strong>such</strong> einfach <strong>nochmal</strong> danach:</label>
<form style="display:inline;" action="<?php bloginfo('siteurl');?>">
<input type="text" value="<?php echo esc_attr($s); ?>" id="s" name="s"/> <input type="submit" value="boing"/>
</form>
</li>
<br/>
<br/>
<li style="border:none;">
<strong>III. Wenn du eine URL eingetragen hast...</strong> pr&uuml;fe auf Schreibfehler und Gross- und Kleinschreibung, z.B. "SuCHbriFf".

</li>
<br/>
<br/>
<li style="border:none;">
<strong>IV. Kein Erfolg? Starte einfach neu</strong> auf meiner <a href="<?php bloginfo('siteurl');?>"><strong>Startseite</strong></a>.
</li>
</ol>
</div>

Hui, ganz schön viel Input, zerlegen wir das Schlamassel und erörtern wir die Datei Schritt für Schritt. Zunächst schauen wir uns den oberen Teil der Datei an, denn dieser ist für die Ausgabe der letzten 10 Artikel oder Seiten verantwortlich.

<?php
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
$posts = query_posts('post_type=any&name='.$s);
$s = str_replace("-","",$s);
if (count($posts) == 0)
{
$posts = query_posts('post_type=any&s='.$s);
$posts = query_posts( 'posts_per_page=5' );
}
if (count($posts) > 0)
{
echo "<ol  style='margin-left: 30px;'><li style='border: none;'>";
echo "<p><strong>I.</strong> Suchst du vielleicht einen <strong>der letzten Beitr&auml;ge oder Seiten</strong>?</p>";
echo "<ul style='margin-left: 30px;'>";
foreach ($posts as $post) {
echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
}
echo "</ul>";
echo "<br/>";
echo "<li style='border: none;'><p style='background:#FFFFFF; line-height: 1.6; display:inline;'><strong>Nichts gefunden?</strong> Nicht traurig sein, ich habe noch ein paar Ideen:</p></li>";
} else {
echo "<p><strong>Immernoch nicht weinen!</strong> Ich hab noch mehr Tipps:</p>";
echo "<ol>";
}
?>

Im Detail passiert hier folgendes:

  • Die zweite Zeile mit der Funktion „preg_replace“ prüft oder der vom Nutzer eingegebene Link, mit der falschen Dateiendung abgesendet wurde und versucht gegebenenfalls diese zu korrigieren.
  • Die dritte Zeile „$posts = query_posts“ ist die Verbindung zu den Beiträgen des CMS-Systems
  • Die vierte Zeile „$s = str_replace(„-„,““,$s);“ entfernt alle vorkommenden Bindestriche
  • Zeile fünf bis neun holt die Beiträge aus der Datenbank, wobei die Zeile mit dem Eintrag „$posts = query_posts( ‚posts_per_page=5‘ );“ die ausgegebenen Beiträge auf 5 reduziert.
  • Die restlichen Zeilen generieren über die echo-Anweiszngen das HTML-Gerüst. Der Eintrag „<a href=“‚.get_permalink($post->ID).'“>‘.$post->post_title.'</a>“ erzeugt den eigentlichen Link zum Beitrag.

Es lassen sich hier im Prinzip alle möglichen Ausgaben von WordPress integrieren. Das hängt von Ihren Wünschen und Ihrem Projekt ab. Die wahrscheinlichsten habe ich schon im Beispiel verwendet, alternativ können sie sämtliche Teile Ihrer Webseite einbinden.

2.3 – CSS-Styling

Die CSS-Anweisungen sind natürlich abhängig von dem Layout welches Sie sich ausgedacht haben. In meinem Fall wollte ich einfach ein paar Zeilen untereinander. Auch die Ausgabe der letzten Posts nicht als Liste, sondern in einer Zeile.

3. Implementierung in das CMS-System

Was müssen wir tun um das ganze im CMS-System zum laufen zu bringen? Nichts! Einfach die Dateien header-404.php, die 404.php und (falls geändert) die style.css in das Verzeichnis Ihres Templates laden. WordPress erkennt die 404.Datei automatisch. Da die anderen beiden Dateien über die 404-Datei integriert werden ist da auch keine Nacharbeit notwendig.

4. Testphase sämtlicher Funktionen

Gehen Sie jede Kontaktmöglichkeit komplett durch! Testen Sie alle Möglichkeiten die der Nutzer auf der 404-Seite hat. Testen Sie ob z.B. E-Mails ankommen, testen Sie ob die Suche korrekt arbeitet, usw. Hier sollten Sie nicht zu wenig Zeit investieren, dies dankt Ihnen der verirrte Nutzer.

Ergebnis:

So sieht meine 404-Seite aus, ich hoffe der Artikel war verständlich und es folgt die eine oder andere Fehlerseite.

Skizze Architekt

Skizze für ein Wandbild, welches anschließend auch umgesetzt wurde. Die Szene sollte einen Architekten zeigen, im Gespräche mit seinen Kunden. Der Entwurf wurde mit Adobe Photoshop gezeichnet und anschließend mit einem Projektor an die entsprechende Wand geworfen.

Vorschau:

architekt