Cómo crear capturas de pantalla automatizadas de sitios web en WordPress

¿Desea crear capturas de pantalla automatizadas de sitios web en su sitio de WordPress? Si agrega con frecuencia capturas de pantalla del sitio web a sus publicaciones o páginas de WordPress, la automatización del proceso le ahorrará tiempo dedicado a realizar capturas de pantalla manualmente. En este artículo, le mostraremos cómo crear capturas de pantalla automatizadas de sitios web en WordPress.

Creación de capturas de pantalla automatizadas de sitios web en WordPress

Método 1: Cree capturas de pantalla automáticas del sitio web en WordPress usando el complemento

Este método es más fácil, por lo que se recomienda para principiantes y usuarios que no quieren lidiar con el código.

Lo primero que debe hacer es instalar y activar el complemento Browser Shots. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

El complemento funciona desde el primer momento y no hay opciones para configurar.

Simplemente edite una publicación / página o cree una nueva. Notará un nuevo botón en el editor visual para agregar capturas de pantalla del sitio web.

Botón Disparos del navegador en el editor visual de WordPress

Al hacer clic en él, aparecerá una ventana emergente donde puede ingresar la URL del sitio web, el texto alternativo, el enlace a la URL y el alto / ancho de la captura de pantalla.

Ingrese una URL para generar una captura de pantalla del sitio web

Haga clic en el botón Aceptar y el complemento agregará un código corto a su publicación de WordPress. Ahora puede obtener una vista previa de su publicación para ver el complemento en acción.

Si está utilizando el Editor de texto en WordPress o no desea usar el botón en el editor visual, también puede agregar manualmente el código corto usted mismo.

[browser-shot url=”https://www.wpbeginner.com”]

De forma predeterminada, el complemento creará una captura de pantalla de 600 x 600 píxeles. Puede cambiar eso agregando los atributos de ancho y alto al código corto.

[browser-shot url=”https://www.wpbeginner.com” width=”400″ height=”400″]

También se vinculará automáticamente al sitio web. Puede cambiar eso agregando un atributo de enlace al shortcode y agregue cualquier enlace que desee.

[browser-shot url=”https://www.wpbeginner.com” width=”400″ height=”400″ link=”http://example.com”]

Si desea agregar un título debajo de la captura de pantalla, puede hacerlo envolviendo el texto del título alrededor del código corto.

[browser-shot url=”https://www.wpbeginner.com”]WPBeginner – Sitio de recursos de WordPress para principiantes[/browser-shot]

La leyenda utilizará los estilos de leyenda de su tema de WordPress. Así es como se veía en nuestro sitio web de demostración:

Captura de pantalla del sitio web generada con el complemento Browser Shots

El complemento Browser Shots utiliza la API mshots de WordPress.com para generar capturas de pantalla sobre la marcha. Estas imágenes no se almacenan en su biblioteca de medios de WordPress. Se sirven directamente desde los servidores de WordPress.com.

Consulte nuestra guía sobre la diferencia entre WordPress.com y WordPress.org.

Método 2: cree capturas de pantalla automatizadas agregando código a WordPress

Este método requiere que agregue código a sus archivos de WordPress. No se recomienda para principiantes. Si se siente cómodo pegando fragmentos de la web en WordPress, puede utilizar este método.

Simplemente agregue este código al archivo functions.php de su tema o un complemento específico del sitio.

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 = ''.  $ alt.  '';

return $img;
}
add_shortcode("screen", "wpb_screenshots");

Al igual que el complemento que mencionamos anteriormente, este código también utiliza la API mshots de WordPress.com para generar capturas de pantalla sobre la marcha.

Para mostrar una captura de pantalla del sitio web en sus publicaciones y páginas de WordPress, deberá ingresar el código corto como este:

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

Reemplace los campos URL y Alt con sus propios valores.

De forma predeterminada, este código generará una captura de pantalla de 600 x 450 píxeles. Puede cambiar eso agregando sus propios atributos de altura y ancho al código corto.

[screen url=”http://wpbeginner.com” alt=”WPBeginner” w=”400″ h=”400″]

Eso es todo, esperamos que este artículo le haya ayudado a aprender a crear capturas de pantalla automatizadas de sitios web en WordPress. Es posible que también desee ver nuestra guía sobre cómo automatizar WordPress y las redes sociales con IFTTT.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba