Tinkerwell para desarrollo en WordPress

Tinkerwell es un editor de código para Laravel pero también funciona con WordPress. Ya no tendrás que adivinar el resultado de tus funciones en WordPress.

En ocasiones, un desarrollador quiere probar su código JavaScript o PHP antes de correrlo en el navegador. Este proceso es tedioso para PHP cuando queremos probar código complejo.

En JavaScript es fácil abrir la consola del navegador y hacer un par de pruebas de tu código. Sin embargo, en PHP las cosas se complican.

Una de las clásicas opciones para ver el resultado de un script en PHP son:

  • Crear un archivo PHP y ejecutarlo desde la terminal.
  • Abrir un sitio como implode.io y ejecutar tu código.

En mi opinión, las opciones anteriores funcionan para scripts sencillos. Pero ¿qué me dices cuando trabajas con un framework como WordPress? Incluyen más configuración y procesamiento para realizar una tarea.

El problema con WordPress

WordPress suele ser frustrante en cuanto a desarrollo. De vez en cuando tienes que probar el resultado de ciertas functiones internas de WP y no quieres hacer un var_dump() en tu archivo functions.php para saber ese resultado.

Por ejemplo, tenemos la función get_plugins() la cual nos permite ver los plugins instalados en nuestro WordPress. O incluso la función wp_nav_menu() para ver el HTML de nuestro menú.

Son de ese tipo de funciones que necesitas saber cómo se ve el resultado antes de poder manipularlos. Así que necesitamos hacer más fácil este proceso.

Tinkerwell, un editor de código mágico

La anterior problemática cambió con un programa llamado Tinkerwell, el cual es un editor de código donde solo lo abres, escribes tu código PHP, ejecutas y ves el resultado. Tanto en local como conexiones remotas.

Originalmente está creado para ser usado con Laravel pero han ido creando, a lo que ellos llaman, “drivers” para usarlo con otras plataformas como WordPress, Drupal y entre otras.

Puedes ver la lista completa de drivers en GitHub.

Configurando Tinkerwell con WordPress

Tinkerwell nos permite abrir un directorio con una instalación WordPress. El punto más importante es que ese directorio tenga, obligatoriamente, el archivo wp-load.php.

Yo ya tengo una instalación WordPress configurada con WAMP, así que todos esos archivos de configuración están en esta ruta de mi computadora:

D:\Programas\wamp64\www\wordpress

¡Ojo! Los servicios de PHP, MySQL y Apache (o tu stack preferido) ya deben estar encendidos.

Ahora si, en Tinkerwell damos click en el ícono de la carpeta o CTRL+O para seleccionar nuestro directorio WordPress.

La acción anterior debe de poner el entorno de trabajo en tu instalación WordPress.

Para confirmar, dentro del editor escribe la función home_url() y aprieta CTRL+R o click en el botón de play.

Resultado de la función home_url() en Tinkerwell.
Resultado de la función home_url() en Tinkerwell.

Si la configuración es correcta, deberías ver el enlace de tu sitio WordPress.

Probando funciones de WordPress

Este post pudo haber terminar en el párrafo anterior; sin embargo, quiero enseñarte unas funcionalides extras de Tinkerwell que pueden ser muy prácticas al momento de desarrollar en WordPress.

Caso 1: Obteniendo posts en específico

Imagina que estás desarrollando un plugin donde tienes que mostrar ciertos posts con las siguientes características:

  • Deben pertenecer a la categoría “Programación” (el ID de la categoría es 4).

Para lograrlo debemos usar la función get_posts() con ciertos argumentos:

$args = array(
  'numberposts' => -1,
  'category'    => 4,
);

get_posts( $args );

Aquí es donde te preguntas, ¿será que el resultado de mi función sea el esperado? Usemos Tinkerwell para verificar.

Mostrando los títulos de los posts de la categoría "Programación".
Mostrando los títulos de los posts de la categoría “Programación”.

Sabremos si el resultado es correcto si los posts dentro de la categoría “Programación” se asemejan con los resultados en Tinkerwell.

Mostrando los posts de la categoría "Programación" en WordPress.
Mostrando los posts de la categoría “Programación” en WordPress.

Te invito a probar la misma función pero con diferentes argumentos, por ejemplo, obtener posts de una fecha en particular.

Caso 2: Cambiando la URL usando filtros (hooks)

Por si fuera poco, también podemos ver con anticipación cómo se verán los resultados que son cambiados por los filtros (filter hooks).

Un cliente te ha pedido que debes cambiar el resultado de la función home_url() bajo la condición de que si la URL actual es HTTP, la URL cambie a otro dominio.

De entrada, el resultado de la función retorna el siguiente resultado:

Resultado de la función home_url() en Tinkerwell.
Resultado de la función home_url() en Tinkerwell.

Ahora agregamos el filtro con el siguiente código, donde decimos que si la URL no es HTTPS deberá cambiar el valor por https://roelmagdaleno.com.

function rmr_change_home_url( $url, $path, $scheme ) {
  return 'https' === $scheme ? $url : 'https://roelmagdaleno.com';
}

add_filter( 'home_url', 'rmr_change_home_url', 10, 3 );

home_url();

¡Ojo! Debes llamar el filtro antes de llamar a la función principal para que este pueda ser aplicado antes de enviar el resultado final.

El resultado en Tinkerwell es aplicado correctamente.

Resultado de la función home_url() en Tinkerwell después de usar filtros.
Resultado de la función home_url() en Tinkerwell después de usar filtros.

Caso 3: Viendo resultados de shortcodes

Ahora estás trabajando con un shortcode, pero necesitas ver el resultado generado (comúnmente HTML). Digamos que el shortcode pertenece al plugin Contact Form 7.

El shortcode es el siguiente [contact-form-7 id="50" title="Contact form 1"] y la función principal para ejecutar un shortcode es do_shortcode().

Entonces el código sería de esta manera:

do_shortcode( '[contact-form-7 id="50" title="Contact form 1"]' );

Y si lo ejecutas en Tinkerwell, obtienes el HTML generado por el shortcode. De esta forma puedes ver lo que tu página renderizará al momento de llamar el shortcode.

Resultado de un shortcode en Tinkerwell.
Resultado de un shortcode en Tinkerwell.

BONUS: Usando Tinkerwell con Local by Flywheel

Si usas Local by Flywheel para desarrollar en WordPress, Tinkerwell también funciona con este entorno de trabajo; sin embargo, hay que hacer un ligero cambio en el archivo wp-config.php.

Dentro de este archivo tienes la constante DB_HOST que originalmente su valor es localhost; si ejecutas Tinkerwell, este lanzará un error de conexión a la base de datos.

Para solucionar esto, el valor correcto de la constante deberá ser localhost:<DB_PORT>, es decir, tenemos que especificar el puerto donde está escuchando la base de datos:

define( 'DB_HOST', 'localhost:10047' );

El puerto de la base de datos lo consigues dentro de la pestaña DATABASE del programa Local by Flywheel.

Después de agregar este cambio, reinicia el sitio, has una prueba en Tinkerwell y no deberá haber ningún error.

Deja un comentario