Une page en construction personnalisée sur WordPress

Souvent, quand on développe ou quand on met à jour un site WordPress, on souhaite y mettre une page en construction pour prévenir l’internaute. Plusieurs plugins existent, mais il est tellement plus simple et joli de la faire à la main.

Niveau : Débutant
Code : PHP, HTML

Pourquoi une page en construction ?

Dans le cas d’une création de site, la page en construction a plusieurs avantages :

Informer les internautes de la sortie prochaine du site.
Récupérer des contacts si l’on y met un formulaire.
Indexer le site auprès des moteurs de recherche le plus tôt possible.

Dans le cas d’une mise à jour, elle peut servir à :

Prévenir l’internaute (et auquel cas s’excuser des désagréments).
Bloquer l’accès au site.

Les plugins, avantages et inconvénients

Plusieurs plugins existent pour mettre un site WordPress en mode maintenance.
Certains proposent même quelques personnalisations (couleurs, typos, ajout d’un compte à rebours, …) mais si vous voulez faire les choses à la bien, ils restent assez limités :

Il est impossible de customiser à 100% le design.
Dans la mesure du possible, j’évite d’utiliser des plugins (sécurité, lourdeur).

Un template de page : LA solution

Mais alors comment faire pour avoir une page en construction ? Tout simplement en utilisant les template de page !
Notre démarche ici est simple :

1/ Je code ma page en construction normalement dans un page-maintenance.php (avec mes balises head, body, …).
On va partir du principe que votre page ressemble à ça :

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ma super page en constuction !</title>
</head>
<body>
	Mon super corps de page en construction !
</body>
</html>

2/ J’en fais un template de page pour WordPress.
Pour ce faire, j’ajoute ces lignes de code avant le doctype :

<?php 
/* Template Name: Construction */ 
?>

Le nom de votre template est défini par ce qui arrive après Template Name:, soit ici Construction.

3/ Je crée une nouvelle page dans mon interface WordPress en allant dans Pages / Ajouter.

Le menu d’ajout de page.

4/ Après l’avoir titrée, je lui donne notre template Construction via la liste déroulante Modèles dans les Attributs de la page.

La liste déroulante modèle de WordPress

5/ Maintenant que nous avons notre page en construction finie et publiée, il suffit de la définir comme page d’accueil de votre site via le menu Réglages / Lecture.

Le menu Lecture de WordPress

Définir la page en construction comme page d’accueil

Et voilà, maintenant quand vos internautes entreront l’url de votre site, ils tomberont sur la page en construction !

Une nouvelle page d’accueil / blog

C’est bien beau tout ça, mais où est passée la page censée recueillir les articles ?
Et bien il va falloir la créer ! Allez donc dans Pages / Ajouter et nommer cette nouvelle page Accueil.
Allez ensuite dans Réglages / Lecture pour définir la page des articles.

Définir la page d’accueil.

Maintenant, vous pourrez voir les incidence de votre thème sur cette page aussi ;)

Les limites de cette technique

L’avantage de cette technique est de pouvoir accéder aux pages du site internet en entrant leur url et ainsi voir les modifications que vous apportez à votre thème en direct.
Cet avantage est aussi un défaut. Si un internaute entre une url connue de votre site (comme par exemple www.monsite.com/blog/), il tombera sur votre page.

Cette technique est donc à privilégier si vous construisez le site pour la première fois.
En cas de maintenance, il vous faudra prendre des précautions pour masquer les autres page de votre site aux internautes (en forçant un login en admin par exempleou avec un .htaccess).

Fin du chantier, on ouvre !

Une fois votre site fini, il vous suffi de sélectionner dans le menu Réglages / Lecture votre page d’accueil comme page d’accueil ;)

See you space internaute

Summary

Article Name

Une page en construction personnalisée sur WordPress

Description

Souvent, quand on développe ou quand on met à jour un site WordPress, on souhaite y mettre une page en construction pour prévenir l'internaute. Plusieurs plugins existent, mais il est tellement plus simple et joli de la faire à la main.

Nicolas AUNE

PUShAUNE

Tu kiffes ? Alors partage avec tes potes !

39 commentaires

Le 7 juin 2024 à 20:54, na míru a dit :

Thanks for sharing your thoughts about interiérové dveře|kraus truhlářství|Kraus
Truhlářství a Interiérové Dveře|kuchyně na zakázku|kvalitní dveře|na míru|nábytek na
míru|renovace nábytku|truhlářské práce|truhlářství Česká republika|vestavěné skříně.
Regards

