Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir GIFs desde Giphy en WordPress (2 métodos)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres añadir GIFs de Giphy en WordPress?

Giphy es un sitio web muy popular en el que puedes buscar muchos GIF animados. Mejor aún, puedes añadir fácilmente estos GIFs a tu sitio web WordPress.

En este artículo, te mostraremos cómo añadir GIFs desde Giphy en WordPress.

How to add GIFs from Giphy in WordPress

Ventajas e inconvenientes de utilizar GIF animados en WordPress

GIF son las siglas de Graphics Interchange Format (formato de intercambio de gráficos). A diferencia de las imágenes estáticas, las imágenes GIF tienen contenido en movimiento.

Los GIF son perfectos para añadir reacciones animadas, memes y referencias a la cultura pop a tus páginas y entradas. Encontrarás GIF en muchos sitios web de renombre, como BuzzFeed, List25 y Reddit.

Estos GIF animados pueden hacer que tus entradas de WordPress sean más divertidas y atractivas, animando a los visitantes a pasar más tiempo en tu sitio de WordPress. Esto puede ayudar a aumentar las páginas vistas y reducir la tasa de rebote.

Sin embargo, hay algunos inconvenientes.

Las animaciones GIF son archivos grandes que pueden ralentizar su sitio web WordPress. Esto es una mala noticia para la experiencia del usuario y también puede afectar a su posicionamiento en los motores de búsqueda y al tráfico.

La subida de archivos GIF directamente a la biblioteca de medios de WordPress puede perjudicar los tiempos de carga y consumir ancho de banda.

Ahí es donde entra Giphy. Servir tus GIFs a través de Giphy te ahorrará ancho de banda y tendrá menos impacto en la velocidad y el rendimiento de tu WordPress.

Dicho esto, veamos dos formas de añadir GIFs desde Giphy en WordPress. Simplemente haga clic en los enlaces de abajo para saltar al método que prefiera:

Método 1: Cómo añadir GIFs desde Giphy utilizando un código incrustado

Una opción es añadir el GIF a una página o entrada utilizando su código de incrustación de Giphy.

Como estás usando un código incrustado, no necesitas ningún plugin especial de WordPress. Sin embargo, obtener el código incrustado requiere algunos pasos adicionales.

Si solo quieres añadir un pequeño número de GIF a tu sitio web, puede que estos pasos adicionales no sean un problema. Sin embargo, si planeas utilizar muchos GIFs, puede que merezca la pena instalar un plugin que facilite este proceso.

Para añadir un GIF utilizando su código incrustado, dirígete al sitio web Giphy.com. A continuación, busca el GIF que quieras utilizar.

Ahora puede hacer clic en el botón “Incrustar”.

The Giphy Embed button

Giphy mostrará ahora el código incrustado para este GIF.

En este punto, puedes elegir entre ‘Responsive Off’ y ‘Responsive On’.

El contenido adaptable cambia para adaptarse mejor al dispositivo del visitante. Esto es importante para asegurarse de que su sitio se ve igual de bien en smartphones y tabletas que en ordenadores de sobremesa.

Por ejemplo, los temas adaptables de WordPress se ajustan automáticamente al tamaño de la pantalla del usuario.

Teniendo esto en cuenta, es una buena idea elegir “Responsive On”.

How to add a responsive Giphy GIF to your WordPress website

Una vez decidido, copie el código incrustado al hacer clic en el botón “Copiar código”.

Ahora es el momento de cambiar a tu escritorio de WordPress. Abre la página o entrada en la que quieras incrustar el GIF.

Su siguiente tarea es crear un nuevo bloque HTML personalizado. Para empezar, haga clic en el icono ‘+’.

A continuación, en la ventana emergente que aparece, escriba “HTML personalizado” para encontrar el bloque adecuado. Una vez que haga clic en el bloque HTML personalizado, WordPress añadirá este bloque a su página.

add custom html block to post

Ahora sólo tiene que pegar el código de incrustación de su GIF en el bloque HTML personalizado.

Debería verse así.

adding GIPHY embed code to html block

Antes de publicar este GIF, puede que desee comprobar qué aspecto tendrá para sus visitantes. Para ello, basta con hacer clic en el botón “Vista previa” situado en la parte superior de la pantalla. WordPress mostrará ahora tu página en una nueva pestaña.

Si está satisfecho con su GIF, puede publicar esta página. Sólo tienes que hacer clic en el botón “Actualizar” o “Publicar”.

El GIF aparecerá ahora en tu blog de WordPress.

Método 2: Cómo añadir GIFs desde Giphy usando EmbedPress

Si piensas añadir muchos GIF a tu sitio web, incrustar códigos puede llevarte demasiado tiempo.

Otra opción es utilizar el plugin EmbedPress. Este plugin gratuito te permite incrustar GIFs usando solo sus URL de Giphy.

EmbedPress también permite incrustar contenidos de más de 100 sitios web. Esto incluye incrustar vídeos de YouTube, contenido de Imgur y entradas y vídeos de estado de Facebook.

En primer lugar, tendrás que instalar y activar el plugin EmbedPress. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, ve a la página o entrada donde quieras añadir tu GIF. A continuación, puedes hacer clic en el icono “+”.

En el mensaje / ventana emergente que aparece, escriba “EmbedPress” para encontrar el bloque adecuado.

Simplemente haz clic en este bloque y WordPress añadirá un bloque EmbedPress a tu página.

The EmbedPress WordPress plugin

En una nueva pestaña, dirígete al sitio web de Giphy. A continuación, puede encontrar el GIF que desea utilizar.

A continuación, copie la URL de este GIF.

Copying a Giphy GIF URL

Ahora es el momento de volver a su escritorio de WordPress.

Aquí sólo tienes que pegar la URL del GIF en el cuadro de EmbedPress. Por último, haz clic en “Incrustar”.

The EmbedPress embed block

Ahora, si echas un vistazo a tu sitio web, verás tu nuevo GIF.

Si no estás satisfecho con tu GIF, EmbedPress tiene algunos ajustes que quizás quieras explorar. Estos incluyen el cambio de la altura y la anchura de todos los GIF que añades a través de EmbedPress.

Para echar un vistazo a estos ajustes, haga clic en “EmbedPress” en la barra lateral de WordPress.

How to embed a GIF in your WordPress website

Si aún no está seleccionada, haz clic en la pestaña “General”. Ahora puede utilizar estos ajustes para personalizar sus incrustaciones de EmbedPress.

Recuerde que cualquier cambio que realice en este menú afectará a todo su contenido de EmbedPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir GIFs desde Giphy en WordPress. También puedes consultar nuestros tutoriales sobre cómo aumentar el tráfico de tu blog y los mejores plugins y herramientas SEO que deberías utilizar.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

9 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Faith Oge says

    Hello, thanks for this great piece. I checked the giphypress plugin and discovered it was updated since 3years ago, do you think it is safe to download it?

  3. Modesty says

    1. I don’t have a “dashboard”
    2. but i do have “plug ins”, nowhere does it say “add” just a list of active ones and a few i would have to upgrade for.

    so what am i missing?

  4. Awontis says

    Generally, with implementing GIFS to articles won’t made a mistake. Therefore, for the beginners, this is great advice.

  5. anisanis611 says

    Hi,

    I installed Giphy on my wordpres site, but when I click on the icon, I have the giphy
    window loading indefinitely.

    Does someone has this problem ??

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.