Créer un page d'erreur 404 personalisée
Rédigé par jack le 3 commentairese
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="https://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>.
DClassé dans : PluXml ,Mots clés : Css, PluXml, Thème, Erreur
A propos de l'auteur, jack:
Webmestre de PluXopolis de 2018 à Avril 2023.
3 commentaires
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...
ektor a dit : #3
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 ?
rFil RSS des commentaires de cet article
Les commentaires sont fermés.
la tchateuse a dit : #1