Répondre
Le 3 octobre 2016 à 14:18, Tirelipinpon a dit :

Super merci grâce à toi je sais non seulement comment mettre une page « en construction » mais aussi créer n’importe quelle page en html et l’intégrer à WordPress (je débute) :)

Répondre
Le 10 mai 2016 à 20:28, breste leslie a dit :

on m’a demandé de voir si l’on peux sauvegarder la base de donner actuelle d’un site qui à été piraté pour ensuite la supprimer pour intégrer une nouvelle page (avec un langage html) en construction. Il utilise Falzilla. Connaissez-vous un logiciel qui traite ce genre d’actions ?

Répondre
Le 13 novembre 2014 à 07:43, Damien a dit :

Merci pour cette explication, mais …
J’ai créé donc une nouvelle page en construction avec juste une image mais quand je l’a défini comme page d’accueil, la bande menus ( portfolio, contact, etc) reste visible et du coup on peut cliquer et accéder a mon site … Merci de ton aide
Damien

Répondre
- Le 13 novembre 2014 à 09:14, PUShAUNE a dit :
  
  Salut Damien,
  
  Tu dois avoir un get_header sur ta page. Du coup ça appelle le fichier header.php de ton thème et le menu qui va avec.
  
  Dans ce tuto, on n’utilise aucun fichier .php issu du thème pour être complétement indépendant.
  
  Répondre
  - Le 13 novembre 2014 à 16:50, Damien a dit :
    
    Merci pour la rapide réponse, j’ai pris un plug in WordPress c’était plus simple pour moi qui ne connaît pas le html !
    
    Répondre
Ping : nouvel article for vidéo ! | True Smile under the Red Light
Le 16 février 2014 à 14:27, Wolf™ a dit :

Bonjour, personnellement je préfère les plugins. Ceux que j’utilise permettent une modification totale de la page (http://pourlesrestaurants.com par exemple).
le gros avantage est de pouvoir continuer à bosser sur son interface normalement sans avoir à penser à éventuellement remettre la bonne page en place.

Répondre
Le 9 janvier 2014 à 21:41, Jeremy a dit :

Bonjour

J’ai testé votre maintenance de page sur un site et ça a tres bien fonctionné
Je recommence sur le thème raw de themeforest, exactement la meme chose
et la non il ne veut rien savoir, meme en le regardant sur smartphone (pour le cache)

Avez vous déjà rencontré le fait quand ca marche pas?
Si oui avec vous une astuce pour le forcer ?

Répondre
Le 17 octobre 2013 à 15:16, Nico a dit :

Bonjour,

Merci pour ce poste super utile, malgré les bonnes explications, je n’arrive pas à lier une feuille de style à cette page de construction, y’aurait-il une syntaxe spécial ?

(la console d’erreur me dit que ma feuille de style est introuvable)

Merci d’avance

Répondre
- Le 17 octobre 2013 à 15:25, PUShAUNE a dit :
  
  Bonjour Nico,
  
  Il faut donner un lien absolu à ta feuille de style grace à la fonction bloginfo de wordpress :
  http://codex.wordpress.org/Function_Reference/bloginfo
  
  et non pas utiliser un lien relatif comme src= »style.css »
  
  Répondre
  - Le 17 octobre 2013 à 15:40, Nico a dit :
    
    Merci :)
    
    Est-ce que ça va aussi charger les polices @font-face ?
    
    Répondre
- Le 17 octobre 2013 à 15:38, Nico a dit :
  
  C’est bon j’ai trouvé, il faut placer la feuille de style à la racine du site et les images dans le dossier images du thème.
  
  Répondre
Le 1 octobre 2013 à 12:36, Chris a dit :

Bonjour,

tout d’abord merci pour cet article fort intéressant, je n’arrive pas à intégrer une image sur cette fameuse page maintenance… Voici mon code :

Site en maintenance

Site en maintenance

Merci de m’éclairer ^^

Répondre
- Le 1 octobre 2013 à 12:37, Chris a dit :
  
  /*
  
  Site en maintenance
  
  Site en maintenance
  
  /*
  
  Répondre
  - Le 1 octobre 2013 à 12:47, Chris a dit :
    
    Résolu dsl du dérangement (et multi posts).
    Encore merci pour les infos
    
    Répondre
- Le 1 octobre 2013 à 12:41, PUShAUNE a dit :
  
  Bonjour Chris,
  
  Est-ce que tu as bien mis, pour le lien vers ton images, un code qui ressemble à ça :
  
  ‹ img src= »/images/player.jpg » ›
  
  Le bloginfo() est important ;)
  
  Répondre
  - Le 1 octobre 2013 à 12:47, Chris a dit :
    
    Oui je viens de trouver l’erreur ;) Merci !!
    
    Répondre
  - Le 22 octobre 2013 à 11:41, Cécile a dit :
    
    Hello!
    
    Merci beaucoup pour ce tuto!
    
    J’aimerais moi aussi insérer une image et j’ai mis :
    
    ‹ img src= »/images/player.jpg » ›
    
    Malheureusement ça ne marche pas (je suis débutante..). Où dois-je placer mon image dans mon FTP? Est-ce qu’il faut mettre le lien tel quel ou changer qqs trucs en fonction de mon FTP? Que signifie ‘template_directory’..?
    
    Merci d’avance pour vos réponses!
    Cécile
    
    Répondre
    - Le 22 octobre 2013 à 11:41, Cécile a dit :
      
      Je voulais dire ce lien là :
      
      ‹ img src= »/images/player.jpg » ›
      
      :)
      
      Répondre
      - Le 22 octobre 2013 à 11:43, Cécile a dit :
        
        Bon, je ne comprends pas pourquoi le lien que je colle ne s’affiche pas entièrement mais je parle bien sûr de celui que vous renseignez plus tôt..
    - Le 22 octobre 2013 à 13:54, PUShAUNE a dit :
      
      Salut Cécile,
      Si tu as utilisé le bout de code plus haut dans les commentaires, il faut que tu colle ton image dans le dossier images de ton thème wordpress ;)
      
      Répondre
Le 15 septembre 2013 à 16:46, Bruno a dit :

Bonjour,

J’ai utilisé votre technique qui a très bien fonctionné jusqu’à aujourd’hui.
En effet mon client pour qui je fais une refonte complète de son site a fait une recherche sur son nom de domaine via Google et il a eu accès à toutes les pages du site en cours de maintenance.

Vous proposez une solution via le fichier htaccess. Malheureusement je ne vois pas comment y accéder et ou comment le créer pour protéger interdire l’accès à ces pages le temps de finir la refonte. Pourriez vous me guider svp ? c’est très urgent !!!

Répondre
- Le 15 septembre 2013 à 16:59, PUShAUNE a dit :
  
  Bonjour Bruno,
  
  Pour empêcher l’indexation du site par google, il faut aller dans :
  Réglages / Lecture
  et cocher la case :
  Demander aux moteurs de recherche de ne pas indexer ce site
  
  En ce qui concerne le .htaccess, voilà un tuto qui explique comment faire :
  http://perso.telecom-paristech.fr/~danzart/frames/htaccess.html
  
  ou
  
  http://www.commentcamarche.net/contents/7-apache-les-fichiers-htaccess
  
  Tu peux aussi, pour éviter l’emploi d’un .htaccess et aller plus vite, protéger tes pages par un mot de passe directement dans l’interface WordPress.
  
  Répondre
Le 19 juin 2013 à 23:02, samar a dit :

une question bête désolée :) mais comment on crée un template page-maintenance.php je usis sur le theme twenty twelve et je ne trouve pas
je ne suis pas débutante je suis nulle
je vous remercie !

Répondre
- Le 20 juin 2013 à 13:21, PUShAUNE a dit :
  
  Bonjour Samar,
  
  Pour créer un template de page, il faut créer un fichier .php dans le dossier de ton thème.
  De là tu pourras y mettre le code présent dans ce tuto.
  
  Répondre
Le 28 mai 2013 à 10:38, Gianni a dit :

Merci beaucoup pour cet article, il correspond exactement à ce dont j’avais besoin :) je vais essayer cela tout de suite !!

Répondre
Le 25 octobre 2012 à 15:13, alice a dit :

Salut,
Je me permets d’ajouter une précision/question (pour/par les débutants sur WordPress).
Le fichier page-maintenance.php se place dans le dossier du thème choisi.
C’est tout ce qu’il y a de plus logique, vu que le terme template fait référence à la mise en page mais j’ai quand même mis le fichier dans deux autres dossiers avant de tomber juste ! Hum… ^_^ ‘
Me suis-je trompée ?
Et si non, alors, il ne faut pas changer de thème pendant le développement ?

Merci beaucoup pour ce tuto super utile !

Répondre
- Le 25 octobre 2012 à 15:42, PUShAUNE a dit :
  
  En effet, tu as bien vu.
  Merci de la précision !
  
  Répondre
Le 10 août 2012 à 15:07, Syntaxique! a dit :

Bonjour,

merci pour cette astuce simple! ça va me faciliter la vie! je connaissais le plugin maintenance mode. Je vais lui faire qques infidélités et pense utiliser cette méthode pour le prochain site administré!

Répondre
Le 8 juin 2012 à 08:43, robe avocat a dit :

excellent ! en procédant ainsi pour la page construction, il n’y a pas de temps où l’utilisateur du site peut se perdre et tomber n’importe où. C’est chronologiquement logique et assure une bonne continuité dans les services du site.

Répondre
Le 7 juin 2012 à 12:18, création de sites et référencement à grenoble a dit :

jusqu’à présent, lorsque je voulais modifier un thème, sans approfondir, je l’éclatais complètement en commentant du code et en insérant des lignes directement à l’éditeur sur les fichiers de base. je n’avais pas compris la hiérarchie des fichiers et l’appel des template. merci pour le tuto ;)

Répondre
Le 12 avril 2012 à 13:03, Chloubidou a dit :

Le thème c’est : Swatch.
C’est ce que je me disais aussi pour le template mais je galère un peu, c\’est seulement la deuxième fois que je fais un site avec wordpress et même si c\’est super pratique pour des débutants, ça reste toujours un peu galère, surtout quand on y connait pas grand chose en php ^^

Répondre
Le 11 avril 2012 à 10:34, PUShAUNE a dit :

Bonjour Chloubidou,

Le mieux dans ton cas est de créer une nouvelle page dans le menu « Pages / ajouter ».
Tu l’appelles « Accueil » et dans le menu « Réglages / Lecture » tu la définies comme page des articles.
Tu n’auras plus qu’à visionner cette page pour te rendre compte des modifications apportées par ton thème ;)

Mais en effet, j’ai oublié d’en parler dans le tutoriel, je vais le mettre à jour.

Répondre
- Le 12 avril 2012 à 12:39, Chloubidou a dit :
  
  Ok je vois :)
  Mais en faisant ça, ça me met juste les articles de ma page d’accueil.. ça ne garde pas le design. Sur ma page d’accueil j’ai un slide, des images, etc, mais quand je la défini comme page des article, ça me fait comme une page intérieur du site. Avec les bons articles mais sans le reste…
  
  Répondre
  - Le 12 avril 2012 à 12:59, PUShAUNE a dit :
    
    Je vois. Tu utilises quel thème ?
    S’il est bien fait, tu devrais avoir dans les templates de page un qui correspond à l’accueil.
    
    Répondre
Le 10 avril 2012 à 11:55, Chloubidou a dit :

Merci pour cet article ! Je cherchais justement comment faire.
Mais il me reste un problème… Je n’ai pas de soucis pour modifier les différentes pages du site, sauf pour la véritable page d’accueil, du coup je ne peux pas voir les modifs apporter sur celle-ci, puisqu’à chaque fois que je tape /index.php je tombe sur « site en construction ». Je ne sais pas comment faire…
Pour réaliser ma page d’accueil je n’en ai pas créer de nouvelle, je suis partie de celle qui existait dans le thème de base et j’ai juste apporter des modifs dans le css et php.
Je sais pas si c’est très clair mais si vous pouviez m’aider ça serait vraiment super !

Répondre
Le 20 mars 2012 à 11:38, Loïc Tortelier a dit :

Parfait !
Je m’embêtais à faire mes tests en ligne en protégeant par un mot de passe se qui ne laissais pas la possibilité d’avoir une page en construction visible sans avoir besoin de changer de dossiers de destination, ou de nom de fichiers pour wordpress et devoir ensuite tout remettre comme il faut…

Puis je me suis poser la question : « Pourquoi ne pas préparer un petit template de page en construction ? » J’ai maintenant la confirmation que cela fonctionne et que c’est aussi simple que je le pensais.
Merci.

Répondre
- Le 20 mars 2012 à 11:53, PUShAUNE a dit :
  
  J’ai eu le même raisonnement que toi.
  Un template est plus simple a mettre en place pour un site pas encore créé.
  Pour une refonte par contre, il vaut mieux sécuriser le tout.
  
  Répondre

Sois pas timide, lâche tes com’ ! Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.