Cómo incrustar iFrames en WordPress

Compartir contenido en línea es una práctica común. Sin embargo, es posible que se quede perplejo al tratar de descubrir cómo incorporar ciertos tipos de contenido. Compartir archivos grandes o elementos específicos de otros sitios web puede ser un desafío a veces.

Afortunadamente, existe una práctica de diseño web bastante simple que puede emplear para mostrar tipos específicos de contenido en su sitio web de WordPress. El uso de HTML para crear marcos en línea (iFrames) puede simplificar el intercambio de imágenes, videos y otros medios en línea.

En este artículo, exploraremos los diferentes usos de iFrames en un sitio web. También veremos los pasos para crear iFrames, tanto manualmente como con un complemento. ¡Empecemos!

Usos de iFrame

Cuando usa un iFrame, esencialmente crea un pequeño portal en su sitio web que permite ver el contenido de otro lugar. Esto puede ser útil en varios escenarios.

El uso de un iFrame significa que no tiene que alojar los archivos que desea mostrar. El contenido permanece en su ubicación original y se puede ver a través del marco de su sitio. Una forma en que esta técnica puede ser útil es cuando desea mostrar archivos grandes. Un iFrame puede traer ese contenido a su sitio web sin ralentizar sus velocidades de carga.

Vale la pena señalar que los iFrames son el único tipo de marco permitido en HTML5. Hay una variedad de diferentes tipos de contenido que puede usar para mostrar, que incluyen:

• Imágenes: puede usar iFrames para mostrar imágenes de alta calidad desde una galería externa y evitar tener que comprometerse debido al tamaño del archivo.
• Videos: alojar sus videos en una plataforma como YouTube o Vimeo, y usar un iFrame para colocarlos en su sitio web, puede mejorar la experiencia del usuario y liberar espacio de almacenamiento en su sitio web.
• Otro contenido web: Resaltar contenido de otros sitios web, como páginas de portafolios o recetas, puede brindar contenido enriquecido a su audiencia fácilmente.

Cuando usa iFrames, también puede evitar reglas complicadas de derechos de autor. Varios tribunales han dictaminado que el uso de un iFrame para mostrar material protegido por derechos de autor no constituye una infracción de derechos de autor en todos los casos.

Un sitio web también puede incluir scripts para evitar que su contenido se incluya en un iFrame. Sin embargo, recomendamos siempre acreditar al creador original de cualquier contenido que utilice, o buscar asesoramiento legal si no está seguro de cómo proceder.

Uso de iFrames con un complemento

Una de las formas más fáciles de emplear iFrames en un sitio web de WordPress es usar un complemento de iFrame. Afortunadamente, hay varias opciones altamente calificadas para elegir.

Paso 1: descargue y configure un complemento de iFrame

Para nuestro ejemplo, vamos a utilizar el complemento Advanced iFrame. Es flexible, fácil de usar y está muy bien calificado:

Después de instalar y activar el complemento, encontrará un nuevo elemento de menú Advanced iFrames en su panel de WordPress. Advanced iFrame tiene un conjunto bastante extenso de opciones. Querrá comenzar con la pestaña Opciones y revisar el video "Inicio rápido":

Luego, puede desplazarse hacia abajo y revisar algunas de las opciones del complemento. Todos estos están configurados con muchas explicaciones útiles y opciones fáciles de seleccionar:

Advanced iFrames también proporciona un verificador de iFrame gratuito, que verificará cualquier URL que proporcione para ver si contiene secuencias de comandos que impiden que el contenido se incluya en un iFrame. Es una buena idea ejecutar cualquier URL a través de esta herramienta antes de usarla en un iFrame en su sitio web.

También querrá revisar la pestaña Configuración básica . Allí, puede personalizar elementos del iFrame, como la altura, el ancho y los bordes del marco:

Una vez que haya configurado la configuración del complemento para satisfacer sus necesidades, puede comenzar a usar iFrames en su sitio web.

Paso 2: use el bloque iFrame avanzado

En el Editor de bloques de WordPress, ahora tendrá un bloque de iFrames avanzado disponible para su uso:

Si tiene problemas para encontrar este bloque la primera vez que quiera usarlo, estará en la categoría Widgets .

