Los 5 elementos imprescindibles para desarrollar en WordPress

Hace ya bastante tiempo que WordPress ha dejado de ser una pequeña plataforma de blogging para convertirse en el mayor sistema de gestión de contenidos de la web. Millones de páginas web están basadas en WordPress y su dominio en Internet es, a día de hoy, aplastante. La versatilidad y robustez de WordPress son dos de los atributos que lo hacen ideal para prácticamente cualquier tipo de proyecto (y ojo con todas las novedades que están por venir, como la ya conocidísima API REST).

Ante estos números y perspectivas, no es de extrañar que haya tantísima gente interesada en ganarse la vida con él. Prácticamente cualquier perfil profesional tiene cabida dentro del mundo WordPress: bloggers, editores, diseñadores gráficos, programadores, freelancers, empresas de hosting… ¡todo el mundo es bienvenido!

Si tú también quieres hacerte un hueco en el ecosistema de WordPress y tu perfil es técnico (es decir, te interesa aportar tu granito de arena a través de, principalmente, plugins y temas), estás de suerte. En esta entrada te voy a resumir las herramientas imprescindibles que vas a necesitar en tu día a día. ¿Empezamos?

#1. El entorno

Lo primero que vas a necesitar para poder desarrollar en WordPress es… ¡WordPress! Esto era obvio, ¿no? Para ello, tendrás que instalar la versión estable de WordPress (o alguna nightly build de desarrollo, según lo que quieras hacer) en un servidor y empezar a trabajar en él. Básicamente, tienes tres opciones para ello:

1. Contratar un proveedor de hosting.
2. Instalar WordPress en tu propio ordenador.
3. Instalar WordPress en una máquina virtual.

La primera solución es, probablemente, la más sencilla. Contratando un proveedor de hosting que ofrezca WordPress te dará (probablemente) todo lo que necesitas para empezar a desarrollar y no tendrás «ningún problema»: un servidor, una instalación de WordPress, una base de datos, acceso desde cualquier sitio (que para algo está «en la nube»), etc.

Por desgracia, siento decirte que lo de «no tener problemas» no es del todo cierto. Cuando te pongas con el desarrollo de tus proyectos vas a estar continuamente editando, añadiendo y eliminando los diferentes ficheros que los componen, y si tu instalación WordPress es remota te verás obligado a sincronizar por FTP tu copia local (donde trabajas) con la copia del servidor (donde haces las pruebas y verificas que todo funcione como es debido). Total, que lo que en un principio nos ahorraba algo de trabajo, al final se convierte en una pequeña pesadilla.

Desechada, pues, la primera opción, es hora de centrarnos en la segunda: tener WordPress corriendo en tu propio ordenador. En WPrincipiante ya hemos hablado sobre cómo instalar WordPress desde cero y, si bien es cierto que su instalación no es muy difícil, a mí personalmente me parece bastante tediosa y aburrida. Hay un montón de cosas que tienes que hacer: instalar un servidor web, instalar un servidor de base de datos, instalar PHP, configurar ambos servidores, instalar WordPress encima de ellos con las credenciales que tocan… Vamos, que te tocará buscar e instalar los conocidos LAMP (para Linux), MAMP (para Apple) o WAMP (para Windows) y cruzar los dedos para que no haya problemas con la instalación o con las actualizaciones que lleguen.

¿Qué nos queda? Pues, efectivamente, la última alternativa que te he planteado: instalar WordPress en una máquina virtual. No te voy a engañar, esta solución también lleva un cierto trabajo, pero en mi opinión es la mejor de todas. Para ello, lo único que deberás hacer es instalar y configurar la máquina virtual Varying Vagrant Vagrants (VVV). Esta máquina virtual se apoya en la tecnología Vagrant (cuyo objetivo es ofrecer una forma de empaquetar y distribuir entornos virtuales que sean fáciles de configurar y portar, los cuales se ejecutan encima de sistemas de virtualización como VirtualBox o VMWare) para ofrecer un entorno de desarrollo orientado a WordPress.

