Cómo crear capturas de pantalla automáticas de sitios web en WordPress

¿Quieres crear capturas de pantalla automatizadas de sitios web en tu sitio WordPress?

Si añades con frecuencia capturas de pantalla de sitios web a tus entradas o páginas de WordPress, entonces automatizar el proceso te ahorrará tiempo dedicado a capturarlas manualmente.

En este artículo, le mostraremos cómo crear fácilmente capturas de pantalla automatizadas de sitios web en WordPress.

¿Por qué crear capturas de pantalla automatizadas de sitios web en WordPress?

Si usted tiene un sitio web WordPress, entonces es posible que desee crear y añadir capturas de pantalla automatizadas del sitio a sus entradas para dar a los lectores potenciales una forma rápida de ver lo que su contenido se trata.

Esto puede aumentar la participación e incluso ayudar a mejorar el SEO del sitio web, ya que los motores de búsqueda suelen utilizar imágenes y capturas de pantalla para comprender e indexar su contenido.

Del mismo modo, también puede utilizar capturas de pantalla automatizadas de sitios web si desea crear una copia de seguridad visual de su sitio antes de actualizar un tema o realizar cualquier otro cambio. Esto puede ayudarte a comparar y ver la diferencia entre el estilo nuevo y el antiguo de tu sitio web.

Las capturas de pantalla automatizadas también pueden comparar diferentes servicios o sitios web, guiar al lector a través de un tutorial paso a paso y realizar un seguimiento del progreso del sitio web a lo largo del tiempo.

Dicho esto, veamos cómo crear fácilmente capturas de pantalla automatizadas de sitios web en WordPress.

Método 1: Crear capturas de pantalla automáticas de sitios web en WordPress usando un plugin

Este método es más sencillo y, por tanto, recomendable para principiantes y usuarios que no quieran lidiar con código.

Primero, necesitas instalar y activar el plugin Browser Screenshots. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, el plugin funcionará de inmediato y no tendrá que configurar ningún ajuste.

Ahora simplemente visite una página o entrada donde desee añadir una captura de pantalla automatizada del sitio web desde la barra lateral del administrador de WordPress.

Haga clic en el botón “Añadir bloque” (+) situado en la esquina superior izquierda de la pantalla para abrir el menú de bloques. A continuación, añade el bloque “Capturas del navegador” en el editor.

Una vez hecho esto, añada la URL del sitio web del que desea obtener una captura de pantalla automática y haga clic en el botón “Cargar imagen”.

El plugin añadirá automáticamente una captura de pantalla del sitio web que hayas elegido. Ahora puede añadir un texto alternativo para la imagen y cambiar su anchura y altura desde el panel de bloque de la derecha.

También puedes elegir si quieres añadir un enlace a la captura de pantalla que te dirija al sitio web enlazando el conmutador “Usar enlace” del panel.

También puedes añadir el enlace de la entrada a la captura de pantalla mediante el conmutador “Enlace a la entrada actual”.

Por último, haga clic en el botón “Actualizar” o “Publicar” para almacenar sus ajustes.

Ahora puede visitar su sitio WordPress para ver la captura de pantalla automatizada.

Nota: El plugin Browser Shots utiliza la API mshots de WordPress.com para generar capturas de pantalla sobre la marcha. Estas imágenes no se almacenan en la biblioteca de medios de WordPress. Se sirven directamente desde los servidores de WordPress.com. Consulta nuestra guía sobre la diferencia entre WordPress.com y WordPress.org.

Método 2: Crear capturas de pantalla automáticas añadiendo código a WordPress

Este método requiere que añadas código a tus archivos de WordPress. Para crear capturas de pantalla automatizadas, debe añadir código personalizado al archivo functions. php de su tema.

Sin embargo, recuerde que el más mínimo error en el código puede romper su sitio y hacerlo inaccesible.

Por eso recomendamos usar WPCode. Es el mejor plugin de fragmentos de código de WordPress en el mercado que hace que sea super seguro y fácil de añadir código personalizado.

Primero, necesitas instalar y activar el plugin WPCode. Para obtener instrucciones detalladas, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, visite la página Fragmentos de código ” + Añadir fragmento desde el escritorio de WordPress.

Una vez allí, haga clic en el botón “Usar fragmento de código” situado bajo la opción “Añadir su código personalizado (nuevo fragmento de código)”.

Accederá a la página “Crear fragmento de código personalizado”, donde podrá empezar por escribir un nombre para su fragmento de código. Puede ser cualquier cosa que le ayude a identificar el código.

A continuación, seleccione “Fragmento de código PHP” como tipo de código en el menú desplegable de la derecha.

A continuación, copie y pegue el siguiente código en el cuadro “Vista previa del código”.

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
  
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
 
return $img;
}
add_shortcode("screen", "wpb_screenshots");

Al igual que el plugin que hemos mencionado antes, este código también utiliza la API Mshots de WordPress.com para generar capturas de pantalla sobre la marcha.

Ahora, puede añadir la URL del sitio web cuyas capturas de pantalla automáticas desea realizar junto a la línea "url" =$gt; del código.

También puedes añadir la anchura y la altura que prefieras para las capturas de pantalla junto a las líneas "w" => y "h"=> del código.

A continuación, desplácese hasta la sección “Inserción” y elija el modo “Inserción automática”.

El código se ejecutará automáticamente al activarlo.

Por último, desplázate hasta la parte superior de la página y activa el conmutador “Inactivo”.

A continuación, haga clic en el botón “Guardar fragmento de código” para establecer los ajustes y activar el fragmento.

Ahora, para mostrar una captura de pantalla del sitio web en sus entradas y páginas de WordPress, tendrá que introducir el shortcode así:

[screen url=”http://wpbeginner.com” alt=”WPBeginner”]

Puede sustituir los campos URL y Alt por sus propios valores.

En primer lugar, abra la página/entrada en el editor de bloques desde el escritorio de WordPress y haga clic en el botón “Añadir bloque” (+).

Desde aquí, añade el bloque ‘Shortcode’ a la página/entrada. A continuación, añadir el shortcode de arriba y reemplazarlo con sus propios valores.

Por último, haga clic en el botón “Actualizar” o “Publicar” para almacenar sus ajustes.

Ahora visite su sitio WordPress para ver la captura de pantalla automatizada en acción.

Eso es todo, esperamos que este artículo te haya ayudado a aprender cómo crear capturas de pantalla automatizadas de sitios web en WordPress. Puede que también quieras ver nuestra guía para principiantes sobre SEO de imágenes y nuestras selecciones de expertos sobre las mejores herramientas para crear mejores imágenes para las entradas de tu blog.

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.