¿Has oído hablar de los marcos flotantes? Si no, es casi seguro que ha estado en contacto con ellos. Si ha visto un video de YouTube incrustado, un mapa de Google o una publicación de Facebook, estamos aquí para informarle que hay un iframe detrás.
Los iframes han existido por un tiempo ayudándonos a incrustar contenido en sitios web, incluidos los sitios de WordPress. Si desea incrustar contenido multimedia en sus páginas de WordPress, debe conocer los iframes y cómo usar los complementos de WordPress con ellos.
En esta guía, repasaremos qué son los iframes, cómo usarlos y las diferentes formas en que puede agregarlos a WordPress. Estos métodos incluyen el pegado manual y el uso de complementos; para facilitarle la vida, también enumeraremos algunos de nuestros complementos iframe favoritos.
¿Qué es un iframe en WordPress?
Un elemento iframe, abreviatura de marco en línea, es un elemento HTML que contiene otro documento HTML dentro de él. Los iframes se utilizan para incrustar contenido externo en páginas web, incluidas las páginas y publicaciones de WordPress. En otras palabras, los iframes muestran contenido de otros sitios web sin tener que alojar ese contenido.
En HTML, los iframes se crean con iframe etiqueta. Los iframes se usan con mayor frecuencia para incrustar archivos que pueden ser demasiado grandes y poco prácticos para alojarlos en un servidor de sitio web; esto incluye videos, contenido de audio largo y medios interactivos.
Por ejemplo, un sitio puede optar por alojar sus videos en una plataforma como YouTube y luego incrustar esos videos en sus páginas mediante iframes. Al optar por almacenar sus videos en el exterior, su sitio web ahorra toneladas de espacio en el servidor y reduce los tiempos de carga.
También puede usar iframes para incrustar contenido perteneciente a otros sitios. Por ejemplo, Facebook permite a los autores generar código iframe para publicar en su sitio web.
El iframe anterior utiliza el siguiente código:
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fhubspot%2Fposts%2F10159451400784394&show_text=true&width=500" width="500" height="186" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
Los iframes son una buena manera de mejorar las páginas web, ya que los medios integrados pueden generar más tiempo en el sitio web y una mayor participación de la audiencia.
Si es el propietario de un sitio de WordPress, puede agregar iframes utilizando uno de varios métodos. Primero, repasaremos cómo insertar iframes usando un complemento y revisaremos los mejores complementos disponibles que pueden ayudarlo. A continuación, cubriremos varias formas de incrustar contenido iframe en su sitio sin un complemento.
¿Cómo incrustar un iframe en WordPress con un complemento?
Los iframes son elementos HTML, por lo que deben agregarse en el documento HTML para que aparezcan en el sitio web. Sin embargo, editar el HTML del sitio web o trabajar con HTML en general puede ser un inconveniente.
Esto no es un problema, ya que puede usar los complementos de WordPress para incrustar iframes con una codificación mínima o sin ella. Los complementos de iframe de WordPress pueden ayudar a los propietarios de sitios web a incrustar fácilmente iframes en sus páginas y algunos también le permiten cambiar las opciones de visualización de iframe. Echemos un vistazo a las mejores opciones de complementos de iframe a continuación.
Los mejores complementos de marco flotante de WordPress
- Marco flotante avanzado
- Marco flotante simple
- ventana emergente iframe
- Carga lenta
1. Marco flotante avanzado
Advanced iFrame es un complemento popular de WordPress que le permite colocar iframes usando un código abreviado en lugar de pegar el código de inserción en el cuerpo de sus publicaciones. Esto hace posible insertar contenido incrustado en casi cualquier lugar de la página.
El iFrame avanzado gratuito también permite una personalización limitada del iframe, incluida la ocultación de áreas de página para darle más espacio a su iframe, la modificación de los parámetros del iframe, incluidas las dimensiones y carga lentaagregando códigos de seguridad y aplicando CSS y JavaScript al iframe.
En la versión gratuita, el iframe se vinculará a la página del complemento después de 10 000 visitas al mes. Puedes evitar esto comprando iFrame Pro avanzado ($ 21) que también incluye funciones premium como ocultar áreas específicas del iframe, compatibilidad con widgets, iframes receptivos y más.
2. Marco flotante simple
Simple Iframe es un complemento simple y gratuito para agregar iframes usando el editor Gutenberg. Después de instalar y activar el complemento, recibirá un nuevo bloque «Iframe» para contenido incrustado. Simplemente pegue la URL de la página que desea incrustar y Simple Iframe manejará el código por usted. Luego puede obtener una vista previa del iframe mientras permanece en el editor de bloques.
3. ventana emergente iframe
Este es otro complemento gratuito para incrustar iframes en sitios de WordPress. La ventana emergente iframe utiliza la extensión JQuery ligera para mostrar iframes en ventanas emergentes. Es ideal para mostrar páginas web completas en modo modal con el mínimo esfuerzo. La ventana emergente responde y algunos aspectos se pueden personalizar a través de la configuración del complemento.
4. Carga lenta
El complemento Lazy Load de WP Rocket es una forma sin código de permitir que las imágenes e iframes de su sitio de WordPress se carguen lentamente. La carga diferida retrasa la carga de algunos elementos multimedia hasta que el usuario se desplaza hacia ellos, dando la impresión de una carga más rápida de la página de inicio.
Junto con sus imágenes, Lazy Load agregará un atributo HTML de carga diferida a los iframes de su página para mejorar el rendimiento y la experiencia del usuario. Además, el script es liviano y no afecta la velocidad de la página. (¡Eso rompería todo el punto!)
Finalmente, este complemento le permite reemplazar los iframes de los videos de YouTube con una miniatura de vista previa. Esto es útil si su sitio tiene muchos videos: reduce los tiempos de carga sin afectar significativamente la experiencia del usuario.
¿Cómo incrustar un iframe en WordPress sin un complemento?
Si sabe HTML, no necesita un complemento para incrustar iframes en WordPress. El proceso es simple y algunos sitios web incluso generarán código de inserción.
Incruste un iframe en WordPress usando el código de inserción
Si desea incrustar contenido de un sitio popular como YouTube, Facebook o Google Maps, es muy probable que pueda generar el código de inserción. Entonces, todo lo que necesita hacer es copiar este código y pegarlo en su sitio web a través de la interfaz de WordPress.
Aquí hay un ejemplo común de cómo incrustar un video de YouTube con este método:
1. Vaya a la página con el video de YouTube que desea insertar.
2. Haga clic debajo del video Para compartir.
3. Elegir Empotrar opción emergente.
4. Seleccione las opciones de incrustación, luego haga clic en Copiar para copiar el código de inserción en el portapapeles.
5. La forma en que agrega un iframe a una página o publicación de WordPress depende de su editor. Si está utilizando el editor de bloques, agregue un Código HTML personalizado bloque, luego pegue el iframe copiado en el área de texto del bloque.
Si está utilizando el editor clásico, cambie al modo de edición de texto y pegue el código de inserción en la página.
6. Obtenga una vista previa de su publicación para ver el video incrustado en todo su esplendor.
Incrustar manualmente un iframe en WordPress
También puede crear un iframe HTML usted mismo y colocarlo en su página o publicación de WordPress. Así es cómo:
1. En la página de WordPress / editor de publicaciones, abra la opción HTML personalizado. En el editor de bloques, haga esto agregando un Código HTML personalizado Unidad. En el editor clásico, haga clic en Texto en la esquina superior derecha del área de contenido.
2. Pegue la siguiente etiqueta en el cuadro de texto:
<iframe src=“URL”></iframe>
3. Reemplazar texto URL con la URL de la página o el contenido que desea incrustar.
4. Personalice el iframe con atributos adicionales según sea necesario. Los atributos más comunes son:
- permitir: especifica qué funciones puede usar el iframe (pantalla completa, cámara, Reproducción automáticaetc.)
- aumentar: establece la altura del iframe (si no se especifica, el valor predeterminado es 150 píxeles)
- Aterrizaje: configurar la carga diferida para un iframe
- política de referencia: establece qué información de referencia debe enviarse en una solicitud a un iframe
- ancho: establecer el ancho del iframe (el valor predeterminado es 300 píxeles)
alguno iframe una etiqueta con atributos agregados podría verse así:
<iframe src= “URL” width=“500” height=“300” allow=“fullscreen autoplay” loading=“lazy”></iframe>
5. Obtenga una vista previa de la página/publicación para ver cómo se ve el iframe con el contenido que lo rodea.
Restricciones de marco flotante
Si bien los iframes pueden ser beneficiosos para los sitios de WordPress, vale la pena revisar algunos de sus inconvenientes y qué tener en cuenta al usarlos.
Lo que es más importante, recuerde que los elementos dentro del iframe no pertenecen a su sitio web: está tomando contenido de una URL diferente y mostrándolo en su página. Asegúrese de que el contenido de su iframe provenga de una fuente confiable. De lo contrario, el iframe podría usarse para inyectar código malicioso en su sitio web.
Entonces, es mejor no exagerar el contenido de su iframe debido a su impacto negativo en el SEO. Si el iframe requiere muchos recursos, esto puede reducir los tiempos de carga. Además, los iframes son más difíciles para los motores de búsqueda y Google desaconseja usarlos con frecuencia. Para solucionar estos problemas, primero considere si un iframe es necesario. Si es así, agregue Aterrizaje atributo para mejorar el rendimiento. Finalmente, para cada iframe, le recomendamos que incluya un enlace separado al contenido del iframe en su cuerpo de texto para que los motores de búsqueda puedan indexar mejor su página.
Finalmente, sepa que no todos los sitios le permiten incrustar su contenido en iframes. Además, no puede publicar contenido desde un dominio HTTP (sin cifrar) si su sitio usa HTTPS y viceversa. Dado que siempre debe usar el cifrado SSL, es una buena idea mantenerse alejado de los dominios HTTP sin cifrar.
Iframes: aquí para quedarse
A pesar de sus limitaciones, los iframes son una función HTML resistente, todavía muy utilizada en los sitios de WordPress para incrustar contenido multimedia que no puede o no debe alojarse en los propios servidores del sitio.
Con las opciones disponibles para incrustar, los administradores de WordPress de todos los niveles de experiencia pueden aprovechar la incrustación de iframe para mejorar su contenido y evitar que los visitantes salten. Todo lo que se necesita es un poco de conocimiento de HTML o un complemento simple para hacer el trabajo.
