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
Nicolas AUNE
PUShAUNE
31 519

Auteur : PUShAUNE

Graphiste freelance, J'ai créé un collectif à Marseille appelé Bison Bleu. Je tiens un blog pour partager mes techniques et mes expériences. Je donne aussi des cours aux élèves de l’école Axe Sud.

38 commentaires

  1. Le , 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.

    • Le , 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.

  2. Le , 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 !

  3. Le , 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.

    • Le , 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…

      • Le , 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.

  4. Le , 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 ^^

  5. Le , 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 ;)

  6. Le , 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.

  7. Le , 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é!

  8. Le , 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 !

    • Le , PUShAUNE a dit :

      En effet, tu as bien vu.
      Merci de la précision !

  9. Le , Gianni a dit :

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

  10. Le , 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 !

    • Le , 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.

  11. Le , 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 !!!

  12. Le , 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 ^^

    • Le , Chris a dit :

      /*

      Site en maintenance

      Site en maintenance

      /*

      • Le , Chris a dit :

        Résolu dsl du dérangement (et multi posts).
        Encore merci pour les infos

    • Le , 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= »< ?php bloginfo( 'template_directory' ); ?>/images/player.jpg » ›

      Le bloginfo() est important ;)

      • Le , Chris a dit :

        Oui je viens de trouver l’erreur ;) Merci !!

      • Le , 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

        • Le , Cécile a dit :

          Je voulais dire ce lien là :

          ‹ img src= »/images/player.jpg » ›

          :)

          • Le , 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 , 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 ;)

  13. Le , 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

      • Le , Nico a dit :

        Merci :)

        Est-ce que ça va aussi charger les polices @font-face ?

    • Le , 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.

  14. Le , 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 ?

  15. Le , 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.

  16. Ping : nouvel article for vidéo ! | True Smile under the Red Light

  17. Le , 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

    • Le , 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.

      • Le , 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 !

  18. Le , 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 ?

  19. Le , 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) :)

À ton tour de participer :

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

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