Comment créer une page Coming soon ou une page de maintenance sur WordPress ?


Aujourd’hui, je vous propose de découvrir un plugin WordPress très utile si vous avez besoin de mettre votre blog en maintenance ou si vous préparez le lancement de votre futur blog. Il s’agit de Coming Soon Page & Maintenance Mode. Je vais également vous faire découvrir une alternative, le plugin « Maintenance ».

Ces extensions vont créer une page entièrement personnalisable qui sera affichée aux visiteurs du site pendant que vous travaillez dessus. En tant qu’administrateur, vous pourrez continuer à visiter votre blog normalement sans voir la page de maintenance.

Blog en chantier : créez une page Coming Soon ou une page de maintenance !
Blog en chantier : créez une page Coming Soon ou une page de maintenance !

A quoi sert une page Coming Soon ou une page de maintenance ?

Ce type de plugin est particulièrement pratique…

  • Quand vous voulez commencer à promouvoir votre blog avant son lancement : vous pouvez déjà recueillir des abonnés à votre newsletter, créer des liens vers votre blog alors qu’il n’existe pas encore. Les visiteurs tomberont sur une page Coming Soon esthétique.
  • Quand vous souhaitez réaliser tranquillement des mises à jour : il est parfois difficile de laisser son blog ouvert au public quand on effectue une très grosse mise à jour, le plugin de maintenance permet alors de fermer temporairement son blog pour travailler sans pression.
  • Quand vous souhaitez communiquer avec vos lecteurs sur une maintenance en cours : la vie d’un blog peut être ponctuée de grands changements, par exemple la mise en place d’un nouveau thème, d’une nouvelle page d’accueil ou la réorganisation des contenus. Grâce à un plugin de maintenance, vous pouvez informer les visiteurs en temps réel.

Installer le plugin Coming Soon Page & Maintenance Mode

Allez dans le menu Extensions > Ajouter de votre blog WordPress et recherchez le plugin Coming Soon Page & Maintenance Mode by SeedProd. À l’heure où j’écris l’article, il a été installé sur plus de 300 000 blogs et recueille une note de 5/5.

Vous pouvez ensuite l’activer. Le fait d’activer le plugin ne met pas automatiquement le blog en maintenance donc vous pouvez faire vos réglages en toute tranquillité avant d’activer le mode maintenance proprement dit.

Vous pouvez à tout instant retrouver la rubrique de paramétrage du plugin depuis le menu Réglages > Page Coming Soon & Mode Maintenance de votre blog WordPress.

Activer le plugin Coming Soon Page & Maintenance Mode
Activer le plugin Coming Soon Page & Maintenance Mode

La version gratuite du plugin comporte quatre onglets, le quatrième permettant d’obtenir un aperçu de votre page de maintenance.

L’onglet Contenu

Comme son nom l’indique, il vous permet de définir le contenu de votre page de maintenance. Vous pouvez d’abord choisir entre le mode « Coming Soon » et le mode « Maintenance ».

Dans le premier cas, ça va permettre au moteur de recherche de repérer votre site même s’il n’est pas encore ouvert au public. Dans le second cas, ça signalera au moteur de recherche que votre site est temporairement indisponible, ce qui est le cas lors d’une opération de maintenance.

Activer le plugin
Activer le plugin

Plus bas, vous pouvez afficher un logo, un texte d’entête qui apparaîtra comme gros titre de la page et un message. Vous pouvez personnaliser le code de ce message pour y inclure les éléments de votre choix. Par exemple, avant l’ouverture de mon blog voyage, j’avais mis le formulaire d’inscription à ma newsletter à cet endroit.

Vous pouvez aussi définir si vous affichez les crédits du créateur du plugin ou pas.

Contenu de la page Coming Soon
Contenu de la page Coming Soon

Toujours dans cet onglet contenu, vous disposez d’options complémentaires : définir la favicon de la page maintenance, qui s’affichera dans l’onglet du navigateur ; définir le titre et la méta description qui s’afficheront dans les résultats de recherche Google ; entrer un code Google Analytics afin de suivre le trafic sur votre page d’attente ou de maintenance.

Options de la page de maintenance
Options de la page de maintenance

L’onglet Design

Il vous permet de définir l’apparence de votre page Coming Soon ou de maintenance. Le plugin étant entièrement traduit en français, les options sont plutôt faciles à prendre en main. Vous pouvez choisir une couleur d’arrière-plan, importer une image, faire en sorte qu’elle soit responsive pour un affichage optimal sur les mobiles et tablettes, assombrir légèrement l’arrière-plan pour que le texte ressorte mieux ou encore définir de manière très précise la position de l’arrière-plan (fixe ou pas, centré ou pas, etc).

Apparence de la page de maintenance
Apparence de la page de maintenance

Par défaut, le contenu ne s’affiche pas sur toute la largeur de la page mais sur une largeur maximale de 600 pixels quand le lecteur est sur un ordinateur. Si vous voulez modifier cette valeur par défaut, c’est possible.

Enfin, vous pouvez choisir les couleurs du texte, des liens, du gros titre de la page ou encore la police d’écriture et entrer du code CSS personnalisé pour un paramétrage encore plus fin du rendu de votre page. Je précise au passage que les polices d’écriture proposées sur la version gratuite sont des polices Web de base sans particularité (ce ne sont pas des polices Google par exemple).

L’onglet Avancé

Il vous offre des options complémentaires destinées aux utilisateurs experts.

Vous pouvez par exemple charger des scripts dans le header ou dans le pied de page du site ou encore créer votre propre code HTML pour remplacer le code par défaut de la page. Dans mon cas, comme la page Coming soon du blog comportait le formulaire d’inscription à la newsletter, j’avais ajouté dans l’en-tête de la page les scripts permettant à la newsletter de fonctionner.

L'onglet Avancé du plugin de maintenance
L’onglet Avancé du plugin de maintenance

Informations utiles

Une fois que vous avez fait tous vos réglages, vous pouvez cliquer sur l’onglet « Aperçu » pour visualiser la page. La mienne était assez simple :

Page Coming Soon sur le blog
Page Coming Soon sur le blog

Quand le mode Maintenance ou Coming soon est activé, les visiteurs du blog sont automatiquement dirigés vers cette page quand ils essaient de consulter vos contenus. Quant à vous, si vous êtes connecté à l’administration du blog, vous pouvez consulter le site de manière totalement normale.

Il faut néanmoins savoir que si vous utilisez un plugin de cache, il peut perturber l’affichage de la page de maintenance : soit vous allez voir la page de maintenance alors que vous êtes connecté à l’administration ; soit vos lecteurs vont continuer à voir votre site normalement alors qu’il est en mode maintenance. Dans ce cas, il suffit de désactiver temporairement le plugin de cache le temps d’effectuer votre opération de maintenance. Vous pourrez sans problème le réactiver à la fin.

N’oubliez pas de désactiver le mode Maintenance ou Coming Soon une fois que votre blog est fin prêt ! On a vite fait de l’oublier puisqu’en tant qu’administrateur, on peut consulter son blog normalement. Néanmoins, quand le blog est en maintenance, vous verrez un bouton rouge en haut à droite de l’administration histoire de vous rappeler que les internautes ne peuvent pas accéder à tout le contenu !

Mode Coming Soon activé
Mode Coming Soon activé

La version payante du plugin

Elle permet d’aller encore plus loin dans la personnalisation (elle intègre par exemple les Google Fonts), d’utiliser des slideshows ou un arrière-plan vidéo.

Elle propose des options beaucoup plus poussées pour la capture d’adresses e-mail, est compatible avec le plugin multilingue WPML et permet d’utiliser des shortcodes sur la page de maintenance, d’afficher une barre de progression ou un compteur…

Vous pouvez consulter un comparatif complet entre la version gratuite et la version payante sur le site de SeedProd.

Une alternative plus simple : le plugin Maintenance

Si vous cherchez une alternative au plugin Coming Soon Page & Maintenance Mode, vous pouvez essayer un plugin très sobrement baptisé « Maintenance ».

Commencez par l’installer grâce au menu Extensions > Ajouter.

Le plugin Maintenance sur WordPress
Le plugin Maintenance sur WordPress

Attention : quand vous activez le plugin pour la première fois, ça active souvent le mode « Maintenance » en même temps. Le plugin crée deux choses :

  • Un menu Maintenance dans la colonne de gauche qui vous donne accès à tous les réglages.
  • Un élément « Maintenance is Off/On » dans la barre en haut de votre administration WordPress.

Les options du plugin Maintenance

