Créer un site de restaurant avec WordPress
Un site de restaurant a quatre missions : présenter la cuisine, prouver que la salle vaut le détour, permettre de réserver et indiquer vos horaires d'ouverture. Ce guide couvre les quatre, en partant d'une installation WordPress vide et en aboutissant à un site que vous pouvez remettre à un client.
Étape 1 : Préparer WordPress
Un site de restaurant s'appuie plus que la plupart sur trois réglages WordPress, configurez-les donc avant de toucher au design.
- Titre du site et slogan. Réglages, puis Général. Le nom du restaurant va dans le titre, et la cuisine et le quartier dans le slogan. L'onglet du navigateur, le résultat de recherche et la carte qu'un convive transmet à ses amis sont tous construits à partir de ces deux lignes.
- Permaliens. Réglages, puis Permaliens, puis Nom de l'article. La page du menu reçoit une adresse assez courte pour être imprimée sur une carte de table ou un flyer.
- Fuseau horaire. Revenez à l'écran Général et choisissez la ville du restaurant. Les demandes de réservation sont horodatées selon ce fuseau, et un fuseau erroné classe la réservation de ce soir sous la date de demain.
Le reste de la préparation de WordPress est identique pour tout site Canvas : les versions de WordPress et de PHP, une sauvegarde que vous avez réellement testée, et suffisamment de mémoire PHP pour les photographies qu'un import télécharge. Le guide d'import traite de ces points une seule fois, pour tous les projets.
Prérequis et sauvegardes avant un import
Une demande de réservation n'a de valeur que si la cuisine la voit avant le service. WordPress confie ses e-mails à votre serveur, sauf si vous lui demandez autre chose, et beaucoup d'hébergeurs suppriment ces e-mails sans prévenir. Configurez dès maintenant un service d'envoi d'e-mails ou une extension SMTP, puis envoyez-vous un message de test.
Étape 2 : Installez Canvas et lancez l'assistant de configuration
Téléversez le fichier zip du thème depuis votre tableau de bord, dans Apparence, Thèmes, Ajouter, puis activez-le. L'assistant de configuration s'ouvre automatiquement et, pour ce projet, il se règle rapidement.
- Commencez par votre licence. Collez la clé de licence depuis votre tableau de bord. Elle permet à l'assistant de configuration de télécharger le pack restauration à l'étape suivante.
- Recherchez Italian Restaurant à l'étape de la démo. Sa fiche liste les pages, les articles et les plats qu'elle installe avant que vous ne vous engagiez.
- L'étape des extensions s'ignore automatiquement. Le design restaurant n'a besoin de rien au-delà de Canvas et de l'extension compagnon que l'assistant installe pour vous.
Si vous quittez l'Assistant de configuration à mi-parcours, il reste accessible dans le menu Canvas jusqu'à votre retour.
Ce que fait chacune des 9 étapes de l'assistant de configuration
Étape 3 : Importer la démo de restaurant
Ouvrez la prévisualisation en direct de la démo Italian Restaurant avant de l'importer, puis parcourez le menu et la page de réservation. La prévisualisation utilise le même thème que celui que vous installez : ce qui fonctionne là-bas fonctionnera donc chez vous.
À l'échelle du site, sur un nouveau site
Sur une installation vierge, importez à l’échelle du site. Les polices, les couleurs, les Options du thème et les menus du restaurant deviennent ceux de votre site, de sorte que la page de repas privés que vous ajouterez l’hiver prochain continuera de s’y intégrer. Importer dans un site déjà en service est l’autre option, et le guide d’importation explique dans quels cas elle convient.
Ce qui est livré
- 6 pages, de la page d'accueil au menu, à la page sur l'histoire et à la page de contact
- 6 articles de blog avec leurs catégories, pour que la section actualités ne soit pas vide dès le premier jour
- 50 plats, chacun avec sa propre fiche d'élément de menu
- Un curseur, un formulaire de réservation fonctionnel et 2 menus de navigation affectés à leurs emplacements
- Créations d'en-tête, de pied de page et de titre de page, chacune étant un enregistrement modifiable
- Les photos culinaires, copiées dans votre propre bibliothèque de médias
Si la salle du restaurant sur les photos ne ressemble en rien à la vôtre, annulez l'import depuis Canvas, puis Demo Import, et essayez l'une des autres démos de restaurant. Vos réglages précédents sont alors rétablis.
Portées, étapes d'import et annulation, expliqués une seule fois
Étape 4 : Remplacez les textes et les images de la démo
Ouvrez la page d'accueil depuis Pages. L'éditeur affiche l'en-tête, le slider, la zone Titre de page et le pied de page autour de votre contenu, tel que le verront les convives, afin que vous rédigiez la phrase d'accueil avec la vraie page autour.
Cliquez, saisissez, remplacez
Chaque titre, paragraphe et image de la page est un bloc. Cliquez sur l'un d'eux pour y saisir votre texte, ou choisissez Remplacer sur une image pour en sélectionner une de vos propres photographies. Le panneau de droite regroupe tout ce que ce bloc permet de régler, de ses couleurs à son lien.
Soyez précis
Le texte de démonstration est volontairement générique, ce qui le rend facile à repérer et facile à dépasser. Remplacez « Authentic Italian cuisine » par ce que vous seul pouvez dire : la région d'où viennent les recettes, le nom de la personne au passe, le bois du four, l'heure à laquelle sort le pain. Un convive qui hésite entre deux restaurants lit les détails, pas les adjectifs.
Lorsqu'une section ne convient pas à votre restaurant, supprimez-la et placez un motif à sa place. Il existe 183 motifs parmi lesquels choisir, chacun livré sous forme de blocs classiques, prêts à être réorganisés.
Étape 6 : Prendre des réservations avec un formulaire
La démo contient un formulaire fonctionnel. Un formulaire dans Canvas est un élément construit à partir de blocs : le bloc Form contient les champs, le bloc Form Field définit chacun d'eux, le bloc Form Submit Button l'envoie, et le bloc Form Embed insère le formulaire terminé dans n'importe quelle page.
Les champs nécessaires à une réservation
- Champs Date et Heure, avec une heure au plus tôt et une heure au plus tard. Réglez l'heure au plus tôt sur l'heure d'ouverture et l'heure au plus tard sur votre dernier service, puis réglez l'intervalle sur quinze ou trente minutes afin de ne pas recevoir de réservation pour 19:07.
- Un champ Nombre pour la taille du groupe, avec un minimum et un maximum correspondant à votre plus grande table.
- Champs Texte et Téléphone pour le nom et le numéro de téléphone, et un champ E-mail pour la confirmation.
- Une zone de texte pour les allergies, les chaises hautes et l'anniversaire que vous auriez sinon oublié.
- Une case Consentement si vous comptez envoyer plus tard des e-mails aux visiteurs, et un champ Honeypot, un piège invisible qui attrape discrètement la plupart des spams sans gêner un humain.
Où partent les demandes
Le formulaire de réservation de la démo comprend des champs pour un nom, un numéro de téléphone et une adresse e-mail, un sélecteur de date qui grise les jours passés, un menu d'horaires et un menu du nombre de convives. Il enregistre chaque demande dans une table de votre propre site, listée sous Soumissions dans l'administration de WordPress. Il n'envoie pas encore d'e-mail : ouvrez le formulaire, activez Envoyer une notification par e-mail dans son onglet Actions, puis indiquez une adresse que quelqu'un consulte pendant le service. Réservez ensuite une table pour vous-même et vérifiez que le message arrive bien.
Traitez chaque demande comme une requête à confirmer. Le formulaire ne fait que noter la réservation : il ne compte pas les couverts et ne bloque pas de table. Si vous avez besoin de disponibilités en temps réel, un système de réservation dédié est l'outil adapté, et l'action webhook du formulaire peut transmettre chaque demande à ce système. Définissez également une durée de conservation pour le formulaire, afin que les numéros de téléphone des clients soient supprimés selon un calendrier de votre choix.
83 des 88 démos livrent au moins un formulaire fonctionnel, si bien que la plupart du temps vous modifiez un formulaire, le câblage étant déjà fait.
Étape 7 : Définissez l'en-tête, les horaires d'ouverture et les coordonnées
L'en-tête est l'endroit où un visiteur affamé cherche le numéro de téléphone, et le pied de page celui où il cherche l'adresse. Ce sont deux enregistrements composés de blocs dans Canvas, modifiés comme une page.
L'en-tête
Un enregistrement d'en-tête contient des zones, et une zone correspond à une cellule de la ligne d'en-tête. Placez le logo dans la première, la navigation au milieu, et dans la dernière un Header Icon Link avec votre numéro de téléphone à côté d'un Header Button indiquant « Réserver une table ». Un bloc Header Info affiche l'adresse ou les horaires lorsqu'il reste de la place.
Ajoutez une barre supérieure au-dessus de l'en-tête pour indiquer les horaires du jour ou une fermeture exceptionnelle. Une barre supérieure est un enregistrement distinct, ce qui permet de modifier le message sans ouvrir l'en-tête.
Horaires d'ouverture dans le pied de page
Le pied de page accueille un bloc Footer Contacts pour l'adresse et le numéro de téléphone, ainsi qu'une colonne d'horaires à côté. Rédigez les horaires sous forme de texte lisible, puis tenez-les à jour, car rien n'agace davantage un visiteur que de trouver porte close.
L’en-tête et le pied de page ont chacun une valeur par défaut pour l’ensemble du site et une valeur propre à chaque page. Une page d’atterrissage dédiée aux dîners privés peut ainsi afficher un en-tête transparent sur une photo, tandis que le reste du site conserve le sien.
Étape 8 : Vérifiez-le, puis ouvrez
Passez en revue cette liste avant d'orienter qui que ce soit vers le site. Elle est courte, et chacun de ses points a déjà embarrassé quelqu'un.
- Effectuez une vraie réservation test depuis votre téléphone, le wifi du restaurant désactivé, et vérifiez que la notification arrive.
- Consultez chaque page sur téléphone. La plupart de ceux qui cherchent où dîner ce soir sont debout.
- Vérifiez l'adresse, le numéro de téléphone et les horaires sur chaque page qui les répète, y compris le pied de page.
- Rédigez le texte alternatif des photographies. Il aide les personnes qui utilisent un lecteur d'écran, et un moteur de recherche le lit avec la page pour comprendre votre salle de restaurant.
- Consultez l'écran SEO. Canvas génère les titres, descriptions, cartes de partage et données structurées à partir de votre contenu publié. Le travail consiste donc ici à rendre le contenu précis, et non à remplir un second jeu de champs.
- Activez les options de performance dont vous avez besoin. Il existe 35 optimisations, chacune réversible, et chacune charge moins de ce que vos pages n'utilisent jamais.
Publiez ensuite, indiquez l'adresse là où les gens la recherchent, et retournez à la gestion de votre restaurant. Le site n'est plus un projet, mais un ensemble de contenus que vous modifiez quand la carte change.
Sources
Lorsque ce guide décrit un élément extérieur à Canvas, voici les pages officielles qui le documentent.
- Écran Réglages générauxwordpress.org · Où WordPress conserve le titre du site et le slogan, avec le fuseau horaire sur le même écran
- Écran Réglages > Permalienswordpress.org · La structure « Nom de l'article », qui donne à chaque page une adresse courte et lisible
- wp_mail()developer.wordpress.org · WordPress transmet les e-mails à la fonction mail() de PHP par défaut, et un envoi réussi ne garantit pas la réception.
- Tutoriel sur les imagesw3.org · Les lecteurs d’écran lisent à voix haute le texte alternatif d’une image
- Consignes générales sur les données structuréesdevelopers.google.com · Un balisage correct rend possible un résultat enrichi, et Google décide s'il l'affiche.
Pour aller plus loin
Deux guides sur le travail qui suit le lancement, et la démo qui illustre ce guide.
Questions fréquentes
La FAQ complète répond au reste, et la documentation détaille chaque réglage.
Ai-je besoin d'une extension pour accepter des réservations ?
Non, les réservations sur un site de restaurant Canvas passent par un formulaire construit à partir de blocs Canvas. Les données saisies sont enregistrées dans une table de votre propre site web et listées dans l'administration WordPress. Vous n'ajoutez une extension que si vous souhaitez transmettre les réservations à un système de réservation tiers qui gère les tables et les couverts.
Puis-je utiliser mes propres photographies ?
Oui, et vous devriez remplacer chaque photo fournie par la démo du restaurant par la vôtre. Chaque image de démo est ajoutée à votre médiathèque comme une pièce jointe ordinaire, donc la remplacer revient à remplacer n'importe quelle image dans WordPress. Gardez une forme proche de l'originale pour que la mise en page ne se décale pas, et rédigez une courte description dans le champ de texte alternatif pendant que vous y êtes.
Que se passe-t-il si la démo restaurant ne me plaît pas ?
Annulez l'importation et importez une autre des 88 démos Canvas, car chaque formule les inclut toutes et chaque importation est suivie séparément. Une deuxième démo peut aussi n'être importée que pour ses pages, sans toucher au design actuel.
Les prix du menu apparaîtront-ils dans Google ?
Canvas génère des données structurées à partir de ce qui figure sur la page au moment du rendu, sur 16 types de schéma, dont les horaires d'ouverture, les offres et les avis. Le choix de ce qu'un moteur de recherche affiche lui appartient, mais le balisage est bien présent, sans extension SEO supplémentaire.
Créez votre prochain site web avec Canvas
Débutant, freelance ou agence, vous obtenez les mêmes blocs et les mêmes démos. Commencez avec un seul site et créez-en autant que nécessaire avec la même licence.