401, 403 und 404 - wir sind alle mindestens einmal in unserem Leben auf diese HTTP-Statuscodes gestoßen, während wir das World Wide Web erkundet haben. Wie fühlen Sie sich, wenn diese Fehlerseiten auftauchen, anstatt das, wonach Sie suchen?

Nicht zu finden, wonach Sie suchen, ist mehr als frustrierend. Daher müssen diese Seiten so wenig frustrierend wie möglich gestaltet werden, um die anfängliche Enttäuschung auszugleichen und die Benutzer zum weiteren Durchsuchen der Website zu ermutigen.

Während Fehlerseiten standardmäßig beim Erstellen einer Website enthalten sind, lautet die eigentliche Frage: Sollten wir sie einfach und ungestaltet lassen, oder sollten wir versuchen, die Benutzererfahrung mit ihnen interessanter zu gestalten?

Während des DrupalCamp London habe ich festgestellt, dass viele Entwickler vor der Herausforderung stehen, diese Seiten zu erstellen und anzupassen. Alles beginnt damit, dass Designer versuchen, alles ansprechend und stressfrei zu gestalten. Dann arbeiten die Entwickler daran, diese Designs zu individualisieren und zum Leben zu erwecken.

Nach meiner Erfahrung sollten Sie sie nicht einfach "sein lassen". Diese Seiten können kleine, skurrile Elemente enthalten, die den Benutzern helfen, zu vergessen, dass sie nicht das erwartete Ergebnis erhalten haben - um den Fehler zu vergessen und zu verzeihen.

Fast alle meine bisherigen Projekte hatten gestaltete Fehlerseiten. Ich fühle mich dafür verantwortlich, Designs für diese Seiten anzufordern, wann immer sie übersehen werden könnten.

So passen Sie Fehlerseiten in Drupal an

Betrachten wir die verschiedenen verfügbaren Methoden:

Vorgehensweise bei Drupal 7

In Drupal 7 haben Sie zwei Hauptansätze:

Verwendung der generischen Fehler-Vorlage:

// page--error.tpl.php
<div class="error-page">
 <?php if ($messages): ?>
   <div class="messages">
     <?php print $messages; ?>
   </div>
 <?php endif; ?>
 
 <div class="error-content">
   <?php print render($page['content']); ?>
 </div>
</div>

2. Erstellen spezifischer Vorlagen für jeden Fehlertyp mit einem Hook in Ihrem Theme:

// template.php
function YOURTHEME_preprocess_page(&$variables) {
 // Get the current HTTP status code
 $status = drupal_get_http_header("status");
 
 if ($status == "404 Not Found") {
   // Create template suggestion for 404
   $variables['theme_hook_suggestions'][] = 'page__404';
 }
 elseif ($status == "403 Forbidden") {
   // Create template suggestion for 403
   $variables['theme_hook_suggestions'][] = 'page__403';
 }
 elseif ($status == "401 Unauthorized") {
   // Create template suggestion for 401
   $variables['theme_hook_suggestions'][] = 'page__401';
 }
}

Dann erstellen Sie spezifische Vorlagendateien:

// page--404.tpl.php
<div class="error-404">
 <h1>Seite nicht gefunden</h1>
 <p>Leider konnte die Seite, nach der Sie gesucht haben, nicht gefunden werden.</p>
 <?php print theme('search_block_form'); // Optional: Add a search form ?>
</div>

// page--403.tpl.php
<div class="error-403">
 <h1>Zugriff verweigert</h1>
 <p>Sie haben keine Berechtigung, auf diese Seite zuzugreifen.</p>
 <?php if (!$logged_in): ?>
   <?php print drupal_render(drupal_get_form('user_login_block')); ?>
 <?php endif; ?>
</div>

Dann können Sie diese Vorlagen mit dem CSS Ihres Themes gestalten:

.error-404, .error-403 {
 text-align: center;
 padding: 50px 20px;
 max-width: 600px;
 margin: 0 auto;
}
.error-404 h1, .error-403 h1 {
 font-size: 48px;
 color: #e74c3c;
 margin-bottom: 20px;
}
.error-404 p, .error-403 p {
 font-size: 18px;
 line-height: 1.6;
 color: #555;
}

Durch die Implementierung dieser Anpassungen können Sie Fehlerseiten erstellen, die den Benutzern nicht nur mitteilen, was schief gelaufen ist, sondern auch eine bessere Benutzererfahrung mit hilfreichen Optionen wie Suchfunktionen oder Anmeldeformularen bieten, wenn dies angebracht ist.

Vergessen Sie nicht, den Cache Ihres Theme-Registers zu löschen, nachdem Sie neue Vorlagendateien hinzugefügt haben, damit Drupal sie in der Bash erkennt

drush cc all