Publi√© par le 24 juillet 2014 ‚ÄĘ 196 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.