Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Créer un page d'erreur 404 personalisée

Rédigé par Stéphane 3 commentaires

La page d'erreur par défaut lorsqu'une erreur se produit est affichée grâce au fichier erreur.php stocké dans le dossier du thème.

Avec le thème par défaut la page affichée ressemble à ça:

Avec les outils d'analyses disponibles avec les navigateurs, on peut voir dans l'entête du fichier l'erreur 404 Not Found générée.

Pour afficher notre nouvelle page d'erreur avec un gros 404 au milieu, éditez le fichier erreur.php de votre thème et remplacer tout son contenu par le code suivant:


<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
<html lang="<?php $plxShow->defaultLang() ?>">
<head>
<meta charset="<?php $plxShow->charset('min'); ?>">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title><?php $plxShow->pageTitle(); ?></title>
<?php $plxShow->meta('description') ?>
<?php $plxShow->meta('keywords') ?>
<?php $plxShow->meta('author') ?>
<link rel="icon" href="http://pluxopolis.net/<?php $plxShow->template(); ?>/img/favicon.png" />
<style>
body {
	font: normal 13px/20px Arial, Helvetica, sans-serif;
	color: #969696;
	margin: 0;
	background-color: #fff;
}
.error-center {
	width: 800px;
	margin-left: -400px;
	position: absolute;
	top: 30%;
	left: 50%;
	text-align: center;
}
.error-404 {
	margin: 0;
	font-size: 200px;
	line-height: 200px;
	font-weight: bold;
}
.error-404 span {
	text-shadow: 1px 5px 7px rgba(150, 150, 150, 1);
}
h1, h2 {
	color: #616161;
}
h2 {
	font-size: 24px;
	line-height: 24px;
}
</style>

</head>

<body id="top">

<div class="error-center">

	<h1 class="error-404">
		<span>404</span>
	</h1>
	
	<h2 class="title">Page non trouvée</h2>
	<p class="message">
		La page que vous avez demandée n'existe pas.
		<br />
		<a href="javascript:history.go(-1)">Retour</a> ou accueil <?php $plxShow->mainTitle('link'); ?>
	</p>
</div>

</body>

</html>

Nous avons ici épuré le contenu de la page par défaut pour ne garder que le strict minimum.

Le chargement des feuilles de style du thème a été supprimé pour utiliser à la place le code css nécessaire écrit entre les balises <style> et </style>.

Il ne vous reste plus qu'à imaginer vos propres pages d'erreur 404 et adapter le code en remplaçant votre code css et le contenu de la page entre les balises <body> et </body>.

3 commentaires

#1  - la tchateuse a dit :

Il est très pédagogue ton article !

Cela m'a permis de changer ma 404 très rapidement ! Quelqu'un a d'autres exemples de pages 404 fun ?

Répondre
#2  - jerrywham a dit :

Il y a plein de sites qui recensent ce type de page :
http://www.bonjour404.fr/

http://www.topito.com/top-10-des-pages-derreur-404-les-plus-originales

http://www.linternaute.com/homme/loisirs/erreurs-404-pages-droles

http://www.blogduwebdesign.com/webdesign-inspiration/20-pages-404-not-found-avec-un-web-design-original/449

http://www.marevueweb.com/inspiration-web/page-erreur-404/

Une petite recherche t'en donnera plein d'autres...

Répondre
#3  - ektor a dit :

Une super astuce, qui fonctionne encore très bien.
En fait on recrée toute une page HTML, sans vraiment utiliser PluXml pour l'affichage ? On l'utilise seulement pour les balises metas ?

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la cinquième lettre du mot ghxohy ?
Top