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

Tomar capturas de pantalla para un tutorial puede sentirse como una tarea interminable. Tienes que capturar, recortar, anotar y subir cada imagen, repitiendo el proceso una y otra vez.

Conocemos esta lucha muy bien por crear nuestras propias guías aquí en WPBeginner. Es una gran pérdida de tiempo que puede ralentizar mucho tu flujo de trabajo de creación de contenido.

La buena noticia es que puedes automatizar todo este proceso. Esto no solo te ahorra tiempo valioso, sino que también ayuda a que tu sitio se vea profesional y consistente.

En este artículo, te 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 tienes un sitio web de WordPress, es posible que desees crear y agregar capturas de pantalla automatizadas a tus publicaciones para dar a los lectores potenciales una forma rápida de ver de qué trata tu contenido.

Esto puede aumentar la participación del usuario y contribuir al SEO de tu sitio web. Las imágenes relevantes y de alta calidad ayudan a los motores de búsqueda a comprender mejor tu contenido y pueden mejorar las señales de participación de los visitantes, como el tiempo en la página.

De manera similar, puedes usar capturas de pantalla automatizadas de sitios web para crear una copia de seguridad visual de tu sitio antes de actualizar un tema o realizar cualquier otro cambio. Esto puede ayudarte a comparar y ver la diferencia entre los estilos nuevos y antiguos de tu sitio web.

Las capturas de pantalla automatizadas también pueden comparar diferentes servicios o sitios web, guiar a tu lector a través de un tutorial paso a paso y rastrear el 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
• Método 2: Crear capturas de pantalla automatizadas agregando código a WordPress
• Extra: Toma capturas de pantalla manualmente para tu sitio web
• Preguntas Frecuentes
• Recursos adicionales

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

Este método es más fácil y, por lo tanto, se recomienda para principiantes y usuarios que no quieren 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.

Importante: Ten en cuenta que al momento de escribir esto, este plugin no ha sido actualizado en mucho tiempo. Si bien aún podría funcionar, podría representar un riesgo de compatibilidad o seguridad. Recomendamos probarlo primero en un sitio de staging, y asegúrate siempre de tener una copia de seguridad completa de WordPress antes de instalarlo.

Tras la activación, el plugin funcionará directamente, y no hay configuraciones que ajustar.

Ahora, simplemente visita una página o publicación donde quieras agregar una captura de pantalla automatizada del sitio web desde la barra lateral de administración de WordPress.

Aquí, haz clic en el botón ‘Añadir bloque’ (+) en la esquina superior izquierda de la pantalla para abrir el menú de bloques. Luego, añade el bloque ‘Browser Shots’ en el editor.

Una vez que hayas hecho eso, agrega la URL del sitio web para el que deseas obtener una captura de pantalla automatizada y haz clic en el botón ‘Cargar imagen’.

El plugin ahora agregará automáticamente una captura de pantalla del sitio web que elegiste. Ahora puedes agregar un texto alternativo para la imagen y cambiar su ancho y alto desde el panel de bloques a la derecha.

Activar el interruptor 'Usar enlace' en el panel te permite agregar un enlace a la captura de pantalla que te dirige al sitio web.

También puedes activar el interruptor 'Enlace a la publicación actual' si deseas agregar el enlace de la publicación a la captura de pantalla.

Finalmente, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tu configuración.

Ahora puedes visitar tu sitio de 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 tu 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 automatizadas agregando código a WordPress

Este método requiere que agregues código a tus archivos de WordPress. Para crear capturas de pantalla automatizadas, debes agregar código personalizado al archivo functions.php de tu tema.

Sin embargo, recuerda que el más mínimo error en el código puede dañar tu sitio y hacerlo inaccesible.

Es por eso que recomendamos usar WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado, lo que hace que sea muy seguro y fácil agregar código personalizado.

Consejo de experto: En WPBeginner, usamos WPCode para administrar todos los fragmentos de código personalizados en nuestra cartera de sitios web. Permite a nuestro equipo de desarrollo agregar y organizar código de forma segura sin tener que editar directamente el archivo functions.php del tema.

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

Después de la activación, visita la página Fragmentos de código » + Agregar fragmento desde el panel de WordPress.

Una vez que estés allí, haz clic en el botón 'Usar fragmento' debajo de la opción 'Agregar tu código personalizado (Nuevo fragmento)'.

Ahora serás llevado a la página 'Crear fragmento personalizado', donde puedes comenzar escribiendo un nombre para tu fragmento. El nombre puede ser cualquier cosa que te ayude a identificar el código.

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

Después de eso, simplemente copia y pega 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");

Similar al plugin que mencionamos anteriormente, este código también utiliza la API Mshots de WordPress.com para generar capturas de pantalla sobre la marcha.

Ahora, puedes agregar la URL del sitio web cuyas capturas de pantalla automatizadas deseas tomar junto a la línea "url" =$gt; en el código.

También puedes agregar el ancho y alto que prefieras para las capturas de pantalla junto a las líneas "w" => y "h"=> en el código.

A continuación, desplázate hacia abajo hasta la sección 'Inserción' y elige el modo 'Inserción automática'.

El código ahora se ejecutará automáticamente al activarse.

Finalmente, desplázate hacia arriba en la página y cambia el interruptor ‘Inactivo’ a ‘Activo’.

A continuación, haz clic en el botón 'Guardar fragmento' para almacenar tu configuración y activar el fragmento.

Ahora, para mostrar una captura de pantalla de un sitio web en tus publicaciones y páginas de WordPress, deberás ingresar el shortcode de esta manera:

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

Puedes reemplazar los campos URL y Alt con tus propios valores.

Primero, abre la página/publicación en el editor de bloques desde el panel de WordPress y haz clic en el botón 'Agregar bloque' (+).

Desde aquí, agrega el bloque 'Shortcode' a la página/publicación. Luego, agrega el shortcode anterior y reemplázalo con tus propios valores.

Finalmente, haz clic en el botón 'Actualizar' o 'Publicar' para almacenar tu configuración.

Ahora, visita tu sitio de WordPress para ver la captura de pantalla automatizada en acción.

Extra: Toma capturas de pantalla manualmente para tu sitio web

Si no deseas usar capturas de pantalla automáticas, puedes tomarlas manualmente con diferentes herramientas como Droplr.

Esto te da más libertad para elegir un área específica para una imagen en comparación con las capturas de pantalla automáticas. Además, puedes editar estas imágenes en Adobe Photoshop y agregarles otros elementos como flechas o cuadros rojos.

Esta función no está disponible para capturas de pantalla automáticas donde los plugins o el código obtienen la imagen automáticamente por ti.

Para tomar una captura de pantalla con Droplr, primero debes instalar la aplicación en tu computadora. Una vez que lo hagas, haz clic en el ícono de Droplr en la barra de tareas de Windows o Mac y selecciona la opción 'Captura de pantalla'.

A continuación, puedes seleccionar el área donde quieres tomar la captura de pantalla.

Droplr abrirá esa imagen en un navegador donde podrás descargarla o compartir el enlace con otros. Para más información, consulta nuestro tutorial sobre cómo tomar una captura de pantalla en WordPress.

Preguntas Frecuentes

Aquí tienes algunas de las preguntas más comunes que recibimos sobre la creación de capturas de pantalla automatizadas en WordPress.

¿Son las capturas de pantalla automatizadas tan buenas como las manuales?

Depende de tus necesidades. Las capturas de pantalla automatizadas son excelentes para la velocidad y la consistencia, pero las capturas manuales te dan más control. Con las capturas manuales, puedes seleccionar áreas específicas, añadir anotaciones como flechas o texto, y optimizar la imagen antes de subirla.

¿El uso de capturas de pantalla automatizadas ralentizará mi sitio web?

No, no deberían afectar el rendimiento de tu sitio. Los métodos descritos en este artículo utilizan un servicio externo de WordPress.com para generar las imágenes. Esto significa que las imágenes se cargan desde sus servidores, no desde los tuyos, lo que evita una carga adicional en tu hosting.

¿Puedo personalizar el aspecto de las capturas de pantalla automatizadas?

La personalización es limitada. Normalmente puedes definir el ancho y la altura de la captura de pantalla. Sin embargo, no puedes agregar anotaciones, efectos ni recortar una parte específica de la página como podrías hacerlo con una herramienta de edición manual de capturas de pantalla.

¿Las capturas de pantalla se guardan en mi Biblioteca de Medios de WordPress?

No, las capturas de pantalla se generan sobre la marcha y no se almacenan en tu Biblioteca de Medios. Esto ayuda a ahorrar espacio de almacenamiento en tu cuenta de hosting, ya que las imágenes se sirven directamente desde los servidores de WordPress.com.

¿Por qué no aparece mi captura de pantalla automatizada?

El servicio de WordPress.com que genera estas capturas de pantalla funciona muy bien para sitios web públicos y en vivo. Sin embargo, puede que no sea capaz de capturar pantallas de sitios web que se encuentran en una computadora local (localhost), protegidos con contraseña o detrás de ciertos firewalls. Tampoco puede renderizar perfectamente páginas que usan animaciones complejas o que requieren interacción del usuario para mostrar contenido.

Recursos adicionales

Ahora que sabes cómo automatizar las capturas de pantalla de sitios web, también podrías querer consultar estas otras guías útiles:

• Guía para principiantes sobre SEO de imágenes – Aprende a optimizar correctamente tus imágenes para los motores de búsqueda y a obtener más tráfico a tu sitio.
• Herramientas para crear mejores imágenes para las entradas de tu blog – Consulta nuestras selecciones expertas de las mejores herramientas para crear imágenes más atractivas para tus artículos.

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