En cliquant sur le menu « Maintenance » dans la colonne de gauche, vous accédez à une multitude d’options. Le mode Maintenance s’active par un simple clic sur le gros bouton On/Off situé en haut de page.

Les textes

Vous pouvez d’abord définir les textes qui s’affichent sur la page de maintenance : « Titre de la page » correspond au titre de l’onglet. Vous pouvez ensuite choisir un gros titre pour la page (« Entête »), un texte d’information sur la maintenance en cours et un texte à indiquer dans le pied de page (« Pied de page »).

Ces champs peuvent être laissés vides mais je vous conseille d’indiquer au moins au visiteur pourquoi le site est indisponible, avec une indication sur la durée de la maintenance : quelques minutes, quelques heures, une journée entière ?

Le plugin Maintenance de WordPress - Texte

Les visuels

Le plugin vous permet ensuite de définir facilement l’apparence visuelle de la page de maintenance : ajouter un logo, une image de fond (format portrait et/ou format paysage) ou un fond de couleur, choisir la couleur et la police d’écriture de la page. Par ailleurs, si vous maîtrisez le langage CSS, vous pouvez un peu plus bas sur la page aller encore plus loin dans la personnalisation : il suffit de rentrer vos modifications dans le champ « Custom CSS ».

Le plugin Maintenance de WordPress - Visuels

Les paramètres

Le plugin Maintenance vous propose plusieurs paramètres :

  • Afficher la barre Admin – Si vous cochez cette case, vous verrez une barre « Maintenance » en haut de page sur la partie publique de votre site lorsque vous êtes connecté en tant qu’administrateur. Cette barre vous permet de voir à tout instant si votre blog est en maintenance ou pas quand vous naviguez dessus.
  • 503 – Vous pouvez cocher cette case pour signaler aux moteurs de recherche que l’indisponibilité de la page n’est que temporaire.
  • Google Analytics ID – Si vous voulez suivre les stats de consultation de votre page de maintenance sur Google Analytics, entrez juste votre identifiant Analytics ici.
  • Appliquer flou fond / Réglez l’intensité de flou – Si vous mettez une image de fond sur votre page de maintenance, le plugin peut la flouter automatiquement pour faire ressortir le texte écrit au premier plan. Il suffit de cocher la case « Appliquer flou fond » et de définir l’intensité du flou (de 1 à 5 par exemple).
  • Activer frontend connexion – Vous pouvez ajouter sur la page de maintenance un formulaire pour se connecter sur le blog. Dans la majorité des cas, ce n’est pas utile. Ça peut l’être si vous avez un espace membre sur votre blog et que vous voulez par exemple que les membres continuent à avoir accès au site pendant la maintenance, par opposition avec le visiteur lambda.

Enfin, tout en bas de la page de paramétrage du plugin, vous verrez un encart « Exclure les pages ». Par défaut, le mode maintenance s’applique à tout votre site… mais vous pouvez décider de laisser les visiteurs accéder à certaines pages ou articles. Par exemple, si la maintenance dure plusieurs jours, vous pouvez avoir envie de laisser les visiteurs accéder quand même à la page « Contact ». Il suffit d’indiquer dans cet encart le numéro de l’article ou de la page que vous autorisez les lecteurs à consulter.

Voilà, vous n’avez plus qu’à choisir quel plugin répond le mieux à vos attentes pour mettre un blog en maintenance ou créer une page Coming Soon !

Racontez-moi ! Est-ce que vous avez ouvert votre blog tout de suite après l’installation ou est-ce que vous l’avez laissé en maintenance un moment avant de l’ouvrir au public ? Est-ce qu’il vous arrive de faire de grosses opérations de maintenance ?
Thèmes : Maintenance WordPress 

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

30 commentaires sur “Comment créer une page Coming soon ou une page de maintenance sur WordPress ?

  • Lili

    Marlène,

    Merci pour ces outils que tu nous présentes.
    Il va mettre utile celui-ci.
    Douce journée,
    Lili

    Répondre à Lili
  • Stef

    Bonsoir Marlène, merci beaucoup pour ces explications. Je travaille au lancement de mon blog et je rencontre 2 problèmes :
    1. je n’arrive pas à saisir de texte dans l’onglet contenu (même en mode texte), le curseur n’apparaît pas
    2. j’ai installé contactform 7 pour y insérer un formulaire d’inscription mais je ne vois pas comment l’intégrer dans cette page coming soon.

    Merci beaucoup de votre aide, Stef

    Répondre à Stef
    • Marlène

      Hello Stef, si le champ contenu ne fonctionne pas, c’est peut-être lié à une incompatibilité avec un autre plugin utilisé sur le blog.

      On peut intégrer un formulaire en passant cette zone contenu en mode HTML et en copiant le formulaire HTML dedans (le support des shortcodes n’est assuré que par la version pro du plugin). Sinon, on peut coder une page HTML sur mesure dans l’onglet « Avancé », au niveau du code HTML personnalisé.

      Répondre à Marlène
    • Stef

      Bonsoir Marlène et merci beaucoup pour ces précisions !! Tout est clair, c’était effectivement un plugin d’emojis qui posait problème. Pour le code HTML, je vais passer à la version Pro je pense, ne sachant pas coder…Merci encore !

      Répondre à Stef
    • Marlène

      En fait, ton plugin de formulaire de contact te fournit peut-être un code HTML « prêt à l’emploi » vérifie ce point… car si c’est le cas, tu as juste à copier-coller le code en question dans la zone de contenu.

      Répondre à Marlène
  • Yousra

    Bonjour,
    Merci beaucoup pour cet article qui est très clair et utile !
    J’ai juste un petit soucis au niveau des CSS et des JS qui ne sont pas chargés et je ne vois pas d’où ça vient …
    J’ai rajouté mon propre code html et css aussi dans l’onglet « avancé ».

    Pourriez-vous m’aider pour savoir d’où ça pourrait venir s’il vous plaît ?

    Merci par avance ^^

    Répondre à Yousra
    • Marlène

      Bonjour Yousra, peut-être une histoire de cache (l’ancienne version de la page « mise en mémoire », qui fait que les changements ne s’affichent pas). Ça vaut le coup d’essayer de vider le cache sur le navigateur…

      Répondre à Marlène
    • Yousra

      C’est déjà fait :(
      À 3 reprises mais rien n’y fait …

      Répondre à Yousra
    • Marlène

      Et contacter le créateur du plugin via le forum de support ? Il a l’air de répondre aux questions des internautes donc peut-être qu’on lui a déjà signalé le même problème.

      Répondre à Marlène
    • Yousra

      Problème réglé en contactant le créateur SeedProd qui est très réactif, d’une aide très précieuse et très gentil de surcroît !

      Merci à vous aussi pour votre aide et votre travail !

      Excellent fin d’année et meilleurs voeux

      Répondre à Yousra
    • Marlène

      Merci Yousra, je vous souhaite aussi une très belle année 2018 ! Quel était le problème avec le plugin au final ?

      Répondre à Marlène
  • Tatiana

    Bonjour,

    J’ai réussi et j’ai intégré ma newsletter avec mailchimp. Sauf que on ne peut pas valider notre inscription a la newsletter, il ne se passe rien. Je ne sais pas où se trouve le script, ni quoi faire, je sèche.

    Help ?

    Répondre à Tatiana
    • Marlène

      Bonjour Tatiana, les scripts éventuels sont à récupérer sur le site de MailChimp, rubrique Lists puis Signup Forms. Il y a toutes sortes de formulaires à disposition, dont les « Embedded forms ». On peut ensuite récupérer le code de ces formulaires pour l’insérer où on le souhaite (pop-up, page de maintenance, etc). Je ne sais pas comment tu as intégré ta newsletter à l’heure actuelle mais il manque peut-être une étape.

      Répondre à Marlène
  • Muriel

    Bonjour Marlène, j’espère qu’il n’est pas trop tard pour poser une question !
    J’ai utilisé le mode coming soon pour remettre à jour mon site internet.
    Maintenant qu’il est prêt, je l’ai désactivé, et le site est à nouveau en ligne. Cependant, tout le travail que j’ai fait pour le SEO n’apparait pas (le titre n’est pas le bon) et le texte que j’avais mis pour le coming soon apparaît toujours dans la méta description (alors qu’un autre texte est prévu). Vu le temps que j’y ai passé, ça me décourage un peu. Avez-vous un conseil à me donner ?
    Merci beaucoup
    Muriel

    Répondre à Muriel
    • Marlène

      Bonjour Muriel, vous parlez de ce qui apparaît sur Google ? Pour que les changements soient pris en compte il faut attendre que le moteur de recherche repasse sur la page concernée.

      Répondre à Marlène
    • Muriel

      Oui, je parle en effet de ce qui apparaît sur Google. C’est donc normal et ça prend un peu de temps ?

      Répondre à Muriel
    • Marlène

      Oui c’est normal, tout dépend de la fréquence à laquelle Google passe sur la page, ça peut prendre quelques heures comme quelques semaines !

      Répondre à Marlène
    • Muriel

      Merci beaucoup !

      Répondre à Muriel
  • Alexandra

    Bonjour Marlène,

    Merci beaucoup pour cet article très instructif. Je suis parvenue à créer ma page « Coming soon » en suivant ce pas à pas, mais je souhaiterais y ajouter un formulaire d’inscription comme dans ton modèle. Comment procéder, sachant que je suis ultra débutante ;-).
    Grand merci.

    Belle journée

    Répondre à Alexandra
    • Marlène

      Hello, je n’ai pas de mode d’emploi à te donner car le code n’est jamais le même d’un formulaire à l’autre, il faut simplement l’intégrer dans l’onglet Contenu en utilisant l’éditeur « Texte » à la place de l’éditeur visuel.

      Répondre à Marlène
    • GhjuliaMaria

      Bonjour Marlène,

      Dans le même contexte que Alexandra, je voulais savoir ou trouver le code d’un formulaire ? C’est un plugin ou ça se trouve ailleurs et il faut juste copier le code dans l’onglet texte ?!
      Merci d’avance.

      Répondre à GhjuliaMaria
    • Marlène

      Bonjour ! On peut soit le coder soi-même, soit le récupérer effectivement depuis un plugin (le choix du plugin dépendant de l’objectif du formulaire !).

      Répondre à Marlène
    • GhjuliaMaria

      Merci beaucoup !
      J’ai trouvé sur un autre de tes articles comment faire ce que je souhaitais !

      Merci beaucoup pour ton blog sans lequel en tant que grande débutante je serai totalement perdue !

      Répondre à GhjuliaMaria
  • idrisse

    Félicitation pour votre site et l’aide apportée.

    Répondre à idrisse
  • Paulino

    Je suis sur Blogger.
    1- J’aimerais demander comment l’activer sur blogger ?
    2- Jaimerais aussi demander comment ajouter « Related Post » à blogger. J’ai essayé en vain beaucoup d’articles. Merci ! Bien à vous !

    Répondre à Paulino
    • Marlène

      Bonjour, c’est un plugin WordPress donc il ne peut pas être utilisé sur Blogger. Blogger ne permet pas l’installation de plugins. Je n’ai pas en projet de proposer un tutoriel sur les articles similaires pour Blogger dans l’immédiat.

      Répondre à Marlène
  • Sarah Conte Philly

    C’est exactement le plugin que j’ai utilisé! Il offre vraiment beaucoup de personnalisation pour la page coming soon mais j’avoue que comme l’intérêt n’est pas de la garder pour toujours, je préfère passer moyennement de temps à la personnaliser!

    Répondre à Sarah
    • Marlène

      Ah ça, je pense que ça dépendra des blogs :) Ceux qui veulent vraiment créer une stratégie de lancement et récolter des abonnés à leur newsletter avant l’ouverture ont tout intérêt à y passer un peu de temps pour que ce soit efficace par exemple !

      Répondre à Marlène
  • Sabrina

    Je cherchais une solution simple pour mettre mon blog en maintenance sans passer par la restriction sur l’adresse IP. Comme d’habitude, j’ai trouvé une solution précise et bien expliquée chez toi. Merci beaucou :)

    Répondre à Sabrina
    • Marlène

      Merci pour tes compliments et contente de t’avoir été utile :)

      Répondre à Marlène
  • Mounia

    Merci beaucoup pour cet article que je trouve particulièrement utile. Je compte changer prochainement le design de mon blog et il arrive qu’il y ait de petits bugs et qu’il faille y passer plus de temps que prévu, un mode maintenance est donc indispensable. Merci beaucoup pour ce tutoriel :)

    Répondre à Mounia
    • Marlène

      C’est vrai que ça évite que les lecteurs voient toutes les « coulisses » de ces modifications techniques, ça laisse le temps de tester et de supprimer les éventuels bugs avant de mettre en ligne pour de bon.

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.