Creare un sito web per ristoranti con WordPress
Un sito per ristorante ha quattro compiti: mostrare il cibo, dimostrare che il locale vale la pena di raggiungere anche dall'altra parte della città, raccogliere le prenotazioni e far sapere alle persone quando sei aperto. Questa guida copre tutti e quattro, partendo da un'installazione vuota di WordPress e arrivando a un sito che puoi consegnare a un cliente.
Passaggio 1: Prepara WordPress
Un sito di ristorante si affida più di altri a tre impostazioni di WordPress, quindi impostale prima di toccare il design.
- Titolo del sito e slogan. Vai su Impostazioni, poi Generali. Il nome del ristorante va nel titolo, mentre il tipo di cucina e il quartiere vanno nello slogan. La scheda del browser, il risultato di ricerca e l'anteprima che un ospite inoltra agli amici sono tutti costruiti a partire da queste due righe.
- Permalink. Impostazioni, poi Permalink, quindi Nome articolo. La pagina del menu ottiene un indirizzo abbastanza breve da stare su un cartellino da tavolo o su un volantino.
- Fuso orario. Torna nella schermata Impostazioni generali e scegli la città del ristorante. Le richieste di prenotazione vengono marcate con data e ora in base a questo valore, e una città sbagliata archivia la prenotazione di stasera come se fosse per domani.
Tutto il resto della preparazione di WordPress è uguale per qualsiasi sito Canvas: le versioni di WordPress e PHP, un backup che hai testato davvero e memoria PHP sufficiente per le fotografie che un'importazione scarica. La guida all'importazione spiega tutto questo una volta sola, per ogni progetto.
Requisiti e backup prima di un'importazione
Una richiesta di prenotazione vale qualcosa solo se la cucina la vede prima del servizio. WordPress affida le sue email al tuo server, a meno che tu non lo configuri diversamente, e molti hosting scartano quelle email senza avvisare. Configura subito un servizio di invio email o un plugin SMTP e invia a te stesso un messaggio di prova.
Passaggio 2: Installa Canvas e avvia la procedura guidata di configurazione
Carica il file zip del tema dalla bacheca, alla voce Aspetto, Temi, Aggiungi nuovo, e attivalo. La procedura guidata di configurazione si apre da sola e, per questo progetto, è un'operazione rapida.
- Prima la licenza. Incolla la chiave di licenza dalla tua bacheca. Serve alla procedura guidata per scaricare il pacchetto per ristoranti nel passaggio successivo.
- Cerca Italian Restaurant nel passaggio della demo. La sua scheda elenca pagine, articoli e piatti che porta con sé, prima di procedere.
- Il passaggio dei plugin si salta da solo. Il design per ristoranti non richiede nulla oltre a Canvas e al plugin complementare che la procedura guidata installa per te.
Se chiudi la procedura guidata a metà, resta in attesa nel menu Canvas finché non torni.
Passaggio 3: Importa il demo del ristorante
Apri l'anteprima dal vivo del Demo Italian Restaurant prima di importarlo, e vai al menu e alla pagina delle prenotazioni. L'anteprima gira sullo stesso tema che stai installando, quindi ciò che funziona lì funzionerà anche per te.
A livello di sito, su un nuovo sito
Su un'installazione vuota, importa per l'intero sito. Font, colori, Opzioni del tema e menu del ristorante diventano quelli del tuo sito, così la pagina per le cene private che aggiungerai il prossimo inverno avrà comunque l'aspetto giusto. L'alternativa è importare in un sito già attivo, e la guida all'importazione spiega quando conviene.
Cosa ricevi
- 6 pagine, dalla home page al menu, alla storia e alla pagina dei contatti
- 6 articoli del blog con le loro categorie, così la sezione delle notizie non è vuota fin dal primo giorno
- 50 piatti, ciascuno con un proprio record Menu Item
- Uno slider, un modulo di prenotazione funzionante e 2 menu di navigazione assegnati alle rispettive posizioni
- Design di header, footer e titolo della pagina, ciascuno come record modificabile
- Le fotografie di cibo, copiate nella tua libreria multimediale
Se la sala da pranzo nelle foto è molto diversa dalla tua, annulla l'importazione da Canvas, poi da Demo Import, e prova uno degli altri demo di ristoranti. Con l'annullamento tornano anche le tue impostazioni precedenti.
Ambiti, fasi di importazione e annullamento, spiegati una volta sola
Passo 4: Sostituisci le parole e le immagini della demo
Apri la home page da Pagine. L'editor disegna header, slider, banda del titolo della pagina e footer attorno al tuo contenuto, come li vedrà un cliente, così scrivi il messaggio di benvenuto con la pagina reale intorno.
Clicca, digita, sostituisci
Ogni titolo, paragrafo e immagine della pagina è un blocco. Fai clic su uno per scrivere direttamente sopra, oppure scegli Sostituisci su un'immagine per selezionare una tua fotografia. Il pannello a destra raccoglie tutto il resto che quel blocco gestisce, dai colori al link.
Di' la cosa specifica
Il testo di esempio della demo è volutamente generico, e questo lo rende facile da riconoscere e facile da superare. Sostituisci «Cucina italiana autentica» con ciò che solo tu puoi dire: la regione da cui provengono le ricette, il nome della persona al pass, la legna nel forno, l'ora in cui esce il pane. Chi sceglie tra due ristoranti cerca i dettagli, non gli aggettivi.
Quando una sezione non si adatta al tuo ristorante, eliminala e inserisci al suo posto un pattern. Ce ne sono 183 tra cui scegliere, ciascuno disponibile come blocchi normali, pronti da riordinare.
Passo 6: Accettare prenotazioni con un modulo
La demo include un modulo funzionante. Un modulo in Canvas è un record composto da blocchi: un blocco Form contiene i campi, un blocco Form Field definisce ciascuno di essi, un blocco Form Submit Button lo invia e un blocco Form Embed inserisce il modulo completato in qualsiasi pagina.
I campi necessari per una prenotazione
- Campi Data e Ora, con un orario minimo e uno massimo. Imposta il minimo sull'ora di apertura e il massimo sull'ultimo turno, e imposta l'intervallo su quindici o trenta minuti per non ricevere una prenotazione alle 19:07.
- Un campo Numero per il numero di persone, con un minimo e un massimo che corrispondano al tuo tavolo più grande.
- Testo e Telefono per nome e numero di telefono, e un campo Email per la conferma.
- Una casella di testo per allergie, seggioloni e l'anniversario che altrimenti dimenticheresti.
- Una casella di Consenso se pensi di inviare email agli ospiti in seguito, e un campo Honeypot, che è una trappola invisibile che intercetta silenziosamente la maggior parte dello spam senza disturbare una persona.
Dove vanno le richieste
Il modulo di prenotazione della demo include campi per nome, numero di telefono e indirizzo email, un selettore della data che disattiva i giorni passati, un menu per l'orario e uno per il numero di persone. Ogni richiesta viene salvata in una tabella del tuo sito, elencata sotto Invii nel pannello di amministrazione di WordPress. Per ora non invia alcuna email: apri il modulo, attiva Invia notifica email nella scheda Azioni e imposta un indirizzo che qualcuno controlla durante il servizio. Poi prenota un tavolo per te e verifica che il messaggio arrivi.
Tratta ogni voce come una richiesta da confermare. Il modulo registra la prenotazione, ma non conta i coperti né riserva un tavolo. Se ti serve la disponibilità in tempo reale, per questo è più adatto un sistema di prenotazione dedicato, e l'azione webhook del modulo può inoltrare ogni richiesta a quel sistema. Imposta anche un periodo di conservazione per il modulo, così i numeri di telefono degli ospiti vengono cancellati secondo una pianificazione che scegli tu.
Su 88 demo, 83 includono almeno un modulo funzionante, quindi nella maggior parte dei casi stai modificando un modulo e il collegamento tecnico è già fatto.
Passo 7: Imposta header, orari di apertura e dati di contatto
L'header è dove un visitatore affamato cerca il numero di telefono, e il footer è dove cerca l'indirizzo. Entrambi sono composti da blocchi in Canvas e si modificano allo stesso modo di una pagina.
L'header
Un elemento header contiene zone, e una zona è una cella della riga dell'header. Metti il logo nella prima, la navigazione al centro e nell'ultima un Header Icon Link con il tuo numero di telefono accanto a un Header Button che dice Prenota un tavolo. Un blocco Header Info riporta indirizzo od orari quando c'è spazio per mostrarli.
Aggiungi una top bar sopra l'header per mostrare gli orari di oggi o una chiusura per festività. La top bar è un elemento a sé stante, quindi il messaggio cambia senza dover aprire l'header.
Orari di apertura nel footer
Il footer include un blocco Footer Contacts per l'indirizzo e il numero di telefono, e accanto una colonna con gli orari. Scrivi gli orari in un testo leggibile per le persone e tienili sempre aggiornati, perché niente infastidisce un visitatore più di trovare la porta chiusa.
Sia l'header sia il footer hanno un valore predefinito per tutto il sito e un'impostazione per singola pagina, così una landing page per cene private può avere un header trasparente sopra una fotografia mentre il resto del sito mantiene il suo.
Passo 8: Controllalo, poi apri
Passa in rassegna questa lista prima di mandare chiunque al sito. È breve, e ogni voce ha già messo in imbarazzo qualcuno.
- Invia una prenotazione di prova reale dal telefono, con il wifi del ristorante disattivato, e verifica che la notifica arrivi.
- Leggi ogni pagina da smartphone. La maggior parte di chi cerca dove cenare stasera è in movimento.
- Controlla l'indirizzo, il numero di telefono e gli orari in ogni pagina che li ripete, footer incluso.
- Scrivi il testo alternativo per le fotografie. Aiuta chi usa un lettore di schermo, e un motore di ricerca lo legge insieme alla pagina per capire com'è la tua sala da pranzo.
- Dai un'occhiata alla schermata SEO. Canvas ricava titoli, descrizioni, anteprime di condivisione e dati strutturati dai contenuti pubblicati, quindi il lavoro qui consiste nel rendere i contenuti specifici, non nel compilare una seconda serie di campi.
- Attiva gli interruttori delle prestazioni che ti servono. Ci sono 35 ottimizzazioni, tutte reversibili, e ciascuna carica meno di ciò che le tue pagine non usano mai.
Poi pubblica, inserisci l'indirizzo dove le persone lo cercano e torna a gestire il ristorante. Il sito è ora un insieme di elementi da modificare quando cambia il menu, non un progetto.
Fonti
Quando questa guida descrive qualcosa che va oltre Canvas, qui trovi le pagine ufficiali che lo documentano.
- Schermata Impostazioni generaliwordpress.org · Dove WordPress conserva il titolo e lo slogan del sito, insieme al fuso orario nella stessa schermata
- Schermata Impostazioni Permalinkwordpress.org · La struttura "Nome articolo", che assegna a ogni pagina un indirizzo breve e leggibile
- wp_mail()developer.wordpress.org · WordPress affida le email alla funzione mail() di PHP per impostazione predefinita, e un invio riuscito non è una prova di consegna
- Tutorial sulle immaginiw3.org · Gli screen reader leggono ad alta voce il testo alternativo di un'immagine
- Linee guida generali sui dati strutturatidevelopers.google.com · Un markup corretto rende possibile un risultato ricco, ma è Google a decidere se mostrarlo
Prossimi passi
Due guide per le attività che seguono un lancio, più il demo alla base di questa guida.
Domande frequenti
La FAQ completa risponde al resto, e la documentazione copre ogni impostazione nel dettaglio.
Mi serve un plugin per gestire le prenotazioni?
No, le prenotazioni su un sito ristorante Canvas arrivano tramite un modulo creato con i blocchi Canvas. Le voci vengono salvate in una tabella del tuo sito, visibile nell'area di amministrazione di WordPress. Ti serve un plugin solo se vuoi inviare le prenotazioni a un sistema di prenotazione di terze parti che gestisce tavoli e coperti.
Posso usare le mie fotografie?
Sì, e dovresti sostituire ogni fotografia che la demo del ristorante porta con le tue. Ogni immagine della demo finisce nella libreria multimediale come un normale allegato, quindi sostituirne una equivale a sostituire qualsiasi immagine in WordPress. Mantieni la forma vicina all'originale così il layout non si sposta, e scrivi una breve descrizione nel campo testo alternativo mentre ci sei.
E se non ti piace il demo del ristorante?
Annullala e importa un'altra delle 88 demo Canvas, perché ogni piano le include tutte e ogni importazione viene tracciata separatamente. Una seconda demo può anche essere importata solo per le sue pagine, lasciando il design che hai.
I prezzi del menu compariranno su Google?
Canvas genera dati strutturati da ciò che è presente nella pagina al momento del rendering, in 16 tipi di schema che includono orari di apertura, offerte e recensioni. Ciò che un motore di ricerca sceglie di mostrare è una sua decisione, ma il markup è presente senza bisogno di un secondo plugin SEO.
Crea il tuo prossimo sito web con Canvas
Che tu sia un principiante, un freelance o un'agenzia, ottieni gli stessi blocchi e gli stessi demo. Inizia con un sito e creane quanti ti servono con la stessa licenza.