Mostrar información de Google Sheets en WordPress

A veces es necesario publicar datos dinámicos en WordPress. Ya sea que se trate de precios cambiantes, la puntuación de un juego o los precios de las acciones. Google Sheets es una excelente manera de lograr esto. 

En este tutorial, te mostraré paso a paso como mostrar el valor de una celda de Google Sheet en WordPress.

Paso 1: cree o seleccione un proyecto de API de Google

Google permite el acceso a sus servicios a través de cadenas llamadas «API Keys». Deberá generar uno para usarlo para esto. El propósito es básicamente hacer un seguimiento de quién está haciendo qué. Puede eliminar una clave si está siendo mal utilizada. Pero primero, necesitamos ingresar un proyecto API de Google existente. Para hacer esto, visite la consola de desarrolladores de Google aquí:  https://console.developers.google.com .

En la parte superior izquierda, verá «Mi proyecto», o tendrá que crear uno usted mismo.

Paso 2: habilite la API de Google Sheets

Una vez que haya seleccionado su proyecto, haga clic en el cuadro azul «Habilitar API y servicios» junto al tablero, como se muestra en la captura de pantalla anterior. Aparecerá una lista de todos los servicios de Google disponibles para usted. Desplácese hacia abajo hasta que encuentre la «API de Google Sheets». Selecciónalo.

Ahora simplemente haga clic en el botón azul grande «Habilitar» aquí:

Esto tardará unos segundos en activarse. Ahora podrá acceder a los datos de la hoja de cálculo de Google Drive mediante la API. Cuando haya terminado, pasamos al siguiente paso.

Paso 3: Cree una nueva clave de API

Esta clave nos permite identificarnos cada vez que utilizamos un servicio de Google a través de la API. Para generarlo, primero mueva el puntero del mouse hacia la izquierda de la pantalla para que la barra lateral salga volando. Ahora seleccione el elemento de menú «Credentials» con la imagen de una clave al lado:

Aquí, en la pestaña «Credentials», haga clic en el botón azul «Create credentials» y en el desplegable seleccione «API key»:

Esto creará automáticamente su clave API en un nuevo cuadro de diálogo. Puede hacer clic en el icono a la derecha para copiarlo en su portapapeles:

Tenga en cuenta que no debería compartir esta clave con nadie. Si lo hace, y sucede que lo usan indebidamente, se culpará a su cuenta. Por eso lo he borrado yo mismo. Un paso opcional es colocar restricciones en la clave sobre cómo se usará. En este ejemplo, elegí no colocar ninguna restricción, porque ese no es el propósito de este tutorial. Pero deberías investigarlo.

Paso 4: haga que su hoja de cálculo se pueda compartir por enlace

Para que esto funcione, su hoja de Google debe poder compartirse a través de un enlace. Puede hacerlo yendo a su hoja de cálculo y haciendo clic en el botón azul «Compartir» en la parte superior derecha. Esto abrirá las opciones para compartir donde puede activar el uso compartido de enlaces para que se vea así:

Esto no es exactamente lo mismo que hacer pública su hoja. Es imposible que nadie adivine la URL, por lo que no pueden acceder a ella a menos que la compartas con ellos explícitamente.

Paso 5: obtenga el identificador de la hoja de cálculo

Cada hoja de cálculo de Google Drive se identifica con una cadena larga que está presente en la URL que se muestra en la barra de su navegador cuando la está editando. Por ejemplo, aquí está la URL de una hoja en mi sitio:

La cadena es la parte anterior a la parte «editar» de la URL entre dos barras «/» y «/». Es la única secuencia alfanumérica larga de caracteres en la URL, ¡así que no te la puedes perder! Tome nota de este ID de hoja de cálculo. Lo usaremos en el siguiente paso.

Paso 6: inserte este código en functions.php o su complemento PHP personalizado

WordPress nos permite insertar código personalizado en él.  Tiene dos opciones: el archivo functions.php o crear un plugin personalizado (prefiero este último porque es muy útil).

Aquí está el código:

function sheet_value_shortcode($atts) {
    $API = '[Inserta aquí el API Key]';
    $google_spreadsheet_ID = '[Inserta aquí el ID de Google Sheets]';
    $api_key = esc_attr( $API);

    $location = $atts['location'];

    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";	
    $cell_response = $get_cell -> get( $cell_url);
    $json_body = json_decode($cell_response['body'],true);	
    $cell_value = $json_body['values'][0][0];
    return $cell_value;
}
add_shortcode('get_sheet_value', 'sheet_value_shortcode');