Después de instalar e iniciar VVV, tendrás un WordPress perfectamente configurado y operativo sobre el que basar tus desarrollos. Simplemente accede a http://local.wordpress.dev y… ¡manos a la obra!

Esta solución tiene tres grandes ventajas:

1. Trabajas en local. No vas a perder el tiempo subiendo y bajando ficheros de tu ordenador al servidor remoto donde se ejecuta WordPress.
2. No llenas tu ordenador de basura. Es fácil que cada vez que instalas una actualización de MySQL o PHP, las cosas dejen de funcionar o que tu ordenador empiece a llenarse con las diferentes versiones de todo tu software. Si todo el software necesario para hacer funcionar WordPress lo tienes dentro de la máquina virtual, cuando te canses de él, borras la máquina y tu ordenador queda como nuevo.
3. Te ahorras el problema de «en mi ordenador funciona». Si trabajas en equipo y todos usáis la misma máquina virtual, está claro que lo que te funcione a ti les funcionará a tus compañeros y viceversa. ¿Por qué? Porque todos estáis usando exactamente la misma configuración: el mismo servidor web, la misma versión de PHP, la misma versión de WordPress… ¡Es genial!

#2. Sistema de control de versiones

La segunda herramienta que vas a necesitar sí o sí en tus tareas como desarrollador es un sistema de control de versiones. Los dos sistemas más conocidos para llevar el control de versiones de tu código fuente son SVN y Git. El primero lleva ya bastantes años con nosotros y, de hecho, es el que usa el directorio de plugins y temas de WordPress.org. El segundo nació en 2005 con el objetivo de convertirse en el sistema de control de versiones sobre el que desarrollar Linux, y desde entonces ha ganado muchísima popularidad. De hecho, hoy en día Github es una de las plataformas más usadas para desarrollar y compartir proyectos de software libre y, como su nombre indica, utiliza Git.

En esencia, los cuatro conceptos básicos que hay alrededor de este tipo de herramientas son:

• Seguridad. El hecho de poder subir nuestro código a un repositorio externo (como los que ofrecen Github o Bitbucket) nos protege de todo tipo de desastres. Si le pasara cualquier cosa a nuestro ordenador, el código estaría a salvo en ese servidor externo y podríamos recuperarlo en cualquier momento.
• Mantener un registro de cambios. A medida que nuestro proyecto avanza, éste va evolucionando y cambiando. Una gran ventaja de los sistemas de control de versiones es que nos da información sobre los cambios concretos que se han hecho sobre cualquier fichero. En otras palabras, podremos ver fácilmente qué lineas se han añadido, cuáles se han eliminado y cuáles se han modificado.
• Desarrollo distribuido. Otra ventaja de estas herramientas es la posibilidad de trabajar en equipo, permitiendo que múltiples personas contribuyan sobre un mismo repositorio. Probablemente, cada desarrollador de tu equipo trabajará en implementar una nueva funcionalidad o corregir un cierto bug, pero al final todo ese trabajo sumará al total del proyecto.
• Fusión de versiones automática. ¿Te preocupa tener más de una persona «tocando» el mismo código? Es normal que te preocupe, ya que no es difícil imaginar una situación en la que dos personas han editado exactamente el mismo fichero y, al final, el trabajo de uno «pisa» el trabajo del otro. Por suerte, esto es algo que también está contemplado en Git y SVN, y en la mayoría de los casos las propias herramientas se encargarán de solucionar automáticamente el problema.

En una entrada anterior expliqué cómo podíamos usar Git para gestionar las copias de seguridad de nuestro WordPress. Si bien es cierto que el objetivo que pretendíamos conseguir era diferente (no es exactamente lo mismo generar copias de seguridad que controlar nuestro código fuente), la esencia es la misma: controlar las diferencias de una versión a otra, tener nuestro trabajo a salvo y poder recuperar/revisar ficheros del pasado. Si te la perdiste, te recomiendo que le eches un vistazo, porque podrás ver con un poco más de detalle los conceptos que acabo de mencionar.

