Personalizzare pagina errore 404 di Joomla!
Personalizzare pagina errore 404 di Joomla!
Extrowebsite

Tra personalizzazioni ed override che si possono mettere in pratica in Joomla!, oggi vedremo come apportare modifiche a quella di Errore 404 - Articolo non trovato.

La demo per l'articolo in oggetto è stata realizzata con la versione 3.7.3 di Joomla!

L'errore 404, Not Found in inglese, è un codice di stato del protocollo HTTP.

Tale errore sta ad indicare che il client è in grado di comunicare con il server ma questo non ha trovato, e restituito, la pagina che è stata richiesta, oppure il server è stato configurato in maniera tale da non completare la richiesta.

Spesso si confonde errore 404 con "server non trovato", dove è assolutamente impossibile stabilire la connessione con il server.

404 - Articolo non trovato in Joomla!

Quando Joomla! restituisce un errore 404, sin dalle prime versioni abbiamo sempre ottenuto come risposta la pagina come quella riportata nella seguente immagine:

Pagina standard  errore 404 di Joomla!
Pagina standard errore 404 di Joomla!

Non che la personalizzazione apporti qualche miglioria dal punto di vista SEO, però aggiungerci una immagine simpatica oppure una scritta divertente, non sarebbe del tutto sbagliato.

La pagina che genera l'errore 404 si chiama error.php e si trova nella seguente cartella:

/root-principale/templates/system

Si faccia una copia del file error.php e la si trasferisca via FTP nella seguente cartella:

/root-principale/templates/template-attivo

Nel mio caso, avendo realizzato la demo con il template "Protostar" il percorso è:

/root-principale/templates/protostar

Se provassimo volutamente a digitare una url inesistente, otterremmo come risposta la pagina come quella riportata di seguito:

Pagina errore 404 template Protostar di Joomla!
Pagina errore 404 template Protostar di Joomla!

Molto meglio rispetto a quella "standard", senza alcun dubbio. Ma se volessimo personalizzarla riportando immagini di sfondo, colore dei link, colore del testo, come quello del sito, è possibile farlo. Senza nessun problema.

Personalizzare la pagina error.php di Joomla!

Per la pagina di esempio, ho inserito un titolo H1, una immagine al centro della pagina ed un link che riporta alla home page del sito. Ovviamente non è l'unica personalizzazione. Si può aggiungere tutto quello che si vuole.

Trasferire la pagina error.php sul desktop ed aprirla con un editor di testo. Se mettere le mani tra le tante righe di codice sembra una impresa ardua, si può ovviare al problema creando da zero una nuova pagina. Quello che conta è che venga nominata sempre error.php.

Il codice HTML della mia pagina è il seguente:

<!DOCTYPE html>
<html lang="it-it">
<head>
<meta charset="utf-8" />
<title>Errore 404</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<!--[if lt IE 9]><script src="/media/jui/js/html5.js"></script><![endif]-->
</head>
<body>
<h1>Errore 404!!!</h1>
<img src="/templates/protostar/images/404.jpg" alt="" />
<p><a href="/">Torna alla Home</a></p>
</body>
</html>

Il codice CSS:

body {
margin:0;
padding:0;
font-family:sans-serif;
background: #eee;
color: #757575; 
}

img{
display:block;
margin: 0 auto 20px;
}

h1 {
font-size:5em;
text-align:center;
margin:0;
padding:0 0 20px;
}

p {
text-align:center;
margin:0;
padding:0;
font-size: 24px;
}

Il risultato è riportato nell'immagine seguente:

Override pagina errore 404 di Joomla!
Override pagina errore 404 di Joomla! - Fonte immagine: web