Créateur de thèmes WordPress :: Formateur :: Web Designer

WordPress :: Création d’une page maintenance personnalisée

Publié le : 

Modifié le : 

Par : 

Dans ce tutoriel, je me concentrerai sur une page de maintenance sur mesure sans plugin. Cette page maintenance se déclenche au moment de la mise à jour de WordPress ou de certains plugins.

Mode Maintenance par défaut

Un fichier masqué .maintenance va se créer à la racine de votre serveur. Par défaut, cela ressemble à cette capture:

Capture: Affichage normal du mode Maintenance dans WordPress

D’ailleurs, si une mise à jour s’était mal passée et que le mode maintenance persiste, il suffit de supprimer manuellement avec un client FTP ce fichier masqué pour que votre site reviennent dans l’ordre. La plupart de ces logiciels permettent l’affichage des fichiers masqués.

Création du fichier de maintenance

Voici le fichier qui me sert de base pour le modèle de maintenance. Avec un client FTP, le fichier devra être placé à la racine de votre dossier wp-content et avoir le nom maintenance.php.

https://gist.github.com/gregoirenoyelle/06845ad167b16468f9db#file-wp_temp_maintenance_base-php

Si le code ne s’afficha pas, voici la version en ligne.

Je vais maintenant détailler quelques parties importantes du modèle.

Fonction PHP pour les moteurs de recherche

Les premières fonctions permettent d’ajouter les header adaptés pour informer les moteurs de recherche de l’indisponibilité temporaire.

Mise en page de la page

Le CSS est ajouté directement dans la page dans le head de la page. Vous pourriez bien sûr importer une feuille de styles qui serait accessible depuis une url classique. Du coup vous pourriez envisager une base de css commune à ces pages de maintenance et les css propres au projet se trouveraient dans le head comme décrit précédemment.

Dans le modèle actuel, j’ai utilisé cette méthode pour importer les styles d’une typographie Google. La feuille de style est en ligne. Cela donne:

<link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>

Les images utiles pour votre page peuvent être placées dans le fichier wp-content en utilisant votre gestionnaire de Média. Ou encore n’importe où en ligne. Dans tous les cas, Il s’agit alors d’obtenir l’adresse web publique du fichier ou URL. Dans le cas d’un fichier ajouté aux médias de WorPress, c’est à droite quand vous ouvrez le média et non l’adresse de la page du fichier, similaire à un article.
Par exemple, l’URL complète d’une image donne dans mon cas

https://www.gregoirenoyelle.com/wp-content/uploads/2014/03/maintenance-mode-new-1.jpg

Téléchargement du modèle de maintenance

Voici le fichier complet, il s’agira pour vous de modifier le texte et d’ajouter des images si vous le souhaitez. Le résultat de ce modèle ressemble à cette capture d’écran:

Capture: Nouveau modèle de Maintenance pour WordPress

Liens

Tutoriels en anglais

Tutoriels en français

Documentation

11 réponses

  1. Henriques

    Merci Grégoire !

  2. […] Dans ce tutoriel, je me concentrerai sur une page de maintenance sur mesure sans plugin. Cette page maintenance se déclenche au moment de la mise à jour de WordPress ou de certains plugins. Mode Ma…  […]

  3. […] La page de maintenance par défaut de WordPress est triste à souhait ! Personnalisez-la grâce à Grégoire. […]

  4. Ha, bien vu, j’aurais appris quelque chose aujourd’hui !

    Merci 🙂

    1. Merci Greg. De ta part, ça me touche 🙂

    2. Rhô, je vais passer pour un vieil aigris ! Ho, wait! XD
      Et puis ici c’est l’un des quelques endroits où j’apprends le plus de choses sur WordPress. Par exemple avec ACF et Genesis : bon, je les utilise pas, du coup j’apprendrais certainement des trucs ^^’ ok je sors => []

  5. Stylé, merci beaucoup 😉 si tu veut regardé ce que j’en n’est fait => Vobba.fr ^^ J’ai que 15 ans.

  6. […] vous n’avez pas froid aux yeux, jetez un oeil à ce tutoriel, créé par Grégoire Noyelle, très impliqué dans la communauté […]

  7. […] vous n’avez pas froid aux yeux, jetez un oeil à ce tutoriel, créé par Grégoire Noyelle, très impliqué dans la communauté WordPress […]

  8. Fred

    Bonjour, très facile de personnaliser une page maintenance sur cette base, merci pour ça !
    mais, je comprends pas bien comment s’en servir. La seule chose que je capte c’est qu’il faut le mettre dans le dossier wp-content. Mais, ce fichier doit-il avoir un nom particulier ? Que faut-il faire pour que wordpress utilise ce fichier quand il passe automatiquement en mode maintenance lors d’une update de plugin par exemple ? Plus généralement, comment est-il appelé ?
    Merci d’avance pour des précisions là-dessus…

    1. Bonjour,
      Oui l’emplacement et le nom du fichier sont importants pour que WordPress l’utilise par défaut.