Cómo crear una guía interactiva de producto en WordPress sin programador
Una ayuda que enseña en vez de contar en WordPress: un checklist de temas prácticos, cada uno abre la página correcta y guía al usuario con tooltips.
- Tiempo
- ● 30 minutos
- Precio
- Prueba gratis de 14 días, sin tarjeta
- Quién lo hace
- Administrador de WordPress
Ejemplo: una guía interactiva en WordPress
Una agencia entrega webs WordPress a clientes que olvidan cómo publicar. En la página /docs una guía enumera temas; “Publicar una entrada” abre /wp-admin/post-new.php?tutorial=publish-post con un tour del editor.
Este formato forma parte del plan Pro. Cada cuenta nueva empieza con una prueba gratis de 14 días con todos los formatos y reglas de audiencia, sin tarjeta. Al terminar no se borra nada y lo publicado se sigue mostrando; los tours y tooltips siguen gratis en el plan Free.
Cómo crear la guía interactiva en WordPress, paso a paso
- Paso 01
Copia tu snippet de Clew
Crea una cuenta gratis (o inicia sesión), añade tu sitio y abre Admin → Resumen. Haz clic en la línea de la tarjeta del widget para copiarla: ya lleva la clave real de tu sitio en lugar del marcador.
<!-- Clew: sustituye PEGA_AQUI_TU_CLAVE por la clave del sitio de Admin > Resumen --> <script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>
Paso 1 · ilustración esquemática - Paso 02
Instala un plugin de código para la cabecera
En Plugins → Add New instala y activa el plugin gratuito WPCode (o usa la opción de “scripts en la cabecera” de tu tema). No edites
header.php: las actualizaciones del tema lo sobrescriben.
Paso 2 · ilustración esquemática - Paso 03
Pega la línea en el cuadro Header
Abre Code Snippets → Header & Footer, pega la línea de Clew en Header y pulsa Save Changes.
Paso 3 · ilustración esquemática - Paso 04
Vacía la caché
Si usas WP Rocket, LiteSpeed Cache, W3 Total Cache o una CDN, vacía la caché. En los ajustes de “retrasar JavaScript”, excluye
tryclew.io/widget.
Paso 4 · ilustración esquemática - Paso 05
Crea los tours y después el checklist de la guía
Primero crea un tour Tooltips paso a paso por tema con Editar en tu sitio y Elegir elemento, y apunta el Slug (se usa en los enlaces) de cada uno. Después crea un Checklist de onboarding: un punto por tema y, en URL del enlace, la dirección de la página más
?tutorial=y el slug del tour.
Paso 5 · ilustración esquemática - Paso 06
Elige dónde, cuándo y a quién se muestra
En el mismo editor, completa Dónde mostrarlo (URL de la página), Cuándo mostrarlo, Segmentación de audiencia y Frecuencia. Estos son los ajustes del ejemplo de arriba:
Ajuste Valor Checklist Formato Checklist de onboarding Dónde mostrarlo (URL de la página) Sección por prefijo /docsCuándo mostrarlo Al cargar la página Segmentación de audiencia Sin reglas: todos los que abren la página Frecuencia En cada visita Tour de producto Formato Tooltips paso a paso Dónde mostrarlo (URL de la página) Sección por prefijo /wp-admin/post-new.phpCuándo mostrarlo Al cargar la página Segmentación de audiencia Sin reglas: todos los que abren la página Frecuencia Una vez por visitante 
Paso 6 · ilustración esquemática - Paso 07
Publica y compruébalo en el sitio real
Pon Estado en Publicado y guarda. Abre la página en una ventana privada: Clew recuerda quién ya vio un elemento de “una vez”, así que tu navegador habitual puede saltárselo. Las vistas, finalizaciones y abandonos aparecen en las estadísticas.
Paso 7 · ilustración esquemática
Errores comunes: guía interactiva de producto en WordPress
“Retrasar JavaScript” oculta el guía interactiva de producto hasta la interacción
WP Rocket, LiteSpeed y Perfmatters pueden aplazar los scripts hasta el primer scroll o clic. El widget arranca tarde y un elemento Al cargar la página parece roto. Añade tryclew.io/widget a las exclusiones.
Las páginas con sesión iniciada suelen ser distintas
Las áreas de miembros (/my-account de WooCommerce, páginas de cursos de un LMS) muestran otro marcado que el de los visitantes anónimos. Crea los pasos con la sesión de un miembro típico, no como administrador con barras extra.
Que no se pierdan los parámetros de la URL
Algunos sitios redirigen y eliminan los parámetros (por ejemplo, al forzar la barra final). Abre cada enlace de tema una vez: si ?tutorial= desaparece de la barra de direcciones, enlaza la URL final.
El botón de ayuda necesita un selector estable
Al hacer clic en un elemento escucha los clics en el selector que indiques. Usa un id o un atributo data-tour en el botón de ayuda, no una clase que un cambio de estilos pueda renombrar.
Preguntas y respuestas
¿El tour funciona dentro de wp-admin?
Solo si la línea también carga en el área de administración: añádela con un snippet para admin en WPCode.
¿Funciona en WordPress.com?
Plugins como WPCode necesitan el plan Business de WordPress.com o superior. WordPress autoalojado funciona en cualquier hosting.
¿Se verá en wp-admin?
Los plugins de cabecera suelen añadir el código solo al sitio público. Para guías dentro de /wp-admin, añade la línea con un snippet para el área de administración (WPCode permite elegirla).
¿Cuánto cuesta?
Los tours son gratis; el checklist de la guía forma parte de Pro. Cada cuenta nueva tiene una prueba de 14 días con ambos, sin tarjeta.
¿El mismo tour puede mostrarse solo a usuarios nuevos?
Sí. Un tour abierto con ?tutorial= ignora sus reglas, así que ese mismo tour puede tener su propia regla de URL y Una vez por visitante para los que llegan por primera vez.
Qué más puedes añadir en WordPress
- Cómo añadir un popup a una web en WordPress sin programador
- Cómo crear un tour de producto en WordPress sin programador
- Cómo añadir un tooltip a una web en WordPress sin programador