NO te pierdas las novedades de este repositorio de plugins

Development Helper

Descargar plugin

Un plugin para WordPress muy util para usar durante el desarrollo web, ya que incluye muchas mejoras que en esta página podrás ver y entre las que destacan: cambia admin bar, redirecciones a producción, activa debug, auto instalación plugins, evita cacheado assets,…

Y lo más importante, al ser un plugin “marca blanca” puedes modificarlo y ampliarlo a tu gusto. Además dispone en su código de un par de ficheros de fácil configuración ( setup/activation.php & setup/deactivation.php ) para que alteres parte de su comportamiento según el proyecto a desarrollar y sin tener que indagar dentro de todo el código del plugin.

Destaca el “admin bar” si estas registrado

Lo primero que notarás al instalar este plugin es que la barra superior que aparece al loguearte en WordPress cambia su color habitual para destacar que te encuentras en modo “developer” con este plugin.

También tendrás en todo momento en dicha barra llamada “admin bar” o barra de administración de WordPress de modo destacado la url en la que te encuentras… para así no despistarte por si estas tocando donde no debes. 😉

Nueva “admin bar” y nuevos plugins auto instalados

Instalación automática de otros plugins de ayuda para el desarrollo web

Otra cosa a destacar que realiza este plugin de modo automático nada más lo instalas es el instalar otros plugins que te serán de gran utilidad para el desarrollo web.

Concretamente viene de base preparado para instalar los siguientes plugins:

  • Fast User Switching: te permite cambiar de usuario y rol de usuario desde la propia barra de administración citada, para así poder ver cómo se comporta WordPress ante diferentes tipos de usuarios registrados.
  • Query Monitor: también accesible desde la barra superior, es una maravilla de plugin para controlar un sinfin de aspectos utiles para el desarrollo web, debug y mejoras de rendimiento, mostrando: consultas de base de datos, errores de PHP, hooks,… lo mejor es que lo pruebes.

Estos son 2 plugins que se instalan de modo automático, pero en realidad puedes hacer que instale aquellos que tu consideres, ya que puedes hacerlo de un modo fácil desde el fichero setup/activation.php

<?php

/** WRITE HERE YOUR DEVELOPMENTS PLUGINS TO INSTALL **/
/** to install on activation and later remove on deactivation **/
$default_plugins_to_install = [ //write slugs of each plugin
    'query-monitor',
    'fast-user-switching',
];

Por otra parte puedes desactivarlos en cualquier momento desde el botón habilitado para ello y que puedes ver en la siguiente imagen: página con el listado de plugins.

Botón para desactivar todos los plugins instalados de modo automático

Una vez desactivados todos los plugins que decidiste instalar de modo automático al instalar este plugin aquí presentado, al desactivarlo se encargará de desinstalarlos todos; salvo que decidas no hacerlo si modificas el fichero setup/deactivation.php

Activación y desactivación automática del modo DEBUG en wp-config.php

En la imagen anterior habrás observado que el plugin dispone de otro botón que indica Check debug mode el cual sirve para hacer una comprobación manual de si está o no escrito en el fichero de WordPress wp-config.php la constante que activa el modo debug de este modo define('WP_DEBUG', true);

Botón para comprobar manualmente si está el “debug mode” en wp-config.php activado

Esto es debido a que el plugin nada más instalarse y activarse trata de escribir en el fichero wp-config.php para definir la constante que situa WordPress en modo desarrollo – “debug”.

En realidad el plugin añade todas las constantes que quieras, siendo las que trae configuradas por defecto las siguientes:

<?php

/** WRITE HERE YOUR DEVELOPMENTS WP-CONFIG.PHP CONSTANTS **/
/** to add on activation and later remove on deactivation **/
$wp_config_constants = [ 
    "define('WP_DEBUG', true);", 
    "define('WP_DEBUG_LOG', true);", 
    "define('WP_DEBUG_DISPLAY', true);",
];

Tras escribir estas constantes deja el fichero wp-config.php con permisos 600, que es un buen modo de configurar este fichero.

Cuando el plugin es desactivado procede a dejarlo sólo con define('WP_DEBUG', false); que es la configuración que trae WordPress de modo por defecto en el citado fichero.

Añade parámetros a los assets para ayudarte con la caché

De modo automático filtra para añadir un parámetro al final de la url de todos los ficheros que WordPress, los plugins y temas instalados registren como assets: tanto ficheros CSS como ficheros JS.