Una vez que haga clic en el bloque iFrame avanzado , se cargará automáticamente con contenido del sitio web del creador del complemento. Puede configurar el bloqueo utilizando las opciones de bloqueo en el lado derecho de la página:

Allí, puede agregar la URL del contenido que desea que aparezca en el iFrame. También podrá anular algunas de las configuraciones del complemento si es necesario.

Paso 3: Vista previa de su sitio

Si probó su URL con el verificador de iFrame, debería estar listo. Sin embargo, siempre es mejor obtener una vista previa de los cambios antes de publicar el contenido. Debería ver una vista previa en vivo de su iFrame mientras lo edita y realiza cambios.

También puede usar la opción Vista previa en la esquina superior derecha de su ventana de edición para ver la publicación en el contexto de los menús y barras laterales de su sitio.

Usar iFrames sin un complemento

Si no quiere trabajar con un complemento pero aún le gustaría usar iFrames, ¡está de suerte! Puede aplicar código manualmente a sus publicaciones y páginas para incluir contenido iFramed.

Paso 1: inserte un código de inserción

Si desea incorporar contenido como un video de YouTube en su sitio web, deberá ubicar el código de inserción que proporciona YouTube. Puede encontrar esto debajo de un video haciendo clic en Compartir .

Esto abrirá un menú de opciones para compartir. Deberá seleccionar Incrustar para obtener el código que necesita para su iFrame.

Se abrirá una ventana separada con una vista previa de cómo se verá el contenido incrustado. Luego podrá copiar un fragmento de código de iFrame.

También puede marcar la casilla Comenzar a las si desea que los espectadores comiencen a ver contenido automáticamente en un código de tiempo determinado.

A continuación, volverá a su publicación de WordPress y agregará el bloque HTML personalizado . Puede encontrar esto en la categoría Formato .

Después de agregar este bloque a su publicación, simplemente puede pegar el código de inserción que copió de la página de YouTube.

A continuación, querrá asegurarse de que la inserción funcione correctamente y se vea como usted desea. Puede hacer clic en Vista previa en el bloque HTML personalizado para ver si su iFrame funciona.

Con eso, ha colocado con éxito un iFrame en su sitio web. El mismo proceso funcionará para cualquier plataforma que le proporcione códigos de inserción.

Paso 2: personaliza tus iFrames

Si aún no está satisfecho con la forma en que se muestra el iFrame en su publicación o página, puede ajustar manualmente algunos de los valores en el código. Se recomienda que utilice hojas de estilo en cascada (CSS) para personalizar completamente cómo aparecen los iFrames en su sitio web.

La etiqueta iFrame permite una serie de propiedades personalizadas. Sin embargo, es importante tener en cuenta que muchos de estos ya no son compatibles con HTML5. Es probable que deba investigar el CSS de su tema como mencionamos anteriormente, ya que es posible que no pueda anular ciertos formatos directamente en el bloque HTML personalizado .

Paso 3: Verifique el contenido de su iFrame regularmente

Cuando use iFrames, querrá verificar el contenido enmarcado regularmente. Dado que está abriendo una ventana al contenido sobre el que puede no tener ningún control editorial o de calidad, podría causar un problema en su sitio web en cualquier momento.

Por ejemplo, si el video que usamos en nuestro ejemplo se elimina de su canal de YouTube, nuestra publicación tendría un reproductor roto. Esto es un poco más obvio que un enlace roto, ya que dejará un impacto visual en tu sitio web. Verificar el contenido de su iFrame periódicamente le permite cambiar o eliminar cualquier medio que ya no funcione.

Optimice su sitio con WP Engine

El uso de iFrames en su sitio web puede hacer que las cosas funcionen sin problemas, al mismo tiempo que incorpora medios enriquecidos y contenido dinámico. Aquí en WP Engine, conocemos la importancia de comprender conceptos importantes de diseño web y tener acceso a los mejores recursos para desarrolladores que existen.

Además, nos comprometemos a ayudarlo a brindar las mejores experiencias digitales a sus clientes. ¡Tenemos una selección diversa de planes de alojamiento de WordPress completamente administrados, para que pueda concentrarse en diseñar hermosos sitios web!