Utiliza el bloque HTML personalizado para añadir código HTML y previsualízalo mientras lo editas. En esta guía te explicamos cómo usar este bloque para añadir código a tu web.
Antes de empezar, el bloque HTML personalizado es para añadir código HTML sin procesar a una sola página o entrada. No siempre es la herramienta adecuada. Si tu objetivo coincide con uno de los siguientes casos, la guía enlazada es una ruta más rápida:
- Incrusta un vídeo, un mapa, una entrada en redes sociales o un servicio de terceros (YouTube, Spotify, Instagram, Giphy, Pinterest y muchos otros): consulta Incrustar contenido de otras plataformas. El bloque de incrustar funciona en todos los planes y admite muchos servicios populares sin ningún código personalizado.
- Recopila datos de contacto, inscripciones o comentarios: consulta el bloque Formulario. El bloque Formulario crea un formulario funcional sin HTML.
- Añade estilos CSS a tu sitio: consulta Añadir CSS personalizado.
- Añade código a las cabeceras de tu sitio (metaetiquetas de verificación, scripts de terceros que se cargan en todo el sitio): consulta Añadir código a las cabeceras.
Para añadir el bloque HTML personalizado, sigue estos pasos:
- Ve al escritorio de tu sitio y selecciona la página, entrada o plantilla a la que quieres añadir el HTML.
- Haz clic en el icono + (insertador de bloques) y busca «HTML».
- Haz clic en el bloque HTML personalizado para añadirlo a tu contenido.
Encontrarás instrucciones detalladas sobre cómo añadir bloques en esta página.
Una vez que hayas añadido el bloque, sigue estos pasos para añadir tu código HTML:
- Haz clic en el botón «Editar HTML».
- Escribe o pega tu código HTML en la parte izquierda del editor.
- A medida que redactas tu HTML, verás una vista previa del código en el lado derecho.
- Cuando estés conforme, haz clic en el botón «Actualizar» para guardar los cambios.
Verás el resultado de tu código HTML en el editor. Para hacer cambios, haz clic en el botón «Editar HTML» de la barra de herramientas del bloque.
HTML es un lenguaje informático que le dice a los navegadores cómo mostrar el contenido de la web. WordPress.com permite las siguientes etiquetas HTML en todos los planes:
- a
- address
- abbr
- acronym
- area
- article
- aside
- b
- big
- blockquote
- br
- caption
- cite
- class
- code
- col
- del
- details
- dd
- div
- dl
- dt
- em
- figure
- figcaption
- footer
- font
- h1, h2, h3, h4, h5, h6
- header
- hgroup
- i
- img
- ins
- kbd
- li
- map
- mark
- ol
- p
- pre
- q
- rp
- rt
- rtc
- ruby
- s
- section
- small
- span
- strike
- strong
- sub
- summary
- sup
- table
- tbody
- td
- tfoot
- th
- thead
- tr
- tt
- u
- ul
- var
Para añadir las siguientes etiquetas, necesitarás un plan de pago con las funciones de alojamiento activadas. Descubre cómo activar las funciones de alojamiento de tu plan.
embed, frame, iframe, form, input, object, textarea, script, style, link
Para obtener más información sobre los tipos de código que puedes añadir a tu web, así como alternativas cuando un tipo de código no es compatible, visita nuestra guía sobre cómo añadir código a tu web.
Si el código HTML no aparece como se espera después de guardar, comprueba las siguientes causas comunes.
WordPress.com filtra ciertas etiquetas HTML por seguridad. Etiquetas como iframe, script, style, form, embed y object requieren un plan de pago con las funciones de alojamiento activadas.
Si el código desaparece o se elimina parcialmente después de guardar, sigue estos pasos para:
- Comprueba tu plan. Ve al escritorio de tu sitio y selecciona Mejoras → Planes. El bloque HTML personalizado solo acepta etiquetas restringidas en un plan de pago. Si tienes el plan gratuito, mejora a cualquier plan de pago para continuar.
- Activa las funciones de alojamiento. Un plan de pago por sí solo no es suficiente: las funciones de alojamiento también deben estar activas. Instala al menos un plugin en tu sitio para activar tu plan y aceptar código personalizado.
- Vuelve a introducir tu código. Una vez que hayas pagado el plan y las funciones de alojamiento estén activas, pega el código de nuevo en el bloque HTML personalizado y guarda.
Si el código se elimina después de activar las funciones de alojamiento, es posible que la etiqueta no sea compatible en este contexto o que el servicio de terceros publique código incrustado que utilice un marcado no compatible. Prueba el bloque de incrustar en su lugar o consulta Resolver los errores de «contenido inesperado o no válido» a continuación.
Si estás intentando incrustar contenido de un servicio de terceros (vídeos, música, mapas, publicaciones sociales, calendarios, newsletters o visualizadores de documentos), utiliza el bloque de incrustar en su lugar. El bloque de incrustar funciona en todos los planes, no requiere que escribas HTML y es compatible con servicios como YouTube, Vimeo, Spotify, X, Instagram, TikTok y muchos otros.
Si el bloque de incrustar no muestra tu servicio, es probable que el servicio necesite un iframe o script. Añade el código de incrustación a un bloque HTML personalizado en un plan de pago con las funciones de alojamiento activadas.
Si ves un mensaje que dice que tu bloque contiene contenido inesperado o no válido, el HTML del bloque puede tener un formato incorrecto o haber cambiado. Selecciona «Intentar la recuperación del bloque» para que el editor pueda solucionar el problema automáticamente. Si el error persiste, consulta nuestra guía sobre la resolución de errores de bloque para obtener más opciones.
