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, le mostraré cómo mostrar el valor de una sola celda en las hojas de cálculo de Google usando un código abreviado simple. Aquí lo que cubriré paso a paso.

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.

Crear un nuevo proyecto API de Google

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.

Seleccione la API de Hojas de cálculo de Google

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

Habilitar la API de Hojas de cálculo de Google

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:

Seleccione Credenciales en Google Developer Console

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

Crear una nueva clave de API

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:

Copie la clave API al 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í:

Habilitar el uso compartido de enlaces para la hoja de cálculo de Google

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:

Obtener el ID de la hoja de cálculo

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 un plugin PHP 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:

Menú de datos para rangos con nombre en hojas de cálculo de Google

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.

Crear un rango con nombre

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:

Lista de todos los rangos con nombre

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í:

El valor es "ID" para la primera celda

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:

Usando el Shortcode en el Editor de WordPress

Y aquí está el resultado como se esperaba:

Cómo mostrar una sola celda de Google Sheets

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í:

La API de Hojas de cálculo de Google devuelve Json

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/

👇Tu comentario