Guía de SitPup
Cómo añadir un widget de reservas para mascotas a WordPress
WordPress te da cuatro o cinco sitios donde podrías pegar código de inserción, y algunos lo rompen sin avisar. Aquí ves cuál usar según tu configuración, y qué comprobar cuando el botón no aparece.
6 min de lectura
Página relacionada de SitPup: Widget de reservas para mascotas
Consigue el código de SitPup primero
No hay nada que instalar en el lado de WordPress: sin plugin, sin conexión de cuenta, sin claves de API. Toda la integración son dos líneas de HTML que generas una vez.
En SitPup, abre la página Widget, añade tus servicios y precios, activa los animales que aceptas, y luego abre la sección Insertar widget y publica. El código solo aparece después de publicar. Se ve como un div con algunos atributos de datos, seguido de una etiqueta script.
Copia las dos líneas. El div es donde aparece el botón, el script es lo que lo convierte en uno. Cualquiera de los dos por separado no hace nada.
Editor de bloques (gutenberg): usa un bloque de html personalizado
Este es el editor por defecto de WordPress y el caso que atrapa a más gente. Si pegas el código de inserción en un bloque de Párrafo, WordPress elimina la etiqueta script al guardar. No hay mensaje de error; el código simplemente deja de ser código en silencio, y obtienes o nada o una línea de texto visible en tu página.
El bloque que gestiona esto correctamente es HTML personalizado.
- 1
Abre la página o entrada donde quieres el botón
Una página de servicios o de contacto suele convertir mejor que la página de inicio.
- 2
Añade un bloque de html personalizado
Pulsa el icono de más, busca "HTML personalizado", e insértalo. No uses Párrafo, Código o Preformateado; sirven para mostrar código, no para ejecutarlo.
- 3
Pega las dos líneas, exactamente como las copiaste
No las reformatees ni las reindentes. WordPress las acepta tal cual.
- 4
Previsualiza, luego publica
El editor de bloques muestra una pestaña de vista previa dentro del propio bloque, que es una comprobación rápida antes de publicar la página.
Constructores de páginas: usa el elemento html o código
Si tu tema se construyó con Elementor, Divi, Bricks o un constructor similar, no usarás el editor de bloques para esa página en absoluto, y el constructor tiene su propio elemento equivalente.
En Elementor es el widget HTML, en Divi es el módulo Código, en Bricks es el elemento Código. Suelen estar en el grupo Básico o General del panel de elementos. Arrástralo a la posición que quieras y pega el código dentro.
No pegues el código en un elemento Editor de Texto o Texto Enriquecido. Igual que el bloque de Párrafo, esos sanean y eliminan las etiquetas script.
Editor clásico: cambia primero a la pestaña texto
Muchas webs de cuidado de mascotas más antiguas siguen usando el Editor Clásico, ya sea directamente o mediante un plugin que lo restaura. La regla aquí es sencilla pero fácil de olvidar: la pestaña Visual reformatea el HTML sin que te des cuenta y puede eliminar la etiqueta script por completo.
Haz clic en la pestaña Texto antes de pegar, pon el código donde lo quieras dentro del marcado, y guarda sin volver a Visual. Si vuelves a Visual y guardas de nuevo, comprueba la página publicada, porque puede que el código no haya sobrevivido.
Ponerlo en todas las páginas en lugar de en una
Si quieres el botón disponible en todo el sitio en lugar de en una sola página, añadirlo manualmente a cada página es un problema de mantenimiento esperando a ocurrir.
Un plugin de scripts para cabecera y pie de página resuelve esto correctamente. Pegas el código una vez en sus ajustes y eliges dónde se carga. Esta es también la opción más limpia si otra persona mantiene tu web, porque hay un solo sitio donde mirar cuando algo necesita cambiarse.
Cuando el botón no aparece
Nueve de cada diez veces es la caché o la optimización, no el código. Las webs de WordPress suelen tener al menos un plugin que cachea páginas, minifica recursos o retrasa el JavaScript, y esos plugins son agresivos con los scripts de terceros por defecto.
Repasa esto en orden antes de asumir que la inserción está rota:
- Vacía tu caché y recarga la página en vivo en una ventana privada; puede que estés viendo una copia guardada de la página antigua
- En tu plugin de caché u optimización, busca la lista de exclusión de JavaScript y añade la URL del script de SitPup
- Desactiva "defer" o "retrasar la ejecución de JavaScript" para ese script en concreto, en lugar de en todo el sitio
- Comprueba que la etiqueta script realmente llegó a la página publicada viendo el código fuente y buscando "sitpup"
- Si usas un plugin de seguridad que filtra HTML, confirma que no está eliminando etiquetas script del contenido de las entradas
Si el código falta por completo en el código fuente de la página, el editor lo eliminó al guardar. Eso es un problema de bloque o pestaña, no de caché, así que vuelve a la sección correspondiente de arriba.
Verifica en la página en vivo, no en el editor
La vista previa del editor es una representación de tu contenido, no una copia fiel de la página publicada, y no ejecuta la misma capa de optimización que reciben tus visitantes.
Abre la URL publicada en una ventana privada del navegador, haz clic en el botón, y envíate una solicitud de prueba real. Confirma que llega a Reservas en tu panel de SitPup. Después abre la misma página en tu teléfono, porque de ahí viene la mayor parte del tráfico de cuidado de mascotas y es donde suele notarse un elemento mal colocado.
Ideas clave
- No hace falta plugin; la integración son dos líneas de HTML que generas después de publicar el widget.
- Usa un bloque de HTML personalizado en Gutenberg, el elemento HTML o Código en un constructor de páginas, o la pestaña Texto en el Editor Clásico.
- Nunca lo pegues en un elemento de Párrafo o Texto Enriquecido; la etiqueta script se elimina en silencio.
- Para un botón en todo el sitio, usa un plugin de scripts de cabecera y pie de página en lugar de pegarlo página por página.
- Si el botón no aparece, comprueba la caché y los ajustes de retraso de JavaScript antes de culpar al código.
Consigue tu botón de reserva para WordPress
Configura el formulario, publica, y pega el fragmento de dos líneas en un bloque de HTML personalizado. No hace falta plugin.