#3. Editores

Y llegamos al siguiente punto interesante de nuestra lista de hoy: los editores de código. Existen muchísimos editores y entornos de desarrollo integrados (IDE, por sus siglas en inglés) con los que programar nuestros plugins y temas. En este punto poco te puedo ayudar, porque la elección de un editor u otro depende, en gran medida, de las preferencias de cada uno. Pero tranquilo, que no te voy a dejar solo en esta decisión.

Empecemos por ver algunas de las cosas que hay que tener en cuenta a la hora de escoger un editor:

• Soporte básico para PHP, JavaScript y CSS – Sintaxis y autocompletado. Si vas a desarrollar proyectos en WordPress, serán proyectos web. Así que es importante que te familiarices con estas tres tecnologías y que tu editor te ayude con ellos. ¿Cómo? Pues, básicamente, con el resaltado de sintaxis (palabras clave en un color, variables en otro, cadenas de texto en otro…) y con funciones de autocompletado (para que no te canses escribiendo).
• Soporte avanzado para esos lenguajes. Tanto JavaScript como PHP son lenguajes interpretados (no necesitan ser compilados), con lo cual trabajar con ellos es muy, muy ágil. No obstante, la principal contrapartida que tiene eso es que suele ser más difícil encontrar errores, puesto que desaparecen los errores que se detectan en tiempo de compilación. Por suerte, actualmente existen herramientas que analizan el código mientras lo escribes y detectan muchos de estos errores:
  • PHP Lint. Puedes ejecutar PHP en modo lint (php -l), el cual se encargará de validar la sintaxis de tu fichero sin llegar a ejecutarlo.
  • PHP Code Sniffer. Dado un cierto estándar de programación, esta utilidad comprueba hasta qué punto el código fuente que escribes se ciñe a él. Así, por ejemplo, si en WordPress se recomienda que los paréntesis de un if estén separados por espacios, algo como if($var){ fallaría, porque no hay ni un solo espacio.
  • PHP Mess Detector. Otra herramienta de mis favoritas. Define un conjunto de reglas adicionales (y complementarias) a las de Code Sniffer y te avisa si tu código no las sigue. Con esta herramienta, puedes detectar posibles bugs, identificar qué partes de tu código son demasiado complejas o descubrir partes sin usar.
• Funcionalidades extra. Poder editar más de un fichero a la vez, saltar de la invocación de una función al fichero donde se define, poder refactorizar el código rápidamente, definición y uso de snippets de código para ahorrarnos repeticiones… Todas estas pequeñas cosas que usamos a diario pueden (y deberían) formar parte del editor que escojas. Aunque la curva de aprendizaje inicial pueda resultar un poco más dura, a la larga merecerá la pena.

¿Y qué editores incluyen este tipo de funcionalidades? Pues el abanico es bastante amplio y, como te decía, es algo que depende de cada uno… así que únicamente voy a mencionar un par:

• PhpStorm. Una auténtica pasada. En este caso, se trata de un entorno de desarrollo integrado que incluye todas las funcionalidades que te he explicado y más. Tengo que reconocer que no lo he usado demasiado, pero lo poco que he usado me ha encantado. Además, es capaz de detectar cuando estás trabajando en un proyecto WordPress y adaptarse a las necesidades específicas de la plataforma.
• Sublime. Un editor de texto elegante y eficaz. Sin barras de herramientas ni diálogos de configuración, invita a ser usado desde el primer momento. Cuando empiezas, es poco más que el típico Bloc de notas de un Windows, pero a medida que tus necesidades aumentan, podrás completarlo con plugins, trucos de autocompletado, atajos de teclado… un lujo para los techies modernos, aunque yo me quedo con el veterano vim.

#4. Recursos de desarrollo

WordPress tiene una comunidad de desarrolladores enorme detrás y eso se hace especialmente plausible cuando uno empieza con sus propios desarrollos. En seguida te darás cuenta de que existen un montón de recursos orientados a ayudarte. Aquí tienes algunos ejemplos:

1. Plugin Boilerplate. En WPrincipiante te contamos las nociones básicas que necesitas tener para la creación de plugins. Una de las cosas que vimos fue este proyecto, que pretende servir como esqueleto sobre el que montar tu propio trabajo. Indispensable echarle un vistazo (o, si lo prefieres, usa la modificación en la que estoy trabajando yo).
2. Less, Sass y CSSnext. ¿Cómo puedes escribir mejores hojas de estilo? Fácil, ayudándote de (alguna de) estas extensiones para construir tus ficheros CSS. Las dos primeras herramientas son preprocesadores que, cada uno con su propia sintaxis, te permitirán definir variables, anidar reglas, operaciones, manipular colores, etc. CSSnext es parecido, pero en lugar de montarse su propia sintaxis utiliza construcciones del (próximo) estándar CSS, de tal forma que «no tienes que aprender un lenguaje nuevo», sino usar «la siguiente versión del que ya conoces». En cualquier caso, herramientas todas ellas muy recomendables.
3. PhpMyAdmin. Es inevitable: cuando te pones a manipular WordPress, en seguida descubrirás que tienes que consultar cómo están las cosas en la base de datos. Preguntas como «¿Se ha guardado bien este valor?» o «¿Cómo me cargo esta opción y vuelvo a empezar?» tienen su respuesta en la base de datos, así que ten algún programa a mano para acceder a ella y manipularla.
4. WP-Pretty Debug. Cuando empiezan a salir problemas con el código, es importante encontrar rápidamente que pasa. Y lo normal es ayudarse de pequeños chivatos en el código (a través de llamadas como var_dump). Por desgracia, estas llamadas, al renderizarse en el HTML de tu web, no son demasiado inteligibles. Con esta herramienta conseguirás hacerlo. Consejo PRO. Si usas VVV puedes entrar en la máquina virtual (con el comando vagrant ssh) y activar un debug bonito (xdebug_on) 😉
5. Plugins de Debug. Algunos plugins de WordPress que deberías tener instalados y (cuando los necesites) activados son:
   1. Debug Bar. Esta barra añade información muy útil en tu escritorio, como por ejemplo el uso de cache, el número total de queries, el tiempo de ejecución o la memoria usada.
   2. Theme Check. Si te dedicas a la creación de temas, úsalo para verificar la calidad de tu trabajo. El equipo de revisión de temas de WordPress.org lo usan para validar o rechazar un tema, así que tenlo cerca.
   3. P3 (Plugin Performance Profiler). Otro plugin que te ayuda a analizar el rendimiento de los plugins que tienes en tu WordPress y ver el impacto que tienen. Complicado pero muy potente.
   4. User Switching. Te permite saltar de un usuario a otro sin tener que estar introduciendo usuarios y contraseñas continuamente. Muy útil si estás desarrollando una extensión cuyas funcionalidades dependen del rol del usuario.
   5. Simply Show IDs. Si antes te decía que es bastante habitual consultar la base de datos, piensa que lo normal es hacerlo a través de los identificadores (el ID de una entrada, de una página, de un comentario…). Esta extensión hace explícitos todos esos identificadores, ahorrándote unos segundos de tu tiempo.
6. Extensiones del navegador. También puedes instalar algunas extensiones en tu navegador que complementen la información que tienes de los plugins de debug:
   1. Herramientas de Desarrollador de Firefox y Chrome. Los dos navegadores web principales disponen de un conjunto de herramientas de desarrollador para, por ejemplo, editar el HTML y las hojas de estilo CSS de un sitio web cualquiera o ejecutar sentencias JavaScript.
   2. MeasureIt. Una sencilla y potente herramienta que te ayuda a medir la distancia que existe entre diferentes elementos en tu web. Sin duda, un gran aliado para cualquier diseñador de temas o responsable de la experiencia de usuario.
   3. WordPress Admin Bar Control. Si la barra de administración de WordPress te molesta mientras estás trabajando en alguna funcionalidad del front-end, instala esta extensión y podrás ocultarla cuando quieras.
   4. WPSniffer. Detecta el tema activo en la instalación de WordPress actual y el hosting que está usando. Especialmente interesante cuando, navegando por la web, encuentras una página que te gusta y quieres saber qué tema utiliza.

#5. Control de Calidad y Testing

Finalmente, me gustaría completar la lista de hoy con algo que, por desgracia, casi nadie incluye en sus desarrollos: el control de calidad y tests automatizados. La calidad de tu trabajo es crucial si no quieres tirar por los suelos tu reputación. Y es que no hay nada peor que subir una nueva versión de tu plugin o tema al repositorio de WordPress y que sean tus usuarios quienes descubran que no funciona.

El ciclo de desarrollo de software es más o menos así:

1. Tienes un conjunto de requisitos/funcionalidades que hay que implementar.
2. Escribes un poco de código para solucionar una de esas funcionalidades.
3. Lo pruebas.
4. Si falla, intentas corregirlo y repites el paso 3.
5. Cuando ya funciona, iteras sobre los pasos 2, 3 y 4 hasta que tengas listos todos los requisitos.
6. Pruebas que todo funcione como es debido y que no se haya roto nada.
7. Subes el plugin a WordPress.org
8. Y… ¿bug?

Es evidente que a medida que tus proyectos van creciendo en tamaño y complejidad, es más y más sencillo que un pequeño cambio en el código acabe rompiendo algo de forma inesperada. Y tener que comprobar manualmente que todas las opciones de tu plugin continúan funcionando correctamente es imposible. ¿Cómo puedes hacerlo mejor? ¡Con tests automáticos!

Un test automático es un pequeño código que comprueba que una cierta parte de tu programa funciona como se espera sin que tú tengas que hacer nada. Si generas suficientes tests como para verificar todo tu plugin, tendrás las espaldas bien cubiertas. Los tests suelen tener tres fases:

1. Configuración. Preparas el entorno para que el estado inicial siempre sea el mismo (por ejemplo, cargar una copia de la base de datos donde sólo hay una entrada en WordPress con un cierto título y un cierto ID).
2. Actuar. Realizas algunas acciones para modificar el estado inicial (añadir una entrada, cambiar el título de otra, eliminar un comentario… lo que sea).
3. Comprobar. Finalmente, compruebas que el resultado de las acciones realizadas se corresponde con el resultado que esperabas. Así, por ejemplo, si partías de un estado en que había una única entrada en tu blog y la has borrado, el estado final debería ser que no hay ninguna entrada.

Para poder realizar tests automáticos te recomiendo una herramienta llamada Codeception. Codeception es un framework PHP de testing que te permite crear y ejecutar un montón de tests de diferente tipo. Si quieres saber más sobre esta herramienta y cómo usarla en WordPress, estate atento porque pronto escribiremos una entrada sobre ella.

Nelio Popups

¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.

Juan Hernando

WordPress.org

Descarga gratis

Versión premium

En definitiva…

El mundo del desarrollo WordPress es muy amplio. Existen multitud de herramientas y recursos que nos van a ayudar y, al final, cada uno tiene que descubrir cuáles encajan mejor con su forma de trabajar. Hoy hemos visto unos cuantos ejemplos que, espero, te ayuden en tu vida profesional. Y si ya eres un desarrollador experimentado de WordPress, dinos: ¿qué herramientas usas tú? ¿Nos hemos olvidado de alguna importante?

Imagen destacada de Moyan Brenn.