Crie um site de restaurante com WordPress
Um site de restaurante tem quatro funções: mostrar a comida, provar que o ambiente vale a viagem até lá, receber reservas e informar quando você está aberto. Este guia cobre as quatro, começando de uma instalação vazia do WordPress e terminando com um site que você pode entregar a um cliente.
Etapa 1: Prepare o WordPress
Um site de restaurante depende de três configurações do WordPress mais do que a maioria, então configure-as antes de mexer no design.
- Título do site e slogan. Configurações, depois Geral. O nome do restaurante vai no título, e o tipo de comida e o bairro no slogan. A aba do navegador, o resultado de busca e o cartão que um cliente compartilha com amigos são todos formados por essas duas linhas.
- Links permanentes. Configurações, depois Links permanentes, depois Nome da postagem. A página do menu recebe um endereço curto o bastante para caber em um cartão de mesa ou em um panfleto.
- Fuso horário. Ainda na tela Geral, escolha a cidade do próprio restaurante. As solicitações de reserva recebem carimbo de data e hora com base nela, e uma cidade errada registra a reserva desta noite como se fosse de amanhã.
Todo o restante da preparação do WordPress é igual para qualquer site Canvas: as versões do WordPress e do PHP, um backup que você realmente testou e memória suficiente do PHP para as fotos que uma importação baixa. O guia de importação trata disso uma vez, para todos os projetos.
Requisitos e backups antes de uma importação
Um pedido de reserva só tem valor se a cozinha o vir antes do serviço. O WordPress entrega os e-mails ao seu servidor, a menos que você configure de outra forma, e muitas hospedagens descartam esses e-mails sem aviso. Configure agora um serviço de entrega de e-mails ou um plugin SMTP e envie a si mesmo um e-mail de teste.
Etapa 2: Instalar o Canvas e executar o Assistente de configuração
Envie o arquivo zip do tema pelo seu painel em Aparência, Temas, Adicionar novo, e ative-o. O Assistente de configuração abre sozinho e, para este projeto, é um passo rápido.
- Comece pela licença. Cole a chave de licença do seu painel. É ela que permite ao assistente baixar o pacote de restaurante na próxima etapa.
- Pesquise por Italian Restaurant na etapa do demo. O cartão dele lista as páginas, as postagens e os pratos que ele traz antes de você escolher.
- A etapa de plugins é ignorada automaticamente. O design de restaurante não precisa de nada além do Canvas e do plugin complementar que o assistente de configuração instala para você.
Se você fechar o assistente no meio do caminho, ele fica aguardando no menu Canvas até você voltar.
O que cada uma das 9 etapas do assistente de configuração faz
Etapa 3: Importe o demo de restaurante
Abra a visualização ao vivo do demo Restaurante Italiano antes de importá-lo, e clique para acessar o cardápio e a página de reservas. A visualização roda com o mesmo tema que você está instalando, então o que funciona ali vai funcionar para você.
Em todo o site, em um site novo
Em uma instalação vazia, importe para o site inteiro. As fontes, cores, Opções do tema e menus do restaurante passam a ser do seu site, então a página de jantar privativo que você adicionar no próximo inverno ainda vai combinar com o restante. Importar para um site que já está no ar é a outra opção, e o guia de importação explica quando ela é indicada.
O que você recebe
- 6 páginas, da página inicial ao cardápio, à nossa história e à página de contato
- 6 posts do blog com suas categorias, para que a seção de notícias não esteja vazia no primeiro dia
- 50 pratos, cada um com seu próprio registro de Menu Item
- Um slider, um formulário de reserva funcional e 2 menus de navegação atribuídos aos seus locais
- Designs de cabeçalho, rodapé e título da página, cada um como um registro editável
- As fotos de comida, copiadas para sua biblioteca de mídia
Se a sala de jantar nas fotos não se parece em nada com a sua, desfaça a importação em Canvas e depois em Importação de demo, e teste outro dos demos de restaurante. Suas configurações anteriores voltam junto com ela.
Escopos, etapas da importação e reversão, explicados uma só vez
Passo 4: Substitua os textos e as imagens do demo
Abra a página inicial em Páginas. O editor desenha o cabeçalho, o slider, a área de Título da página e o rodapé ao redor do seu conteúdo, da forma como um cliente do restaurante os verá, para que você escreva a mensagem de boas-vindas com a página real ao redor.
Clique, digite, substitua
Cada título, parágrafo e imagem da página é um bloco. Clique em um deles para digitar por cima, ou escolha Substituir em uma imagem para selecionar uma das suas fotos. O painel à direita reúne tudo o que esse bloco permite configurar, desde as cores até o link.
Diga a coisa específica
O texto de exemplo das demos é propositalmente genérico, o que facilita identificá-lo e também superá-lo. Substitua "Cozinha italiana autêntica" pelo que só você pode dizer: a região de onde vêm as receitas, o nome da pessoa que comanda a cozinha, a madeira do forno, o horário em que o pão sai do forno. Quem escolhe entre dois restaurantes lê em busca de detalhes, não de adjetivos.
Quando uma seção não se encaixar no seu restaurante, exclua-a e coloque um padrão no lugar dela. Há 183 padrões para escolher, cada um chegando como blocos comuns, prontos para reorganizar.
Etapa 6: Aceite reservas com um formulário
O demo traz um formulário funcionando. Um formulário no Canvas é um registro montado a partir de blocos: um bloco Form guarda os campos, um bloco Form Field define cada um deles, um bloco Form Submit Button envia o formulário e um bloco Form Embed insere o formulário pronto em qualquer página.
Os campos que uma reserva precisa
- Campos Data e Hora, com um horário mais cedo e um mais tarde. Defina o mais cedo como o horário de abertura e o mais tarde como o último turno, e defina o intervalo para quinze ou trinta minutos para não receber uma reserva para 19:07.
- Um campo Número para o número de pessoas, com um mínimo e um máximo que correspondam à sua mesa maior.
- Campos de Texto e Telefone para o nome e o número de telefone, e um campo de E-mail para a confirmação.
- Uma área de texto para alergias, cadeirões e a data de aniversário que, de outra forma, você esqueceria.
- Uma caixa de seleção Consentimento se você planeja enviar e-mails aos clientes depois, e um campo Honeypot, uma armadilha invisível que captura discretamente a maior parte do spam sem incomodar uma pessoa.
Para onde vão as solicitações
O formulário de reservas da demonstração vem com campos para nome, telefone e e-mail, um seletor de data que desativa os dias passados, um menu de horário e um menu de número de pessoas. Ele salva cada solicitação em uma tabela do seu próprio site, listada em Submissions na área administrativa do WordPress. Por enquanto, ele não envia e-mails: abra o formulário, ative Send Email Notification na aba Actions e defina como destino um endereço que alguém leia durante o atendimento. Depois, reserve uma mesa para você mesmo e confira se a mensagem chega.
Trate cada envio como uma solicitação que você confirma. O formulário registra a reserva, mas não conta os lugares nem bloqueia uma mesa. Se você precisar de disponibilidade em tempo real, um sistema de reservas dedicado é a ferramenta certa para isso, e a ação de webhook do formulário pode encaminhar cada solicitação a ele. Defina também um período de retenção no formulário, para que os telefones dos clientes sejam apagados em um cronograma que você escolher.
83 dos 88 demos incluem pelo menos um formulário funcional, então, na maioria das vezes, você edita um formulário e a configuração já está pronta.
Passo 7: Defina o cabeçalho, o horário de funcionamento e os dados de contato
O cabeçalho é onde um visitante com fome procura o telefone, e o rodapé é onde ele procura o endereço. Ambos são modelos formados por blocos no Canvas, editados da mesma forma que uma página.
O cabeçalho
Um registro de cabeçalho contém zonas, e uma zona é uma célula da linha do cabeçalho. Coloque o logotipo na primeira, a navegação no meio e, na última, um Header Icon Link com seu número de telefone ao lado de um Header Button com o texto “Reserve uma mesa”. Um bloco Header Info traz o endereço ou o horário de funcionamento quando há espaço para eles.
Adicione uma barra superior acima do cabeçalho para o horário de hoje ou um fechamento em feriado. A barra superior é um registro próprio, então a mensagem muda sem abrir o cabeçalho de forma alguma.
Horário de funcionamento no rodapé
O rodapé recebe um bloco Footer Contacts para o endereço e o telefone, e uma coluna de horários ao lado. Escreva os horários em texto que as pessoas consigam ler e mantenha-os atualizados, porque nada incomoda mais um visitante do que chegar e encontrar a porta fechada.
Tanto o cabeçalho quanto o rodapé têm um padrão para todo o site e uma substituição por página, então uma landing page para jantares privados pode exibir um cabeçalho transparente sobre uma foto, enquanto o restante do site mantém o seu próprio.
Etapa 8: Verifique e depois abra
Revise esta lista antes de mandar qualquer pessoa para o site. É curta, e cada item dela já passou vergonha para alguém.
- Faça uma reserva de teste real pelo celular, com o wi-fi do restaurante desligado, e confirme se a notificação chega.
- Leia cada página no celular. A maioria das pessoas que procuram onde jantar hoje está de pé.
- Confira o endereço, o telefone e o horário de funcionamento em todas as páginas que os repetem, incluindo o rodapé.
- Escreva o texto alternativo das fotos. Ele ajuda pessoas que usam leitor de tela, e o mecanismo de busca o lê junto com a página para entender o seu salão.
- Confira a tela de SEO. O Canvas gera títulos, descrições, cards de compartilhamento e dados estruturados a partir do seu conteúdo publicado, então o trabalho aqui é tornar o conteúdo específico, e não preencher um segundo conjunto de campos.
- Ative as opções de desempenho de que você precisa. Há 35 otimizações, cada uma reversível, e cada uma carrega menos do que as suas páginas nunca usam.
Depois, publique, coloque o endereço nos lugares onde as pessoas pesquisam e volte a cuidar do restaurante. O site agora é um conjunto de registros que você edita quando o cardápio muda, não um projeto.
Fontes
Quando este guia descrever algo fora do próprio Canvas, estas são as páginas oficiais que o documentam.
- Tela de Ajustes geraiswordpress.org · Onde o WordPress guarda o título e o slogan do site, com o fuso horário na mesma tela
- Tela de Links permanentes em Configuraçõeswordpress.org · A estrutura de permalinks Nome do post, que dá a cada página um endereço curto e legível
- wp_mail()developer.wordpress.org · O WordPress entrega o e-mail à função mail() do PHP por padrão, e um envio bem-sucedido não é prova de entrega
- Tutorial de imagensw3.org · Leitores de tela leem em voz alta o texto alternativo de uma imagem
- Diretrizes gerais de dados estruturadosdevelopers.google.com · Marcação correta torna possível um resultado enriquecido, e o Google decide se vai exibi-lo
Próximos passos
Dois guias para as etapas que vêm depois do lançamento, e o demo por trás deste.
Perguntas frequentes
A FAQ completa responde ao resto, e a documentação detalha cada configuração.
Preciso de um plugin para receber reservas?
Não, as reservas em um site de restaurante com o Canvas chegam por meio de um formulário criado com blocos do Canvas. Os registros do formulário são armazenados em uma tabela no seu próprio site e listados na área administrativa do WordPress. Você só adiciona um plugin se quiser enviar as reservas a um sistema de reservas de terceiros que gerencia mesas e número de pessoas.
Posso usar minhas próprias fotos?
Sim, e você deve substituir todas as fotos que a demo de restaurante traz pelas suas. Cada imagem da demo entra na sua biblioteca de mídia como um anexo comum, então substituir uma é o mesmo processo que substituir qualquer imagem no WordPress. Mantenha o formato próximo ao original para que o layout não mude e, enquanto faz isso, escreva uma descrição curta no campo de texto alternativo.
E se eu não gostar da demo de restaurante?
Desfaça e importe outra demo do Canvas entre as 88 disponíveis, porque todos os planos incluem todas elas e cada importação é registrada separadamente. Uma segunda demo também pode ser importada só para as páginas dela, mantendo o design que você já tem.
Os preços do menu aparecem no Google?
O Canvas cria dados estruturados a partir do que está na página no momento em que ela é renderizada, em 16 tipos de esquema que incluem horário de funcionamento, ofertas e avaliações. O que um mecanismo de busca decide exibir é uma decisão dele, mas a marcação está lá sem a necessidade de um segundo plugin de SEO.
Crie seu próximo site com o Canvas
Iniciante, freelancer ou agência, você recebe os mesmos blocos e os mesmos Demos. Comece com um site e crie quantos precisar com a mesma licença.