Guia SitPup
Como adicionar um widget de reservas ao WordPress
O WordPress dá-te quatro ou cinco sítios onde poderias colar código de incorporação, e alguns deles partem-no silenciosamente. Aqui está qual usar na tua configuração, e o que verificar quando o botão não aparece.
6 min de leitura
Página SitPup relacionada: Widget de reservas
Obtém primeiro o código da SitPup
Não há nada para instalar do lado do WordPress: nem plugin, nem ligação de conta, nem chaves de API. Toda a integração são duas linhas de HTML que geras uma vez.
Na SitPup, abre a página Widget, adiciona os teus serviços e preços, ativa os animais que aceitas, depois abre a secção Incorporar widget e publica. O código só aparece depois de publicares. Parece uma div com alguns atributos de dados, seguida de uma tag de script.
Copia as duas linhas. A div é onde o botão aparece, o script é o que o transforma num botão. Sozinha, cada uma não faz nada.
Editor de blocos (gutenberg): usa um bloco de html personalizado
Este é o editor predefinido do WordPress e o caso que apanha mais gente desprevenida. Se colares código de incorporação num bloco de Parágrafo, o WordPress remove a tag de script ao guardar. Não há mensagem de erro; o código simplesmente deixa de ser código em silêncio, e ficas com nada ou uma linha de texto visível na página.
O bloco que trata isto corretamente é o HTML Personalizado.
- 1
Abre a página ou publicação onde queres o botão
Uma página de serviços ou uma página de contacto costuma converter melhor do que a página inicial.
- 2
Adiciona um bloco de html personalizado
Carrega no ícone de mais, pesquisa por "HTML Personalizado", e insere-o. Não uses Parágrafo, Código ou Pré-formatado; servem para mostrar código, não para o executar.
- 3
Cola as duas linhas, exatamente como copiaste
Não as reformates nem reindentes. O WordPress lida bem com o código tal como está.
- 4
Pré-visualiza, depois publica
O editor de blocos mostra um separador de Pré-visualização dentro do próprio bloco, o que é uma verificação rápida antes de publicares a página.
Construtores de páginas: usa o elemento html ou código
Se o teu tema foi construído com Elementor, Divi, Bricks ou um construtor semelhante, não vais usar o editor de blocos para essa página de todo, e o construtor tem o seu próprio elemento equivalente.
No Elementor é o widget HTML, no Divi é o módulo Código, no Bricks é o elemento Código. Normalmente estão todos no grupo Básico ou Geral do painel de elementos. Arrasta-o para a posição que queres e cola o código lá dentro.
Não coles o código num elemento Editor de Texto ou Texto Rico. Tal como o bloco de Parágrafo, esses eliminam tags de script.
Editor clássico: muda primeiro para o separador texto
Muitos sites de cuidados de animais mais antigos ainda usam o Editor Clássico, diretamente ou através de um plugin que o restaura. A regra aqui é simples mas fácil de esquecer: o separador Visual reformata HTML nas tuas costas e pode eliminar totalmente a tag de script.
Clica no separador Texto antes de colares, coloca o código onde queres dentro do código-fonte, e guarda sem voltares ao Visual. Se voltares e guardares de novo, verifica a página publicada, porque o código pode não ter sobrevivido.
Colocá-lo em todas as páginas em vez de uma
Se queres o botão disponível em todo o site em vez de numa única página, adicioná-lo manualmente a cada página é um problema de manutenção à espera de acontecer.
Um plugin de scripts de cabeçalho e rodapé resolve isto devidamente. Colas o código uma vez nas suas definições e escolhes onde carrega. Esta é também a opção mais limpa se outra pessoa gerir o teu site, porque há um único sítio para olhar quando algo precisa de mudar.
Quando o botão não aparece
Nove em cada dez vezes isto é cache ou otimização, não o código. Os sites WordPress costumam correr pelo menos um plugin que guarda páginas em cache, minifica recursos ou adia JavaScript, e esses plugins são agressivos com scripts de terceiros por predefinição.
Percorre isto por ordem antes de assumires que a incorporação está avariada:
- Limpa a cache e recarrega a página ativa numa janela privada; podes estar a ver uma cópia guardada da página antiga
- No teu plugin de cache ou otimização, encontra a lista de exclusão de JavaScript e adiciona-lhe o URL do script da SitPup
- Desliga "adiar" ou "atrasar execução de JavaScript" especificamente para esse script, em vez de em todo o site
- Confirma que a tag de script chegou mesmo à página publicada, vendo o código-fonte da página e procurando por "sitpup"
- Se usares um plugin de segurança que filtra HTML, confirma que não está a eliminar tags de script do conteúdo das publicações
Se o código estiver totalmente ausente do código-fonte da página, o editor eliminou-o ao guardar. Isso é um problema de bloco ou separador, não de cache, por isso volta à secção relevante acima.
Verifica na página ativa, não no editor
A pré-visualização do editor é uma representação do teu conteúdo, não uma cópia fiel da página publicada, e não corre a mesma camada de otimização que os teus visitantes enfrentam.
Abre o URL publicado numa janela de navegador privada, clica no botão, e envia-te a ti mesmo um pedido de teste real. Confirma que chega a Reservas no teu painel SitPup. Depois abre a mesma página no teu telemóvel, porque é dali que vem a maior parte do tráfego de cuidados de animais e onde uma incorporação mal colocada costuma aparecer.
Pontos principais
- Sem plugin necessário; a integração são duas linhas de HTML que geras depois de publicares o widget.
- Usa um bloco de HTML Personalizado no Gutenberg, o elemento HTML ou Código num construtor de páginas, ou o separador Texto no Editor Clássico.
- Nunca o coles num elemento de Parágrafo ou Texto Rico; a tag de script é eliminada em silêncio.
- Para um botão em todo o site, usa um plugin de scripts de cabeçalho e rodapé em vez de o colares página a página.
- Se o botão não aparecer, verifica as definições de cache e de adiamento de JavaScript antes de culpares o código.
Obtém o teu botão de reserva para WordPress
Configura o formulário, publica, e cola o excerto de duas linhas num bloco de HTML Personalizado. Sem plugin necessário.