Publié par le 24 juillet 2014 • 200 Commentaires

Lorsque l’on travaille au lancement d’un site, il n’est pas souhaitable que n’importe qui vienne voir ce qu’il se passe.

Pendant cette période, on expérimente, on teste des plugins, on rédige ses textes etc. Bref, la mayonnaise n’est pas encore prête et cela ne sert à rien de la goûter pour l’instant.

Pour garder un peu d’intimité, vous pouvez installer votre site en local mais ensuite vous allez devoir procéder à une migration (ce qui n’est pas toujours facile) ou alors utiliser un plugin de maintenance.

Dans ces plugins de maintenance, il y a deux politiques. La première est de simplement rendre votre site privé comme le plugin Private WP 2. La seconde est de rendre votre site privé ET d’afficher une page d’attente à vos visiteurs.

Selon votre projet, l’un ou l’autre sera plus où moins adapté mais je pense que dans la majorité des cas, la seconde solution est la plus intéressante.

C’est ici que le plugin WP Maintenance de Florent Maillefaud entre en scène 🙂

Avec ce plugin vous pourrez créer une page d’attente personnalisée en attendant que votre site soit mis en ligne. Ce plugin peut aussi être utile en cas de maintenance temporaire de votre site.

Info : Si des problèmes se produisent avec ce plugin, essayez plutôt avec WP Maintenance Mode.

Je laisse maintenant la parole à Florent qui va nous détailler le fonctionnement de son plugin.

L’idée de créer ce plugin résulte d’une recherche infructueuse d’un plugin de maintenance simple, gratuit, disponible en français et sans publicités.

Une fois que le plugin sera installé et activé sur votre site, rendez-vous dans Réglages -> WP Maintenance pour trouver la page de configuration.

Nous allons voir onglet par onglet à quoi correspondent les différentes options.

Sommaire

  1. Onglet Général
  2. Onglet Couleurs
  3. Onglet Image
  4. Onglet Compte à rebours
  5. Onglet Style CSS
  6. Onglet Réglages

Onglet Général

Nous trouverons dans cet onglet les réglages principaux :

Activer le mode maintenance : rien de plus simple pour activer ou désactiver le mode maintenance de votre site.

Attention tout de même si vous utilisez un plugin de mise en cache de vos pages, la page de maintenance sera mise en cache et vous serez toujours en mode maintenance même si vous désactivez le mode.

Note d’Alex : N’activez votre plugin de cache uniquement à la fin de la configuration de votre site. Idéalement après avoir désactivé le mode maintenance.

Titre et Texte de la page maintenance : c’est ici que vous mettrez votre texte d’attente « Site en maintenance ! ». Le texte du titre sera en H3 tandis que le texte sera sur une balise de paragraphe.

Texte du bas de page : Possibilité de mettre aussi un texte dans le bas de la page (cela concerne généralement le droit d’auteur).

Activer Google Analytics : Il est prévu de suivre vos visiteurs sur votre page de maintenance grâce au code de suivi Universal Analytics. Il suffit de cocher « oui », de rentrer votre ID de suivi et de vérifier le nom de domaine (il est récupéré automatiquement).

Option général

Activer les icônes des réseaux sociaux : En attendant que votre site soit en ligne, vos visiteurs peuvent vous suivre sur les réseaux sociaux. Indiquez l’URL vous concernant pour chaque réseau social.

Vous pouvez aussi modifier l’ordre d’apparition des logos en faisant un glisser / déposer et choisir la taille des icônes de 16px à 128px ou même indiquer un dossier avec vos propres icônes. Naturellement, il vous faudra respecter le nom de chaque image.

Option des réseaux sociaux

Activer l’encart de newletter : Vous pouvez intégrer un encart pour que vos visiteurs puissent s’y abonner. Il suffit de rentrer à cet endroit le shortcode prévu en général par le plugin de votre newletter.

Onglet Couleurs

Un onglet classique pour le choix des couleurs et des textes via un sélecteur de couleurs :

Choix des couleurs des textes : les couleurs du fond de votre page et la couleur du texte.

Notez que pour la couleur du fond de page, même si vous choisissez un pattern dans l’onglet Image, la couleur définie ici sera et restera en fond.

Choix des couleurs du compte à rebours : définissez la couleur du texte du compteur et éventuellement d’un fond.

Choix des couleurs du bas de page : pour l’encart en bas de page une couleur de texte et de fond.

Option des couleurs

Onglet Image