Concretamente el plugin está configurado para que añada ?dev=999 siendo 999 un número aleatorio en cada carga de la web.

Ejemplo: style.css?ver=1.2&dev=216

De este modo el navegador siempre descarga los ficheros y a priori solventas los posibles problemas de caché con los CSS y JS durante tu desarrollo web. Esto se debe a que se interpreta que los ficheros cambian cada vez por presentar en cada momento un parámetro aleatorio diferente.

Muestra los IDs en las tablas de administración

Cuando desarrollas con WordPress puede ser interesante poder ver de un modo muy fácil y visual todos los ids de los contenidos con los que estás trabajando, tanto sean estos posts, custom posts, categorias, usuarios, etc

Haciendo usos de varios filtros este plugin activa una nueva columna al final de todas las tablas donde se muestra el ID de cada elemento, según puedes ver en la siguiente imagen:

Oculta web en desarrollo mediante redirecciones

Es una opción que por defecto el plugin NO activa ya que es algo que igual no siempre necesitas, y que además requiere que lo configures en cada proyecto en el fichero setup/activation.php

<?php

/** WRITE HERE YOUR PRODUCTION & DEVELOPMENTS URLs IF YOU WANT AUTO-REDIRECTION **/
// write here production url like: 'https://sumapress.com'
$production_url = false;
// write array like: [ 'http://dev.sumapress.com', 'https://dev.sumapress.com' ]
$development_urls = [];

Lo que sucede si cumplimentas estos campos y activas este plugin, es que cierras la web a que alguien externo la pueda ver, mediante el uso de redirecciones a lo que sería la web que indiques como web en producción.

El funcionamiento base si así configuras las urls es el siguiente:

  • Si has estado desarrollando con este plugin la web en un entorno separado (pudiendo ser tambien local) y realizas una migración a lo que sería la web de producción, de modo automático el plugin se desactiva, y con ello lógicamente se quitan las redirecciones, el modo debug y los plugins de desarrollo instalados previamente.
  • Si el plugin se encuentra instalado en alguna de las urls indicadas como desarrollo, este efectua una redirección a la web indicada como producción en los siguientes casos:
    • NO estás como usuario registrado
    • NO estás en la página de registro para poder registrarte
    • NO estás en el admin de WordPress
    • NO has indicado en la url el parámetro ?dev=true el cual permite a cualquier visitante no registrado ver la web en desarrollo al indicar en la url ese parámetro

Por tanto, podemos tener una web en desarrollo con aparentemente libre acceso, pero que realmente se redirecciona y NO puede ser visitada salvo para usuarios registrados como nosotros que estamos haciendo el desarrollo, o si indicamos en la url un parámetro, pudiendo entonces ver la web si la visitamos por ejemplo como: https://dev.sumapress.com?dev=true

Añadida cookie (por defecto para un día, pero configurable) que se activa al visitar por primera vez la web en desarrollo con el citado parámetro que evita la redirección. Esta cookie permite que no se tenga que volver a escribir todo el tiempo ese parámetro en la url y se pueda navegar sin problema de que se redireccione hacia la web en producción.

Nota: el parámetro ?dev=true se puede modificar y definir de otro modo con sólo cambiarlo en el ya mencionado fichero setup/activation.php

Activación de otras herramientas de desarrollo web: Kint & Whoops

Cuando estas programando con este plugin se activan algunas características propias para desarrollo con PHP gracias a que instala y activa Kint & Whoops.

Whoops: PHP errors for cool kids

Dispones de una nueva Interfaz de errores bonita gracias a Whoops. Para verlo en acción solo comete un error fatal. 😀

whoops –
PHP errors for cool kids

Kint – debugging helper for PHP developers

Dentro de tu código en vez de usar el típico var_dump ($ variable); puedes usar simplemente d ($ variable); y obtendrás una salida de datos para depurar tu código increíble. 😀

Kint – debugging helper for PHP developers

Prueba con d(1) para obtener todo un seguimiento completo de depuración, mostrando todo lo que ha pasado hasta la línea donde introduces este comando.

Con el comando d(1); puedes ver todas los ficheros anteriores ejecutados

IMPORTANTE: si realizas modificaciones en la configuración del fichero
setup/activation.php estas se tienen que realizar con el plugin desactivado ya que es algo que se carga al activar el plugin, por lo que otra opción es proceder a desactivarlo y activarlo nuevamente; o cambiar su comportamiento ya que es un plugin “marca blanca” 😉