En este código, reemplaza los textos con la información que obtuviste antes. Obtuvimos la clave API en el Paso 3 y la ID de la hoja de cálculo en el Paso 5. ¡Este código abreviado le permitirá mostrar una sola celda de las hojas de Google!

Ahora la parte aburrida está hecha. ¡El código está en su lugar y es hora de especificar qué celda desea!

Paso 7: especifique la ubicación de la celda en las hojas de cálculo de Google

Cada hoja de cálculo de Google se compone de hojas. Estas son pestañas en la parte inferior, y cada una tiene un nombre. De forma predeterminada, se denominan «Hoja1», «Hoja2», etc.

Las celdas, por otro lado, se identifican de forma única por la letra de su columna (A, B, C, etc.) y el número de fila (1, 2, 3). Así que tenemos varias ubicaciones de celdas: A1, C32, H9, etc.

Para especificar la ubicación de una celda, solo damos el nombre de la hoja y el número de celda, separados por un signo de exclamación (!).

Así, por ejemplo, la siguiente ubicación:

Hoja1!A1

Hace referencia a la primera hoja y a la primera celda en la parte superior izquierda. Podemos tener otra ubicación como Sheet3!G5 que se refiere a la quinta hoja (nombre predeterminado) y el número de celda G5.

Tenga en cuenta que podemos cambiar el nombre de las hojas para que sean más relevantes. En ese caso, simplemente use el nombre cambiado en lugar de «Hoja1», «Hoja2», etc.

Paso 8: (Opcional) Use un rango con nombre para hacer referencia a una celda en su lugar

Si va a usar mucho las celdas de Hojas de cálculo de Google, es fácil perder la noción de a qué se refiere. No recordará que Sheet5!F78 se refiere a la edad de Andrés, por ejemplo. En cambio, me resulta más fácil crear un intervalo con nombre y especificar la celda de esa manera. Cómo hacemos esto?

Abra su hoja de cálculo y haga clic en el elemento de menú «Datos» en la parte superior:

Ahora seleccione «Intervalos con nombre» o «Named ranges» en inglés, como se muestra en la captura de pantalla.

Aparecerá una sección del lado derecho de la pantalla. Haga clic en «Añadir un intervalo» y asigne a su celda un nombre significativo. En mi caso, lo he llamado first_cell_first_row para referirme a Sheet1!A1.

Ingrese la ubicación de su celda según lo determinado en el Paso 7 y haga clic en «Listo».

Ahora puede hacer referencia a este rango con nombre por su nombre en lugar del poco intuitivo formato de hoja!celda. Puede crear tantos rangos con nombre como desee:

Paso 9: use el código abreviado para mostrar una sola celda

El código que insertamos en el Paso 6, nos permite usar un shortcode de esta forma:

[get_sheet_value location="Ubicación de celda"]

Reemplace la Ubicación de la celda con el nombre de la celda que obtuvo en el Paso 8 o en el Paso 9 (mantenga las comillas dobles). En mi ejemplo, first_cell_first_row o Sheet1!A1 tiene el valor «ID» como se muestra aquí:

Uso el shortcode en mi editor de WordPress así de dos maneras. El primero es con el rango con nombre, y el segundo es usando Sheet1!A1:

Y aquí está el resultado como se esperaba:

Como puede ver, ambos códigos abreviados me dan el valor «ID» que, como decimos, era el valor de la celda a la que hice referencia. Puede usar este código abreviado tantas veces como desee en cualquier lugar de sus publicaciones o páginas de WordPress, ¡y mostrará el valor dinámico de la celda única de la hoja de cálculo de Google de su elección!

Cómo funciona

Podemos extraer los datos usando Google Sheets API v4, que nos permite construir una URL para obtener la celda o el rango que queremos. El formato es así:

https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$ubicación?&key=$api_key

Esto toma los siguientes parámetros:

1. El ID de la hoja de cálculo -> $google_spreadsheet_ID
2. El rango -> $ubicación
3. La clave API -> $api_key

El «rango» puede referirse a cualquier rango de celdas. Especificamos los nombres de las celdas superior izquierda e inferior derecha separados por dos puntos (:). Es solo que para este shortcode, solo quiero mostrar un valor de celda individual.

La parte molesta es que los datos devueltos están en formato json, como puedes ver aquí:

Entonces, incluso podemos mostrar una tabla con los valores devueltos si especificamos un rango. Es solo que analizar a través de json y crear una tabla a partir de él con las etiquetas <table>, <th> y <tr> es un poco arduo. Y el formato de las celdas originales tampoco se transfiere. Por lo tanto, las tablas que obtiene son bastante limitadas y no puede tener una personalización detallada. Por esta razón, esta solución es buena solo para extraer los valores individuales de hojas de cálculo de Google. Si quieres transferir tablas enteras manteniendo el formato echa un vistazo a estos plugins.

Diseñé mi shortcode con opciones mínimas, ya que está destinado a usarse con mucha frecuencia, posiblemente varias veces en una sola página o publicación de WordPress. Y quería que fuera fácil de escribir y entender. Por supuesto, puede cambiar el código abreviado para que se adapte a sus necesidades.

¡Buena suerte con tu sitio dinámico de WordPress!

Nota: hay un límite de 100 llamadas API por usuario por segundo. Entonces, si tiene más que eso se podría bloquear.

Fuente: https://www.wp-tweaks.com/display-a-single-cell-from-google-sheets-wordpress/

Extra: Actualizar Automáticamente los Valores desde Google Sheets

A petición de Iván en los comentarios he añadido esta sección extra por si te puede interesar.

Es posible que, después de implementar la funcionalidad para mostrar datos de Google Sheets en WordPress, notes que los valores de la hoja de cálculo no se actualizan de inmediato en tu sitio web cuando los modificas en Google Sheets. Esto puede deberse al manejo de caché de WordPress, que almacena temporalmente los resultados de los shortcodes para mejorar el rendimiento.

Desactivar el Caché del Shortcode

Para forzar que el valor de la celda se actualice cada vez que se carga la página, puedes modificar el código del shortcode para eliminar cualquier caché almacenada. A continuación te muestro cómo hacerlo:

function sheet_value_shortcode($atts) {
    $API = '[Inserta aquí el API Key]';
    $google_spreadsheet_ID = '[Inserta aquí el ID de Google Sheets]';
    $api_key = esc_attr( $API);

    $location = $atts['location'];

    // Desactivar la caché temporalmente
    $transient_key = 'sheet_value_' . $location;
    delete_transient($transient_key); // Elimina cualquier caché guardada previamente

    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";
    $cell_response = $get_cell -> get($cell_url);
    $json_body = json_decode($cell_response['body'], true);  
    $cell_value = $json_body['values'][0][0];
    
    return $cell_value;
}

Esta modificación asegura que WordPress no almacene en caché los resultados del shortcode, de modo que los valores de la hoja de cálculo siempre se mostrarán actualizados.

Uso de Caché Controlada (Opcional)

Si prefieres mantener cierta optimización sin perder la actualización de los datos, puedes implementar una caché temporal con transitorios. Esto permite almacenar los datos durante un tiempo específico (por ejemplo, 10 minutos), lo que reducirá la cantidad de llamadas a la API, pero permitirá ver los cambios con una leve demora.

function sheet_value_shortcode($atts) {
    $API = '[Inserta aquí el API Key]';
    $google_spreadsheet_ID = '[Inserta aquí el ID de Google Sheets]';
    $api_key = esc_attr( $API);
    
    $location = $atts['location'];
    
    // Crea una clave única para el transitorio
    $transient_key = 'sheet_value_' . $location;
    
    // Intenta recuperar el valor desde la caché
    if ( false === ( $cell_value = get_transient( $transient_key ) ) ) {
        // Si no hay valor en caché, solicita los datos desde la API
        $get_cell = new WP_Http();
        $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";
        $cell_response = $get_cell -> get( $cell_url );
        $json_body = json_decode( $cell_response['body'], true );
        $cell_value = $json_body['values'][0][0];
        
        // Guarda el valor en un transitorio durante 10 minutos (600 segundos)
        set_transient( $transient_key, $cell_value, 600 );
    }

    return $cell_value;
}

En este caso, el valor se almacenará en caché por 10 minutos. Pasado este tiempo, el shortcode volverá a realizar la solicitud a Google Sheets para obtener el valor actualizado.

Apunte final importante

Además de implementar estas soluciones, es importante que revises si tu servidor o plugins de caché (como WP Super Cache o W3 Total Cache) están activados. Si es así, asegúrate de excluir de la caché las páginas donde estés utilizando el shortcode para que puedan reflejar los cambios.

Estas opciones te permiten controlar cómo y cuándo los valores se actualizan en tu sitio, brindando flexibilidad según tus necesidades de rendimiento o actualización en tiempo real.