Dans cette partie, nous pouvons définir l’image d’en-tête (votre logo ou autre chose) et l’image de fond de page (ou un pattern).

Pour l’image d’en-tête : il suffit d’envoyer ou sélectionner une image via WordPress. Sauvegardez ces paramètres, votre image sera envoyée et un aperçu vous sera donné. Une image par défaut sera présente si vous n’en avez pas définie.

Activer l’image de fond : de la même manière que l’image d’en-tête, vous pouvez définir une image d’arrière plan. Cocher cette case si vous souhaitez utiliser une image de fond ou un pattern (un motif).

À la place d’une image de fond, vous pouvez choisir un pattern parmi les 12 exemples fournis. Pour cela, il vous suffit de ne rien mettre dans l'emplacement dédié à l’image et de cocher le pattern de votre choix. Gardez bien la case « Activer l’image de fond » cochée.

Que cela soit pour l’image de fond ou le pattern, vous avez aussi les options repeat, no-repeat, etc… ainsi que de mettre votre image en mode fixe (pour l'empêcher de défiler).

Option des images

Onglet Compte à rebours

Ajouter un compte à rebours sur votre page d’attente est aussi simple que le reste.

Activer le compte à rebours : Il suffit de cocher cette case pour activer l’option. Entrer ensuite la date de lancement à la minute près.

Afficher les secondes : Cochez cette case si vous souhaitez aussi afficher les secondes.

Désactiver le mode maintenance à la fin du compte à rebours : Cochez cette case pour désactiver le mode maintenance automatiquement une fois que l’échéance sera atteinte.

Message de fin : Affiche un message de fin, par exemple : « Lancement imminent », au cas où il vous manque encore un peu de temps.

Taille de la police : Défini la taille de la police du compte à rebours allant de 18px à 76px.

Option du compte à rebours

Onglet Style CSS

Si vous connaissez un peu le langage CSS, il est possible d’éditer quasiment tout le code CSS de votre page de maintenance.

Vous pouvez modifier ce que vous voulez tout en gardant les différents couleurs définies dans l’onglet couleurs, et ce, avec des marqueurs :

#_COLORTXT : Utiliser ce code pour la couleur du texte
#_COLORBG : Utiliser ce code pour la couleur de fond du texte
#_COLORCPTBG : Utiliser ce code pour la couleur du fond du compte à rebours
#_DATESIZE : Utiliser ce code pour la taille du compte à rebours
#_COLORCPT : Utiliser ce code pour la couleur du texte du compte à rebours

Une erreur ? Vous avez tout cassé ? Pas de problème, l’option de récupération est là 🙂

Il suffit de cocher « Réinitialiser » et « Sauvegarder ces paramètres » pour remettre le style par défaut.

Option Style CSS

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

L’onglet Réglages

Page maintenance du thème : Vous pouvez aussi ne pas utiliser la page générée par le plugin, mais celle de votre thème, plus adaptée au style du site. Il faut juste qu’elle se nomme maintenance.php

Si vous en avez une, cochez sur oui.

Deux shortcodes sont également disponibles pour inclure les éléments suivants sur la page maintenance.php de votre thème :

  • Google Analytics : do_shortcode(‘[wpm_analytics’]);
  • Icônes des réseaux sociaux : do_shortcode(‘[wpm_social]’);

Note : Ces éléments doivent bien sûr avoir été configurés auparavant.

Rôles et capacités : définit qui peut accéder au site même en mode maintenance. Il suffit que cocher les cases correspondantes. Par exemple, si vous souhaitez que tous les auteurs accèdent au site, cochez « Auteur ». Cela prend aussi les rôles que vous auriez pu créer.

Réglages WP Maintenance

Conclusion

Grâce à Florent vous savez désormais qu’il est possible de créer une belle page d’attente (ou de maintenance) pour votre site et surtout comment le faire.

Vos visiteurs ne tomberont pas sur le formulaire de connexion à WordPress mais auront la possibilité de commencer à nouer une relation avec vous (que ce soit par l’inscription à une newsletter ou en vous suivant sur les réseaux sociaux).

De plus, cela me fait plaisir de mettre des auteurs de plugins français en avant. Cocorico !

Finissons sur une petite question, comptez-vous utiliser WP Maintenance pour votre site ? Quelque soit la réponse, dîtes-nous pourquoi =)

N’hésitez pas à donner des pistes d’améliorations à Florent, cela l’aidera à réaliser un plugin encore plus performant.