Cómo crear un iFrame en WordPress con o sin un complemento

WordPress le permite cargar diferentes tipos de archivos.

Pero tu poder No te refieres a ti Deberías hacerlo.

Algunos formatos son conocidos por ocupar espacio en el servidor. Dependiendo de su plan de alojamiento web, cargar una gran cantidad de archivos grandes puede agotar rápidamente su almacenamiento y puede incurrir en cargos adicionales. Para empeorar las cosas, subir un archivo de terceros a un sitio web puede empaparse en agua caliente legal.

En esta publicación, le mostraré cómo solucionar estos dos problemas. Veremos cómo los iframes pueden ser el secreto para llenar su sitio con contenido multimedia atractivo sin infringir los derechos de autor o interrumpir los tiempos de carga de la página.

Todo lo que necesita saber sobre iframes

Un iframe es un documento HTML incrustado dentro de otro documento. Muchos propietarios de sitios web de WordPress utilizan iframes para mostrar contenido externo, como videos de YouTube.

Para incrustar un iframe, debe envolver la URL del contenido externo con una etiqueta HTML. También puede personalizar la visualización y la funcionalidad de este contenido con parámetros adicionales. Hay dos opciones para estas etiquetas HTML. Escriba el código requerido manualmente o use un complemento para generar el HTML.

Para muchos propietarios de sitios web, los iframes son una excelente manera de compartir archivos grandes. WordPress admite una variedad de formatos, pero alojar este contenido en su sitio web no siempre es una buena idea.

Los archivos grandes, como los medios largos de alta resolución, pueden ocupar mucho espacio en el servidor. También pueden dejar de aplastar su sitio, lo cual es una mala noticia para la experiencia del visitante.

En lugar de cargar estos archivos en WordPress, muchas personas alojan los archivos en plataformas externas e incrustan este contenido a través de iframes. Esta es una situación que beneficia a ambas partes. Puede sorprender a sus visitantes con contenido enriquecido sin perder el control de los tiempos de carga de la página.

Con los iframes, no está limitado a mostrar su propio contenido.Sin incrustación Considerada infracción de derechos de autor Es de los Estados Unidos, ya que en realidad no estamos haciendo una copia del contenido original.La Unión Europea también está de acuerdo en que se pueden incrustar videos que contengan material protegido por derechos de autor. Sin infringir los derechos de autor del autor..

Si desea que su sitio incluya contenido de terceros, los iframes generalmente se consideran una solución legítima y ética. Esto hace que los iframes sean excelentes para crear sitios web multimedia más atractivos sin crear necesariamente una gran cantidad de contenido nuevo.

Estos son componentes muy versátiles y útiles, así que exploremos algunas formas diferentes de crear un iframe, con o sin complementos.

1. Utilice bloques HTML personalizados

Los complementos son una gran parte de la experiencia de WordPress. Hay complementos que lo ayudan a realizar prácticamente cualquier tarea. ¡Pero no todo es positivo!

El complemento agrega código de terceros a su sitio web. A lo largo de los años, los piratas informáticos se han aprovechado de una gran cantidad de vulnerabilidades de los complementos, incluidos los complementos de WordPress más populares y de mayor reputación del mercado. Algunos programas de terceros pueden ralentizar el rendimiento de su sitio y provocar conflictos y errores.

Por estos motivos, le recomendamos que considere limitar el uso de complementos. La buena noticia es que puede incrustar contenido sin instalar complementos adicionales.

Para crear un iframe:

  • Copie la URL del contenido que desea incrustar.Entonces puedes envolver el enlace <iframe> Agregue una etiqueta y configúrela como la fuente de la etiqueta. por ejemplo:
  • Vaya a la página o publicación donde desea incrustar este contenido y abra y edite esa página web.
  • Haga clic un poco para crear un nuevo bloque + icono.
  • La próxima ventana emergente comenzará a escribir. HTML personalizado Luego, seleccione este bloque cuando aparezca.Esto es nuevo HTML personalizado Bloquear en su página web.
  • Ahora puede agregar el código iframe a este bloque.
Un ejemplo de un código de iframe.

Para ver cómo se verá este contenido incrustado para sus visitantes, avance botón.

Una página web incrustada mediante un iframe.

Si está satisfecho con la visualización y funcionalidad de este contenido, puede publicar o actualizar esta página como lo haría normalmente. Alternativamente, hay varias formas de ajustar un iframe estándar.

Primero, puede definir el ancho y el alto en píxeles. Aquí hay un ejemplo:

De forma predeterminada, WordPress muestra un borde alrededor del marco. Esta frontera es frameborder="1" Atributos, p. Ej.

También puede utilizar los siguientes valores para cambiar dónde aparece este contenido en la página. izquierda, correcto, Arriba, Cuándo bajo.. Por ejemplo, si desea que el iframe esté justificado a la derecha, use:

Esto producirá el siguiente resultado:

Un iframe creado a través del editor de bloques de WordPress.

2. Utilice el bloque de código corto de WordPress

Alternativamente, puede usar un código corto para incrustar el iframe. Este método HTML personalizado cuadra:

  • Abra la página o publicación donde desea crear el iframe.
  • Haga clic un poco + Empiece a escribir con el icono Código corto..
  • escoger Código corto Bloquear cuando se muestre. Esto insertará un nuevo bloque.
Bloque de código corto de WordPress.
  • Ingrese el siguiente código.Asegúrate de reemplazar www.example.com Usando la URL del contenido que desea incrustar:

Ahora puede obtener una vista previa de cómo se verá este contenido y publicar su página como lo haría normalmente.

3. Insertar URL de YouTube

Esta es una plataforma muy popular ya que los usuarios de YouTube cargan más de 500 horas de video por minuto.No es sorprendente que WordPress tenga funciones integradas Youtube cuadra. Puede usarlo para incrustar contenido de video.

Para incrustar un video de YouTube:

  • Abra la página o publicación donde desea incluir este contenido.
  • Haga clic un poco + Haga clic en el botón para comenzar a escribir Youtube..
  • Seleccione este bloque cuando aparezca. Esto inserta un WordPress dedicado Youtube cuadra.
Bloque de YouTube integrado en WordPress.
  • En una nueva pestaña, vaya al video de YouTube que desea insertar.
  • Copia y pega la URL del video. Youtube Bloque empotrado.
Bloque incrustado de YouTube.
  • hacer clic Empotrar botón.

WordPress obtiene el video en cuestión y lo muestra como parte de la página web.

Video de YouTube incrustado a través del componente iframe.

Ahora puede obtener una vista previa de esta página en su editor de WordPress.Si está satisfecho con el video de YouTube incrustado, es hora de comenzar Liberar (además actualizar!! )

4. Copia y pega el código de inserción.

Muchos sitios web importantes ofrecen opciones de incrustación de contenido específico. Haga clic para proporcionar un código de inserción que puede copiar / pegar en su sitio web.

Usemos Vimeo como ejemplo:

  • En el sitio web de Vimeo, busque el video que desea insertar.
  • escoger Cuota botón.
Video de Vimeo.
  • Esto abrirá varios botones para compartir y una ventana emergente que contiene el código de inserción para este video en particular. Ahora puede copiar este código de inserción.
Opciones para compartir de Vimeo, incluido el código de inserción.
  • Cambie a su panel de WordPress y abra la página o publicación donde desea incrustar este contenido.
  • Haga clic un poco + Icono e inserto HTML personalizado cuadra.
  • Después de insertar este bloque, agregue el código de inserción.
Bloque HTML personalizado de WordPress.

Haga clic para obtener una vista previa de cómo se verá este contenido incrustado. avance Con una barra de herramientas flotante.O puede hacer clic avance El enlace en la esquina superior derecha.

5. Instale el complemento de iframe avanzado

Si inserta contenido de forma regular, puede valer la pena instalar un complemento dedicado.

Iframe avanzado Puede agregar fácilmente un iframe a cualquier página o publicación. También le brinda más control sobre el iframe, lo que lo hace ideal si tiene en mente aspectos o características muy específicas.

Estas personalizaciones incluyen ocultar el iframe hasta que el contenido incrustado esté completamente cargado. Esto puede mejorar el tiempo de carga de la página percibido. También puede ocultar diferentes áreas del iframe para que los visitantes puedan concentrarse en el lugar correcto.

Si desea actualizar, Versión Pro Hay algunas características adicionales. Por ejemplo, si compra una licencia avanzada de iframe Pro, podrá hacer zoom automático en su iframe. Esto puede mejorar la experiencia del usuario móvil. La versión Pro también cuenta con detección de navegador, por lo que el sitio ajusta automáticamente el contenido incrustado según el navegador del visitante.

Después de activar este complemento, puede insertar el iframe usando el siguiente código abreviado:

Reemplace la URL con el contenido que desea mostrar.Aquí, el equipo detrás del complemento de iframe avanzado Aplicación gratuita de verificación de iframe.. Puede usar este complemento para ver si puede insertar una URL específica en un iframe.

Si no desea codificar, también proporcionamos este complementoIframe avanzado cuadra:

Complemento de WordPress iframe avanzado.

Después de insertar este bloque, haz clic en él.Esto abrirá WordPress Publicar / Bloquear menú:

Cómo configurar el bloque de iframe avanzado.

En cuadra En el menú, ingrese la URL del contenido que desea incrustar. También puede especificar el ancho y el alto.

Configuración avanzada de bloques de iframe.

Puede ingresar estos valores como un porcentaje de toda el área de contenido o como un valor de píxel. Si no especifica los valores de ancho y alto, WordPress usará los valores predeterminados del complemento.

Si desea verificar esta configuración predeterminada, haga clic en[[Iframe avanzado El menú en el lado izquierdo de WordPress. Siguiente, configuración básica pestaña:

Complemento de WordPress iframe avanzado.

Aquí encontrará todas las configuraciones predeterminadas para el contenido incrustado a través de iframes avanzados. Hay muchos aquí, por lo que es una buena idea pasar un tiempo explorando.

Genere códigos cortos utilizando el complemento iframe avanzado.

Si desea incrustar un iframe usando un shortcode Genera un shortcode para la configuración actual. botón. Este botón crea un código corto que contiene todas las configuraciones predeterminadas para el complemento.

Si necesita anular estos valores predeterminados, simplemente agregue o elimine atributos de este código corto.

Cómo anular la configuración predeterminada de iframe avanzada.

Para generar este código, vaya a Iframe avanzado> Preferencias..Ahora puedes desplazarte a Cómo insertar un iframe Dar una sección y Generar un shortcode … Clic en el botón.

resumen

En esta publicación, le mostré cómo insertar contenido externo en su sitio. Al elegir un iframe, puede mantener la velocidad de carga de su sitio mientras evita posibles problemas de derechos de autor.

A lo largo de este tutorial, hemos cubierto varias formas. Si está incorporando contenido de forma regular Complemento de iframe avanzado.. Este complemento adopta un enfoque rápido y sin código para incrustar contenido externo. O, si solo necesita crear un iframe de vez en cuando, WordPress tiene varios bloques de iframe incorporados que debe completar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *