Skip to main content
Wordpress

Las mejores herramientas para desarrollar en WordPress

Por 5 enero, 2021Sin comentarios
Herramientas para desarrollo web

Si somos desarrolladores WordPress, siempre es bueno tirar de herramientas que te faciliten el trabajo tedioso como la depuración o solución de errores. Si estáis desarrollando un plugin, un tema o estáis customizando uno ya creado, os vendrá bien utilizar algunas de estas herramientas que a mi me ayudan mucho. Desde plugins de WordPress, extensiones de Chrome y herramientas online. Os dejo algunas de ellas:

Plugins

Prevent Browser Caching

Os habréis fijado que WordPress utiliza el parámetro ‘ver’ en todas las urls de archivos css y js, para controlar la caché de navegador cuando hacemos modificaciones en los archivos. Utiliza este parámetro para mostrar la versión del archivo. Por ejemplo: style.css?ver=1.0. Si hemos hecho modificaciones y queremos que muestre la última versión en el navegador, tan solo tenemos que cambiar la versión, por ejemplo: style.css?ver=1.1. Pero si estamos desarrollando, esto puede ser un lastre. El plugin Prevent Browser Caching altera este comportamiento y nos permite evitar la caché de navegador cuando estamos desarrollando.

Query Monitor

Imprescindible para cualquier desarrollador. Una consola de depuración en vivo para WordPress. Nos permite ver los errores php en ejecución, tanto graves como leves. Las funciones o hooks de WordPress que se están llamando en la página que cargamos, todas las queries que se utilizan y el tiempo de ejecución de cada una. Tiempo total de carga de la página y otros datos de depuración. Tenemos una vista rápida en la barra de administración tanto en el front como en el back, y una consola de depuración más amplia que nos ofrece el plugin.

Theme Check

Si estamos desarrollando un tema desde cero, este plugin nos permite hacer un análisis de la plantilla para verificar que cumple con todos los estándares de WordPress en la creación de temas.

Better Search Replace

A veces necesitamos buscar todas las ubicaciones donde aparece un valor en la base de datos  y reemplazarlo. Por ejemplo, si migramos un sitio a un dominio diferente o queremos pasar todas nuestras urls de http a https, este plugin lo hace por nosotros. Nos permite elegir en que tablas queremos hacer la búsqueda y reemplazarlo, o hacer un simulacro antes de tocar la base de datos. Además es compatible con los campos serializados.

Debug bar

Similar a Query Monitor, este plugin nos crea un depurador en la barra de administración. Requiere que activemos el modo depuración de WordPress en el wp-config.php.

User Switching

A veces, por nuestro desarrollo, podemos necesitar probar sesiones de diferentes usuarios con diferentes roles. Tener que cerrar sesión e iniciar con otra cuenta constantemente puede ser tedioso. Este plugin nos permite cambiar de usuario con un solo botón.

FakerPress

Cuando estamos maquetando apartados como por ejemplo la página de entradas del blog, necesitamos rellenarlo de contenido para ver como va quedando nuestro desarrollo. Este plugin nos crea contenido aleatorio con pocos clicks. Podemos indicarle en número de entradas, categorías, comentarios que queremos generar. Como un lorem ipsum a lo bestia.

 

Herramientas online

generatewp.com
Buenísima herramienta si estamos desarrollando en WordPress. Con pocos pasos nos genera el código necesario para crear shortcodes, custom post types, taxonomías, sidebars, menús o cualquier otro elemento del core de WordPress.

deepl.com
El mejor traductor online posible. Nada que ver con Google Translate. Puedes traducir frases y párrafos sin que pierda el sentido o sin que te hagan un churro de traducción. Totalmente fiable para utilizar en nuestros proyectos.

wpdoctor.es
Te analiza tu WordPress de arriba a abajo. Te indica que reglas SEO, de seguridad y WPO cumples y cuales no. Y te da un montón de recomendaciones.

codepen.io
El mejor muestrario de código Javascript, CSS y HTML para utilizar en nuestros proyectos o para compartir con otros. A diferencia de GitHub, podemos visualizar y testear el código en vivo. Siempre nos puede sacar de un apuro.

thenounproject.com
Al igual que el archiconocido Flaticon, The Noun Project, es uno de los mejores repositorios de iconos. Muy útil para nuestros proyectos web.

freshping.io
Freshping es un servicio gratuito que te avisa cuando tu sitio web sufre caídas y cuando se restaura. Además te envía informes semanales del uptime de la web. Tiene servicios premium que te permite más de un sitio web.

flatuicolorpicker.com
Paleta amplia de colores pastel, suaves y llamativos para utilizar en nuestra web o en nuestros diseños. Con un solo click podemos copiar el código del color en hexadecimal, rbg, hsl y cmyk.

 

Extensiones Chrome

Yslow
Esta extensión te analiza todos los puntos de mejoras de tu web en cuanto a rendimiento y velocidad de carga, dándote muchos consejos para el WPO.

Web developer checklist
Comprueba si tu web cumple con todas las buenas prácticas de seo, usabilidad y rendimiento. Te crea una checklist para que te sea más fácil ir resolviendo  cada punto de mejora.

DevTools Autosave
Para mi, oro puro esta extensión. A todos nos ha pasado que hacemos cambios en linea del CSS a través de la consola del navegador para ver como quedaría. Pero nos liamos ha realizar muchos cambios en diferentes elementos y luego no recordamos que tenemos que copiar a nuestra hoja de estilo. Pues bien, como su nombre indica, esta extensión hace un auto-guardado de el CSS que cambiamos en la consola en el propio archivo css.

Clear Cache
Con un simple click nos permite hacer un borrado de la caché de navegador, cookies, etc.

CheckMyLinks
Comprueba todos los enlaces de tu web y te marca los que no resuelven por un error 404 o cualquier otro error.

Colorzilla
Te permite detectar el color de cualquier apartado de una web y te da el código del color en hexadecimal o rgb.

RequestMaker
Si estamos desarrollando un formulario y queremos ver el resultado cuando se envía y recibimos una respuesta de éxito, por poner un ejemplo, está extensión simula solicitudes HTTP para ver el resultado sin tener que enviarlo realmente.

Postman
Aunque hablamos de la extensión, Postman también tiene aplicación de escritorio. Muy útil para probar servicios REST, si estamos desarrollando una API o un webservice o queremos conectar con uno ya desarrollado.

 

Está claro que estas son unas pocas de las miles de herramientas que podemos utilizar en el desarrollo web. Pero se quedaría un post muy largo. Os animo a dejar en los comentarios las herramientas más imprescindibles para vosotros.

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta