Cómo generar capturas de pantalla para tu sitio de WordPress

Spanish (Español) translation by Esther (you can also view the original English article)

En este tutorial aprenderás un truco secreto no tan secreto: cómo generar capturas de pantalla de sitios web para usar en tus publicaciones de WordPress usando un servicio proporcionado por WordPress.com. Incluso convertiremos esto en un código corto fácil de usar para mostrar las capturas de pantalla... ¡comencemos!

Antecedentes

Es un secreto a voces, y lo ha sido durante un par de años, que WordPress expone un generador de capturas de pantalla en su subdominio s.wordpress.com. Y el rumor es que mientras no se te excedas en su uso, puedes usarlo gratuitamente. WordPress.com lo utiliza para generar capturas de pantalla para sus diversas actividades.

Por ejemplo, aquí está la url para mostrar una captura de pantalla de wp.tutsplus con un ancho de 400 píxeles:

https://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400

Puede que tengas que volver a hacer clic en el enlace, ya que el generador tarda un poco en almacenar la imagen.

Lo que haremos:

escribir una función de código corto para mostrar una captura de pantalla
usar el código corto para mostrar una captura de pantalla como parte del bucle de post usando un campo personalizado para la url

Paso 1: La función de código corto

Nuestro código corto se usará como:

1
2	[ss_screenshot width='300' site='https://wp.tutsplus.com']

Puedes añadir el código al archivo functions.php en tu directorio de temas. El código completo está disponible en el enlace de la fuente anterior.


add_shortcode('ss_screenshot', 'ss_screenshot_shortcode');

function ss_screenshot_shortcode($atts){

  $width = intval($atts['width']);
  
  $width = (100 <= $width && $width <= 300) ? $width : 200;
  
  $site = trim($atts['site']);
  
  if ($site != ''){
  
    $query_url =  'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width;
    
    $image_tag = '<img class="ss_screenshot_img" alt="' . $site . '" width="' . $width . '" src="' . $query_url . '" />';
    
    echo '<a class="ss_screenshot_link" href = "' . $site . '">' . $image_tag . '</a>'; 
  
  }else{
  
    echo 'Bad screenshot url!';
  
  }
}

Lo que hace este código:

declara un atajo llamado ss_screenshot con la función add_shortcode
la función de atajo acepta el array de $atts que contiene los dos atributos del código corto: width (ancho) y site (sitio)
el atributo de ancho se convierte en un entero y comprueba que está dentro de un rango adecuado, en este caso entre 100 y 300 píxeles. Nota: utilizamos el operador de ternario de PHP para asignar un ancho por defecto de 200 si el ancho suministrado está fuera de nuestro rango. Esto también tiene en cuenta un atributo de anchura que falta.
el atributo del sitio se recorta para eliminar los espacios accidentales a la izquierda y a la derecha
creamos una url de consulta agregando un atributo de sitio urlencoded y el atributo width
finalmente envolvemos el query_url en una etiqueta de imagen y una etiqueta de enlace para que los usuarios puedan hacer clic en la captura de pantalla y ser dirigidos al sitio

Paso 2: Probar el código corto

En un post o página, inserta este código corto:

1
2	[ss_screenshot width='300' site='http://amazon.com']

Cuando veas el post o la página, deberías ver una captura de pantalla de 300 píxeles de ancho de Amazon. Recuerda, puede que tengas que refrescar la página después de unos segundos para ver la captura de pantalla en caché. Juega con el ancho y mira lo que pasa cuando te sales del rango. Por cierto, puedes establecer el rango de ancho que quieras. Además, prueba una url mala: deberías ver el mensaje de advertencia en lugar de una captura de pantalla.

Ahora que tenemos un código corto de trabajo, veamos cómo podemos incorporarlo en nuestro bucle de WordPress.

Paso 3: Configuración de campo personalizado

Imaginemos un escenario en el que queremos mostrar una captura de pantalla de un sitio al lado de cada uno de nuestros posts. Por razones de formato y usabilidad, es mejor automatizar este proceso añadiendo un campo personalizado a nuestra pantalla de edición de mensajes. En ese campo podemos introducir una url de sitio que puede ser usada en el post loop para mostrar una captura de pantalla usando nuestro nuevo código corto.

Si el cuadro de campo personalizado no se muestra en la pantalla de edición de mensajes, mira en la parte superior derecha de la pantalla y deberías ver la pestaña Screen Options (Opciones de pantalla). Haz clic y marca la casilla Custom Fields (Campos personalizados). Ahora deberías ver algo como esto en la parte inferior de la pantalla:

Haz clic en el enlace Enter New (Introducir nuevo) y crea un nuevo campo personalizado llamado screenshot_url. Esto es lo que deberías ver:

Ahora cuando se crea/edita un post (el campo personalizado aparece para todos los posts) se puede introducir una url para generar una captura de pantalla relacionada con el post.

Paso 4: Añadir la pantalla al bucle

Aquí hay una versión seriamente recortada del bucle de publicación estándar de WordPress (como se encuentra en un archivo de plantilla de tema) incluyendo nuestro código de visualización de pantalla:


if (have_posts()) while (have_posts()) : the_post();

  the_title();
  
  $url = get_post_meta($post->ID, 'screenshot_url', true);
  
  do_shortcode('[ss_screenshot width="280" site="' . $url . '"]'); 
  
  the_content();

endif;
endwhile;

Lo que hace este código:

comprueba si tenemos posts, empieza a hacer un bucle y muestra el título del post
obtener el contenido del campo personalizado de screenshot_url pasando el ID del post actual y el nombre del campo personalizado a la función get_post_meta
porque estamos en un archivo de plantilla, usamos la función do_shortcode para analizar nuestro código corto que incluye la url de la captura de pantalla de este post
entonces mostramos el contenido del post y terminamos el bucle

Paso 5: Probar el bucle

Si creaste un post con el título Honda Accord y le diste una url de pantalla de http://www.honda.com, usando tu nueva configuración de bucle, deberías ver algo como esto:

Conclusión

En lugar de mostrar un mensaje de advertencia severo si un mensaje no tiene una url de captura de pantalla adjunta, podrías mostrar una imagen predeterminada.

Si no deseas utilizar el generador de capturas de pantalla de WordPress, o si tienes necesidades más grandes, puedes utilizar la opción gratuita en un servicio de capturas de pantalla como http://www.shrinktheweb.com Podrías aplicar las técnicas utilizadas en este tutorial a cualquier servicio de capturas de pantalla.

Cosas para recordar:

las capturas de pantalla tardan unos segundos (normalmente) en generarse, así que refresca la página
codifica la url que se envía al servicio de capturas de pantalla
comienza tus urls con http://
si tienes necesidades más exigentes de capturas de pantalla, utilice un servicio comercial

1
2	add_shortcode('ss_screenshot', 'ss_screenshot_shortcode');
3
4	function ss_screenshot_shortcode($atts){
5
6	$width = intval($atts['width']);
7
8	$width = (100 <= $width && $width <= 300) ? $width : 200;
9
10	$site = trim($atts['site']);
11
12	if ($site != ''){
13
14	$query_url = 'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width;
15
16	$image_tag = '<img class="ss_screenshot_img" alt="' . $site . '" width="' . $width . '" src="' . $query_url . '" />';
17
18	echo '<a class="ss_screenshot_link" href = "' . $site . '">' . $image_tag . '</a>';
19
20	}else{
21
22	echo 'Bad screenshot url!';
23
24	}
25	}