Cómo Crear Capturas de Pantalla Automatizadas de Sitios Web en WordPress

Actualizar las capturas de pantalla del sitio web manualmente consume mucho tiempo. Ya sea que estés creando un portafolio, un directorio o revisando software, la captura, el recorte y la carga constantes pueden ralentizar severamente la creación de tu contenido.

He descubierto que, si bien las capturas de pantalla detalladas de tutoriales todavía necesitan un toque personal, la automatización ahorra mucho tiempo para vistas previas rápidas del sitio web. Es la clave para mantener tu sitio fresco sin el esfuerzo manual interminable.

En esta guía, te mostraré tres métodos confiables para tomar fácilmente capturas de pantalla automáticas de sitios web en WordPress.

Ya sea que desees mostrar una captura de pantalla de cualquier sitio web o generar automáticamente miniaturas para tu portafolio, estos métodos te ayudarán a mantener un sitio profesional y actualizado.

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

Si tienes un sitio web de WordPress, agregar capturas de pantalla a tus publicaciones ofrece a los lectores una forma visual rápida de ver de qué trata tu contenido. Sin embargo, tomar y recortar estas imágenes manualmente para docenas de enlaces puede llevar mucho tiempo.

Las capturas de pantalla automatizadas son la solución perfecta para:

• Crear un portafolio de diseño web
• Crear un directorio de temas
• Escribir reseñas de software
• Realizar pruebas visuales en tus propios sitios

La automatización ahorra tiempo y garantiza que el tamaño de tus imágenes permanezca perfectamente consistente. Además, muchas de estas herramientas te permiten capturar fácilmente una captura de pantalla de página completa automáticamente, en lugar de unir capturas manuales.

Esta consistencia profesional aumenta la participación del usuario y contribuye al SEO de tu sitio web. Las imágenes relevantes y de alta calidad mantienen a los visitantes en tu página por más tiempo, lo que envía señales positivas a los motores de búsqueda.

De manera similar, puedes usar capturas de pantalla automáticas de sitios web para crear una copia de seguridad visual de tu sitio antes de actualizar un tema o realizar cambios importantes en el diseño. Esto facilita la comparación de los estilos nuevos y antiguos de tu sitio web lado a lado.

Cuándo usar capturas de pantalla manuales

Ahora, es importante saber cuándo no usar la automatización. Si estás creando un tutorial instructivo paso a paso, entonces deberías optar por tomar capturas de pantalla manualmente.

Las herramientas automatizadas no pueden iniciar sesión en tu panel de administración de WordPress, abrir menús desplegables ocultos o agregar cuadros rojos y flechas precisos para mostrarle a un usuario exactamente dónde hacer clic.

Por ejemplo, en WPBeginner, tomamos manualmente todas nuestras capturas de pantalla de tutoriales del backend. Luego usamos aplicaciones gráficas dedicadas como Adobe Photoshop o Affinity Studio para limpiar las imágenes, difuminar datos sensibles y agregar nuestras anotaciones distintivas.

Pero para las previsualizaciones de sitios web públicos, la automatización es absolutamente la mejor ruta.

Ahora, veamos cómo crear fácilmente capturas de pantalla automatizadas de sitios web en WordPress:

Método 1: Usa el plugin Capture para capturas de pantalla y PDF

Si quieres mostrar previsualizaciones de sitios web actualizadas dinámicamente sin lidiar con código personalizado, este es el método más fácil.

Al usar un plugin dedicado como Capture, tus capturas de pantalla se generan automáticamente en segundo plano. Si el sitio web de destino cambia su diseño, tu captura de pantalla se actualizará por sí sola para coincidir con el nuevo aspecto.

Además, como el plugin se encarga de los archivos de imagen, no ocuparán espacio de almacenamiento en tu propio servidor de WordPress.

Si bien existen muchos plugins de captura de pantalla antiguos, la mayoría han sido abandonados. Debido a esto, recomiendo encarecidamente usar el plugin Capture, que se mantiene activamente, para generar de manera confiable estas previsualizaciones profesionales con un simple shortcode.

Paso 1. Instala y configura el plugin Capture

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

Después de activar el plugin, necesitas navegar a Ajustes » Capture. Aquí, deberás hacer clic en el enlace 'Capture Console' para crear una cuenta gratuita y obtener una clave API.

Si bien esto requiere un paso de registro adicional, asegura que el servicio se mantenga estable y confiable en comparación con plugins más antiguos y abandonados.

Debajo de eso, encontrarás la sección de Ajustes predeterminados. El ancho y alto de la ventana gráfica predeterminados (1200x800) funcionan perfectamente para capturas de pantalla estándar de escritorio.

Sin embargo, sugiero cambiar el Retraso predeterminado (segundos) a 2 o 3 segundos. Muchos sitios web modernos tienen pantallas de carga, fuentes personalizadas o animaciones. Agregar un ligero retraso le da al sitio web de destino suficiente tiempo para cargarse completamente antes de que el plugin tome la foto.

Cuando estés satisfecho con tu configuración, asegúrate de hacer clic en el botón 'Guardar cambios'.

Después de eso, recomiendo encarecidamente hacer clic en el botón 'Probar conexiones'. Esto verifica rápidamente que tu clave funciona correctamente, para que no encuentres errores más adelante.

Paso 2. Crea una captura de pantalla usando Shortcode

Ahora, puedes agregar fácilmente una captura de pantalla a cualquier publicación o página usando un shortcode simple. Simplemente busca el bloque Shortcode en el editor de bloques y pega un código como este:

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

¿Cómo aparece la captura de pantalla?

A diferencia de una imagen estándar que subes a tu biblioteca de medios, estas capturas de pantalla automatizadas se generan instantáneamente cuando un visitante carga tu página.

Debido a que actúan como una 'ventana en vivo' al sitio web de destino, este enfoque es increíblemente útil si administras un directorio de temas, un portafolio de diseño web o un blog de reseñas de software.

Puedes garantizar que tus lectores siempre vean la versión más actualizada del sitio web de destino, sin que tú tengas que mover un dedo para reemplazar imágenes antiguas.

Personaliza tus capturas de pantalla

El plugin Capture es increíblemente flexible. Puedes agregar parámetros adicionales al shortcode para cambiar la apariencia de la captura de pantalla:

• Página Completa: Usa full=true para capturar la longitud completa de la página.
• Modo Oscuro: Usa darkMode=true para capturar la versión oscura de un sitio web.
• Bloquear Anuncios: Usa blockAds=true para ocultar anuncios molestos de la captura de pantalla.
• Formato de Imagen: Usa type="webp" para asegurar que tus imágenes estén en un formato moderno y ligero para una carga más rápida.

Por ejemplo, si quisieras una captura de pantalla en modo oscuro y de página completa en formato WebP, tu shortcode se vería así:

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

Este método te da mucho más control que las herramientas gratuitas básicas. Es perfecto para sitios de reseñas profesionales y portafolios.

Método 2: Usa WPCode + mShots (Opción Gratuita)

Si deseas los mismos beneficios dinámicos y de ahorro de espacio que el Método 1, pero prefieres una solución completamente gratuita sin crear cuentas adicionales, este es el método para ti.

Al agregar un shortcode personalizado a tu sitio, puedes acceder a la API mShots de WordPress.com. Al igual que el plugin Capture, mShots genera imágenes en vivo instantáneamente cuando la página se carga y las aloja externamente, ahorrando espacio de almacenamiento de tu servidor.

Paso 1: Agrega un Fragmento de Código Usando WPCode

Para agregar este código de forma segura, recomiendo encarecidamente usar WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado. Te permite agregar código personalizado sin tener que editar directamente el archivo functions.php de tu tema.

Primero, instala y activa el plugin gratuito WPCode. Luego, navega a Fragmentos de Código » + Agregar Fragmento en tu panel de WordPress.

Selecciona ‘Añadir tu código personalizado (Nuevo fragmento)’. Dale un nombre a tu fragmento, como ‘Capturas de pantalla automatizadas’, y asegúrate de que el menú desplegable Tipo de código esté configurado en ‘Fragmento de PHP’.

A continuación, copia y pega el siguiente código seguro en el cuadro de vista previa del código:

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');

Desplázate hacia abajo hasta la sección Inserción y asegúrate de que esté configurada en ‘Insertar automáticamente’.

Luego, cambia el interruptor en la parte superior de la pantalla de ‘Inactivo’ a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.

Paso 2. Crea una captura de pantalla usando Shortcode

Ahora, para mostrar la captura de pantalla automatizada en tus publicaciones o páginas de WordPress, simplemente añade un bloque de Shortcode al editor de contenido y pega el siguiente shortcode:

[automated_shot url="https://example.com" alt="Sitio web de ejemplo" w="800" h="600"]

