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.
Dans cet article
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.
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.
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.
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.
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).
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.
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 :
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 !
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.
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 ?
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".
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 !
Bonsoir,
Je voulais installer la version gratuite du coming soon de seed prod mais j’ai l’impression qu’elle est désormais payante. De plus wordpress me demande toujours de passer à la version business pour ajouter des extensions…
The Real Person!
The Real Person!
Bonjour, le plugin n’est pas payant, il y a toujours une version gratuite et une version payante pour ceux qui veulent plus de fonctionnalités. Il n’est pas possible d’installer des plugins sur WordPress.com, vous devez utiliser WordPress.org (cf ici la différence entre les deux versions).
Bonsoir ! Un grand merci pour cet article très fourni et clair ! J’ai installé le plugin, bien pratique, mais me demandais si, une fois le site lancé, il était possible d’appliquer la page « coming soon » à une seule page du site web (et non le site web en entier), page qui ne serait pas finie. Si oui, comment faire ?
En vous remerciant par avance !
The Real Person!
The Real Person!
Hello, s’il n’y a qu’une page concernée, pourquoi ne pas simplement la laisser en brouillon ? Ça permet quand même de la prévisualiser, de travailler dessus sans pour autant la mettre en ligne. La version payante du plugin Coming Soon & Maintenance Mode de Seedprod est censée permettre un contrôle granulaire par URL mais je n’ai pas testé pour ma part.
Bonjour Marlène! Avant tout merci pour ton site et tous ces articles que je prends plaisir à lire les uns après les autres! C’est une vrai mine d’or pour une novice comme moi! J’ai une question car je mets en place ma page coming soon et je souhaiterais y ajouter l’option email pour s’inscrire à la newsletter. J’ai donc copié à la suite de mon texte le short code fourni par Mail Poet mais ça ne fonctionne pas. A la place je vois le short code écrit. Je pense qu’en bonne débutante j’ai oublié quelque chose… mais quoi ? Pourrais-tu m’aider ?
Merci encore et continue! Tes articles sont géniaux!
The Real Person!
The Real Person!
Hello, merci pour ton message ! Essaie de copier le code en mode « éditeur HTML » au lieu de l’éditeur visuel.
Bonjour Marlène! Oui en effet j’ai essayé également mais c’est le texte du code qui s’affiche… par contre quand je copie ce code dans un article par exemple, cela fonctionne très bien. Mais sur la page « coming soon » non… là je sèche un peu!
si tu as des pistes je suis preneuse ;)
merci pour ton aide!
The Real Person!
The Real Person!
Ah je n’avais pas tout compris, je pensais qu’un shortcode copié dans une page classique ne fonctionnait pas. Sur le plugin, les shortcodes ne sont pris en charge que dans la version pro (payante), pas dans la version gratuite. La version gratuite prend en charge le HTML donc si MailPoet te fournit un code HTML utilisable à la place du shortcode, ça devrait fonctionner.
Super! oui en effet ça marche! J’ai sélectionné la version « iFrame » et ça fonctionne. Merci beaucoup :)
Marlène,
Merci pour ces outils que tu nous présentes.
Il va mettre utile celui-ci.
Douce journée,
Lili
The Real Person!
The Real Person!
Tant mieux, merci pour ton petit message et bon dimanche !
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
The Real Person!
The Real Person!
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é.
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 !
The Real Person!
The Real Person!
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.
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 ^^
The Real Person!
The Real Person!
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…
C’est déjà fait :(
À 3 reprises mais rien n’y fait …
The Real Person!
The Real Person!
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.
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
The Real Person!
The Real Person!
Merci Yousra, je vous souhaite aussi une très belle année 2018 ! Quel était le problème avec le plugin au final ?
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 ?
The Real Person!
The Real Person!
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.
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
The Real Person!
The Real Person!
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.
Oui, je parle en effet de ce qui apparaît sur Google. C’est donc normal et ça prend un peu de temps ?
The Real Person!
The Real Person!
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 !
Merci beaucoup !
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
The Real Person!
The Real Person!
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.
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.
The Real Person!
The Real Person!
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 !).
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 !
Félicitation pour votre site et l’aide apportée.
The Real Person!
The Real Person!
Merci beaucoup pour le petit message ;)
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 !
The Real Person!
The Real Person!
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.
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!
The Real Person!
The Real Person!
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 !
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 :)
The Real Person!
The Real Person!
Merci pour tes compliments et contente de t’avoir été utile :)
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 :)
The Real Person!
The Real Person!
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.