401, 403 și 404 - cu toții ne-am întâlnit cu aceste coduri de stare HTTP în explorarea noastră pe World Wide Web cel puțin o dată în viața noastră. Cum te simți când aceste pagini de eroare apar în locul a ceea ce căutai?

Să nu găsești ceea ce căutai este mai mult decât frustrant. Prin urmare, aceste pagini trebuie să fie cât mai puțin frustrante posibil pentru a compensa dezamăgirea inițială și pentru a încuraja utilizatorii să continue navigarea pe site.

Deși paginile de eroare sunt incluse în mod implicit la construirea unui site web, întrebarea reală este: ar trebui să le lăsăm simple și fără stil, sau ar trebui să încercăm să facem experiența utilizatorului cu ele mai angajantă?

În timpul DrupalCamp London, am descoperit că mulți dezvoltatori se confruntă cu provocarea de a crea și personaliza aceste pagini. Totul începe cu designerii care încearcă să facă totul angajant și fără stres. Apoi, dezvoltatorii lucrează pentru a personaliza și a aduce aceste designuri la viață.

Din experiența mea, nu ar trebui să le "lăsăm așa". Aceste pagini pot avea elemente mici și ciudate care ajută utilizatorii să uite că nu au obținut rezultatul așteptat - să uite și să ierte eroarea.

Aproape toate proiectele mele anterioare au avut pagini de eroare stilizate. Simt că este responsabilitatea mea să cer designuri pentru aceste pagini ori de câte ori ar putea fi trecute cu vederea.

Cum să personalizați paginile de eroare în Drupal

Să ne uităm la diferitele metode disponibile:

Abordarea Drupal 7

În Drupal 7, aveți două abordări principale:

Folosind șablonul de eroare generic:

// 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. Crearea de șabloane specifice pentru fiecare tip de eroare folosind un hook în tema dvs.:

// template.php
function YOURTHEME_preprocess_page(&$variables) {
 // Obțineți codul de stare HTTP curent
 $status = drupal_get_http_header("status");
 
 if ($status == "404 Not Found") {
   // Crează sugestie de șablon pentru 404
   $variables['theme_hook_suggestions'][] = 'page__404';
 }
 elseif ($status == "403 Forbidden") {
   // Crează sugestie de șablon pentru 403
   $variables['theme_hook_suggestions'][] = 'page__403';
 }
 elseif ($status == "401 Unauthorized") {
   // Crează sugestie de șablon pentru 401
   $variables['theme_hook_suggestions'][] = 'page__401';
 }
}

Apoi creați fișiere de șablon specifice:

// page--404.tpl.php
<div class="error-404">
 <h1>Pagina nu a fost găsită</h1>
 <p>Ne pare rău, dar pagina pe care o căutai nu a putut fi găsită.</p>
 <?php print theme('search_block_form'); // Opțional: Adăugați un formular de căutare ?>
</div>

// page--403.tpl.php
<div class="error-403">
 <h1>Acces interzis</h1>
 <p>Nu ai permisiunea de a accesa această pagină.</p>
 <?php if (!$logged_in): ?>
   <?php print drupal_render(drupal_get_form('user_login_block')); ?>
 <?php endif; ?>
</div>

Puteți apoi să stilizați aceste șabloane folosind CSS-ul temei dvs.:

.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;
}

Implementând aceste personalizări, puteți crea pagini de eroare care nu doar informează utilizatorii despre ce a mers prost, dar oferă și o experiență de utilizator mai bună cu opțiuni utile, cum ar fi funcționalitatea de căutare sau formularele de autentificare atunci când este cazul.

Amintiți-vă să goliți cache-ul registrului temei după adăugarea de noi fișiere de șablon pentru ca Drupal să le recunoască în bash

drush cc all