Asegúrate de reemplazar https://example.com con la URL real del sitio web que deseas capturar. También puedes cambiar fácilmente el texto alternativo, el ancho y la altura directamente dentro del shortcode.

Si tu sitio web de destino actualiza su diseño pero tu captura de pantalla sigue mostrando la versión anterior, la API de mShots puede estar almacenando en caché la imagen. Puedes forzar fácilmente la toma de una nueva captura de pantalla añadiendo un número aleatorio al final de tu URL, así: url="https://example.com/?v=1".

Método 3: Usa Browse AI + Zapier para automatización sin intervención

A diferencia de los dos primeros métodos que muestran vistas previas en vivo alojadas externamente, este método proporciona una verdadera automatización sin intervención al guardar físicamente los archivos directamente en tu sitio de WordPress.

Usaremos Browse AI para capturar automáticamente las capturas de pantalla y Zapier para enviarlas directamente a tu Biblioteca de medios. Esto te da control total sobre tus imágenes.

Dado que tus capturas de pantalla se guardan en tu propio servidor, se cargarán instantáneamente y permanecerán en tu sitio de forma permanente, incluso si el sitio web de destino se desconecta o cambia completamente su diseño.

Paso 1: Crea un robot de captura de pantalla en Browse AI

Primero, ve a Browse AI y crea una cuenta gratuita.

Una vez que hayas iniciado sesión, haz clic en el botón ‘Crear nuevo robot’ y selecciona la opción ‘Monitorizar cambios en el sitio’.

Se te pedirá que introduzcas la URL del sitio web que deseas capturar.

Una vez que introduzcas el enlace, deberás hacer clic en el botón ‘Iniciar entrenamiento del robot’.

Browse AI abrirá entonces una nueva ventana mostrando ese sitio web en vivo.

Simplemente haz clic en el icono del robot en tu pantalla para abrir el menú y selecciona ‘Capturar captura de pantalla’.

Aparecerá un menú pequeño preguntando qué parte de la página quieres capturar. Puedes seleccionar 'Página completa' si quieres una captura de pantalla de arriba a abajo, o 'Parte visible' si solo quieres la sección superior del sitio web.

A continuación, Browse AI te pedirá que le pongas un nombre a la captura de pantalla. Puedes escribir algo fácil de recordar, como 'Captura de pantalla de la página de inicio' o 'Precios de la competencia', y presiona Enter.

Una vez que hayas terminado, haz clic en el botón morado 'Finalizar' en la parte inferior del panel izquierdo para terminar la grabación.

Luego, Browse AI te pedirá que le pongas un nombre a tu nuevo robot.

Escribe algo fácil de reconocer y haz clic en el botón 'Guardar'.

Después de guardar, puedes configurar un horario.

Por ejemplo, puedes decirle al robot que visite automáticamente el sitio y tome una captura de pantalla nueva cada semana o mes.

Una vez terminado, asegúrate de hacer clic en el botón 'Guardar'.

Paso 2: Prepara tu sitio web de WordPress

Antes de construir la automatización, necesitamos darle a Zapier una forma segura de comunicarse con la Biblioteca de Medios de tu sitio web.

En una nueva pestaña, dirígete a tu panel de WordPress e instala y activa el plugin gratuito Zapier for WordPress. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activo en tu sitio, estarás listo para conectar Zapier a tu sitio de WordPress.

Paso 3: Crea un Zap en Zapier

A continuación, necesitas conectar tu robot a WordPress usando Zapier.

Primero, necesitas iniciar sesión en tu cuenta de Zapier. Desde tu panel principal, haz clic en el botón '+ Crear' en el menú superior izquierdo y selecciona 'Zaps' en el menú desplegable.

Cuando abras el constructor, Zapier mostrará un cuadro de texto pidiéndote que describas tu flujo de trabajo para construirlo usando IA. Como queremos configurar esto con precisión, puedes ignorar esta indicación.

En su lugar, mira justo debajo del divisor 'o' y haz clic directamente en el cuadro 'Disparador' para construir tu automatización manualmente.

Aparecerá un menú.

Busca y selecciona Browse AI como tu aplicación.

Busca la sección 'Cuenta' en la barra lateral y haz clic en el botón 'Iniciar sesión' para conectar de forma segura tu cuenta de Browse AI.

Una vez que tu cuenta esté vinculada, haz clic en el cuadro 'Evento Disparador'. ¡No necesitas escribir nada en el campo de búsqueda aquí! Simplemente mira justo debajo de la barra de búsqueda y haz clic en la opción 'Nueva Tarea – Instantánea'.

Esto completará automáticamente el evento disparador por ti. A continuación, necesitas hacer clic en el botón 'Continuar' para pasar a la siguiente pantalla de configuración, donde Zapier te pedirá algunos detalles.

Primero, selecciona tu cuenta en el menú desplegable 'Equipo'. Una vez que lo hagas, aparecerá un nuevo campo donde podrás seleccionar el 'Robot' específico que creaste anteriormente.

Finalmente, configura el 'Tipo de Evento' en 'Tarea finalizada con éxito' para que Zapier solo se ejecute cuando se tome una buena captura de pantalla.

Asegúrate de hacer clic en 'Continuar' y luego en el botón 'Probar disparador'. Este es un paso necesario porque extrae tu captura de pantalla de prueba reciente a Zapier para que WordPress pueda usarla más tarde.

Una vez que tu prueba sea exitosa, haz clic en la segunda caja de tu flujo de trabajo (el paso de Acción) y busca ‘WordPress’ como tu aplicación.

Como ya instalaste el plugin en el Paso 2, conectar tu sitio a Zapier es simple.

Simplemente haz clic en el botón ‘Iniciar sesión’ en la sección Cuenta e ingresa tus credenciales de inicio de sesión de WordPress cuando aparezca la ventana emergente.

Después de que tu sitio web esté enlazado, haz clic en el menú desplegable ‘Evento de Acción’.

Busca y selecciona la opción ‘Subir medio’, y luego haz clic en el botón ‘Continuar’ en la parte inferior de la página.

Ahora, necesitas indicarle a WordPress qué archivo subir. Haz clic en el botón ‘+’ (Insertar datos) en el lado derecho de la caja ‘Archivo’. Esto abrirá una ventana emergente que muestra una lista muy larga de datos de prueba que Zapier acaba de extraer de Browse AI.

Debido a que la lista es tan larga, la forma más fácil de encontrar el archivo correcto es usar la barra de búsqueda en la parte superior de la ventana emergente. Escribe ‘src’ para filtrar las opciones.

Busca la opción que termina en ‘Screenshot Src’ y selecciónala. Es posible que necesites hacer clic en el enlace ‘más’ para ver el nombre completo de la opción.

También puedes completar los campos Título y Texto alternativo si lo deseas, pero puedes dejar de forma segura todos los demás campos opcionales (como Leyenda o Autor) en blanco.

Una vez que hayas terminado, haz clic en ‘Continuar’ y luego haz clic en el botón ‘Probar paso’.

Zapier extraerá mágicamente la captura de pantalla de Browse AI y la subirá directamente a tu Biblioteca de Medios de WordPress.

Si la prueba es exitosa, no olvides hacer clic en el botón Publicar para que tu nuevo Zap se ejecute automáticamente en segundo plano.

El proceso ahora está completamente automatizado. Cada vez que Browse AI capture una nueva imagen, aparecerá automáticamente en tu Medios » Biblioteca en WordPress, lista para que la uses en cualquier publicación o página.

Extra: Cómo mantener consistentes los tamaños de tus capturas de pantalla

Sin importar el método que elijas arriba, necesitarás establecer un ancho y alto para tus imágenes automatizadas. Para mantener tu blog con un aspecto limpio y profesional, recomiendo encarecidamente usar una relación de aspecto estándar de pantalla ancha 16:9.

La mayoría de los temas de WordPress tienen un ancho máximo fijo para las entradas del blog (por ejemplo, 800 píxeles). Si configuras todas tus capturas de pantalla para que coincidan con este ancho usando la relación 16:9, todas tendrán automáticamente la misma altura.

Esto crea una apariencia uniformemente atractiva mientras los usuarios se desplazan por tu artículo.

Para averiguar qué números escribir en tu herramienta de captura de pantalla, puedes usar esta simple matemática:

• Si conoces tu ancho objetivo: Simplemente multiplica tu ancho por 9 y luego divídelo por 16 para encontrar tu altura perfecta.
• Si conoces tu altura objetivo: Simplemente multiplica tu altura por 16 y luego divídelo por 9 para encontrar tu ancho correspondiente.

Por ejemplo, si el área de contenido de tu blog tiene 800 píxeles de ancho, multiplicarías 800 por 9 y luego dividirías por 16. Esto te da una altura perfectamente escalada de 450.

Entonces, simplemente ingresarías tus nuevos números en los parámetros de tu shortcode, como w="800" h="450".

Preguntas Frecuentes

He respondido bastantes preguntas sobre la automatización de imágenes de sitios web. Aquí están algunas de las preguntas más comunes que la gente hace sobre la creación de capturas de pantalla automatizadas de sitios web.

1. ¿Cómo tomo automáticamente una captura de pantalla de página completa de un sitio web en WordPress?

Para tomar una captura de pantalla automática en WordPress, puedes usar un plugin dedicado de capturas de pantalla de WordPress como Capture, integrar una API de imágenes gratuita como mShots de WordPress.com, o construir un flujo de trabajo de automatización usando herramientas como Browse AI y Zapier.

Estas herramientas obtienen automáticamente la URL pública de un sitio web objetivo. Dependiendo del método que elijas, mostrarán una vista previa en vivo al instante o cargarán el archivo de imagen real directamente en tu Biblioteca de Medios de WordPress.

2. ¿Tengo que pagar para crear capturas de pantalla automatizadas de sitios web en WordPress?

No, no tienes que pagar para generar capturas de pantalla automatizadas. Puedes usar métodos completamente gratuitos, como agregar un fragmento de código PHP personalizado a través del plugin gratuito WPCode para conectarte a la API gratuita mShots de WordPress.com.

Además, las plataformas de automatización de terceros como Browse AI y Zapier ofrecen niveles gratuitos que permiten a los propietarios de sitios web capturar un número limitado de capturas de pantalla cada mes sin costo alguno.

3. ¿Puedo usar herramientas de captura de pantalla automatizadas en sitios de WordPress locales, de staging o privados?

No, las API de captura de pantalla automatizadas como mShots o el plugin Capture requieren una URL de sitio web en vivo y de acceso público para funcionar. Estas herramientas externas de captura de pantalla no pueden acceder a sitios web que están alojados localmente en una computadora personal (localhost).

Además, las herramientas de captura de pantalla automatizadas no pueden acceder a entornos de staging de WordPress que están ocultos detrás de una contraseña, un plugin de modo de mantenimiento o un firewall.

4. ¿Es seguro usar una API de terceros para automatizar las capturas de pantalla de sitios web?

Sí, usar API de capturas de pantalla de buena reputación como mShots de WordPress.com o el plugin Capture es generalmente seguro para contenido público. Estos servicios de terceros simplemente visitan una URL de sitio web público y toman una foto de lo que es visible públicamente en Internet.

Sin embargo, los propietarios de sitios web nunca deben usar herramientas de automatización de capturas de pantalla de terceros para capturar páginas privadas del panel de WordPress a las que se ha iniciado sesión o páginas web que contengan datos personales confidenciales.

¿5. Por qué mi captura de pantalla automatizada de WordPress.com mShots muestra una página en blanco?

La API mShots de WordPress.com ocasionalmente puede mostrar un espacio en blanco la primera vez que se solicita una URL de sitio web específica.

Eso se debe a que la API mShots tarda unos segundos en generar la imagen inicial. Si la captura de pantalla automatizada está en blanco, simplemente actualizar la página de WordPress suele solucionar el problema. 

Dado que mShots también almacena en caché las imágenes, puedes forzar a la API a tomar una captura de pantalla nueva del sitio web agregando una cadena de versión aleatoria al final de tu URL de destino en tu shortcode de WordPress.

Recursos adicionales para mejorar tu contenido visual

Espero que este artículo te haya ayudado a aprender cómo crear fácilmente capturas de pantalla automatizadas de sitios web en WordPress. Si deseas llevar el rendimiento de las imágenes y los medios de tu sitio web al siguiente nivel, también puedes consultar estos recursos adicionales:

• Guía para principiantes de SEO de imágenes: optimiza imágenes para motores de búsqueda – Aprende a nombrar y etiquetar correctamente tus capturas de pantalla para generar más tráfico orgánico a tu sitio.
• Herramientas para crear mejores imágenes para tus publicaciones de blog – Descubre nuestras selecciones expertas de las mejores herramientas para crear gráficos, anotaciones y contenido visual atractivos para tus tutoriales.
• Cómo optimizar imágenes para el rendimiento web sin perder calidad – Descubre cómo comprimir correctamente tus capturas de pantalla y fotos para que tu sitio web siga cargando a la velocidad del rayo.
• Los mejores plugins de portafolio de WordPress para diseñadores y fotógrafos – Si estás utilizando capturas de pantalla automatizadas para mostrar tu trabajo de diseño web, estos plugins te ayudarán a exhibirlos de manera hermosa a clientes potenciales.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.