Los cinco elementos indispensables para desarrollar en WordPress

Los cinco elementos indispensables para desarrollar en WordPress

0 369

Hace ya mucho tiempo que WordPress ha dejado de ser una pequeña plataforma de blogging para transformarse en el mayor sistema de administración de contenidos de la página web. Millones de webs están basadas en WordPress y su dominio en Internet es, a día de hoy, aplastante. La versatilidad y robustez de WordPress son 2 de los atributos que lo hacen ideal para prácticamente cualquier clase de proyecto (y ojo con todas y cada una de 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 en el planeta WordPress: bloggers, editores, diseñadores gráficos, programadores, freelancers, empresas de hosting… ¡todo el mundo es bienvenido!

Si también quieres hacerte un hueco en el ecosistema de WordPress y tu perfil es técnico (es decir, te resulta interesante aportar tu granito de arena a través de, primordialmente, complementos y temas), estás de suerte. En esta entrada te voy a resumir las herramientas indispensables que vas a precisar en tu día a día. ¿Comenzamos?

#1. El entorno

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

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

La primera solución es, seguramente, la más fácil. Contratando un distribuidor de hosting que ofrezca WordPress te va a dar (probablemente) todo lo que necesitas para comenzar a desarrollar y no vas a tener ningún problema”: un servidor, una instalación de WordPress, una base de datos, acceso desde cualquier lugar (que para algo está en la nube”), etc.

Por desgracia, siento decirte que lo de no tener problemas” no es enteramente cierto. Cuando te pongas con el desarrollo de tus proyectos estarás de manera continua editando, añadiendo y suprimiendo los diferentes ficheros que los componen, y si tu instalación WordPress es recóndita te vas a ver obligado a acompasar 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 comienzo nos ahorraba algo de trabajo, al final se transforma en una pequeña pesadilla.

Desechada, puesto que, la primera opción, es hora de centrarnos en la segunda: tener WordPress corriendo en tu propio ordenador. En WPrincipiante ya hemos hablado sobre de qué manera instalar WordPress desde cero y, si bien es cierto que su instalación no es muy difícil, a mí me parece bastante aburrida y desganada. Hay un montón de cosas que tienes que hacer: instalar un servidor web, instalar un servidor de base de datos, instalar PHP, configurar los dos servidores, instalar WordPress encima de ellos con las credenciales que tocan… Vamos, que te tocará buscar y también instalar los conocidos LAMP (para Linux), MAMP (para Apple) o bien WAMP (para Windows) y cruzar los dedos a fin de 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 mentir, esta solución asimismo lleva un cierto trabajo, mas en mi entender es la mejor de todas. Para esto, 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 repartir ambientes virtuales que sean fáciles de configurar y portar, los que se ejecutan encima de sistemas de virtualización como VirtualBox o bien VMWare) para ofrecer un entorno de desarrollo orientado a WordPress.

Después de instalar e iniciar VVV, vas a tener un WordPress con perfección configurado y operativo sobre el que fundamentar tus desarrollos. Sencillamente accede a http://local.wordpress.dev y… ¡manos a la obra!

Esta solución tiene 3 grandes ventajas:

  1. Trabajas en local. No perderás el tiempo subiendo y bajando archivos de tu ordenador al servidor recóndito 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 bien PHP, las cosas dejen de marchar o bien que tu computador comience a llenarse con las distintas versiones de todo tu software. Si todo el software preciso para hacer marchar WordPress lo tienes en la máquina virtual, cuando te canses de él, borras la máquina y tu PC queda como nuevo.
  3. Te ahorras el problema de en mi ordenador funciona”. Si trabajas en equipo y todos utilizáis exactamente la misma máquina virtual, no hay duda de que lo que te funcione a ti les funcionará a tus compañeros y viceversa. ¿Por qué razón? Porque todos estáis utilizando exactamente la misma configuración: exactamente el mismo servidor web, exactamente la misma versión de PHP, exactamente la misma versión de WordPress… ¡Es excelente!

#2. Sistema de control de versiones

La segunda herramienta que vas a precisar sí o bien sí en tus labores 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, en verdad, es el que utiliza el directorio de plugins y temas de WordPress.org. El segundo nació en dos mil cinco con la meta de transformarse en el sistema de control de versiones sobre el que desarrollar Linux, y desde ese momento ha ganado mucha popularidad. En verdad, actualmente Github es una de las plataformas más usadas para desarrollar y compartir proyectos de software libre y, como su nombre señala, emplea Git.

En esencia, los cuatro conceptos básicos que hay cerca 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 bien Bitbucket) nos resguarda de todo género de desastres. Si le pasara cualquier cosa a nuestro computador, el código estaría a salvo en ese servidor externo y podríamos recuperarlo en cualquier instante.
  • Mantener un registro de cambios. Conforme nuestro proyecto avanza, este 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 archivo. En otras palabras, vamos a poder ver sencillamente qué líneas 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. Seguramente, cada desarrollador de tu equipo va a trabajar en implementar una nueva funcionalidad o corregir un cierto bug, mas 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, en tanto que no es bien difícil imaginar una situación en la que 2 personas han editado exactamente el mismo fichero y, al final, el trabajo de uno pisa” el trabajo del otro. Por fortuna, esto es algo que asimismo está contemplado en Git y SVN, y en la mayor parte de los casos las propias herramientas se ocuparán de solventar de manera automática el inconveniente.

En una entrada precedente expliqué de qué forma podíamos utilizar Git para administrar las copias de seguridad de nuestro WordPress. Si bien es verdad que el objetivo que pretendíamos conseguir era diferente (no es exactamente lo mismo producir 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 archivos del pasado. Si te la perdiste, te recomiendo que le eches un vistazo, porque vas a poder ver con un tanto más de detalle los conceptos que acabo de mentar.

#3. Editores

Y llegamos al siguiente punto interesante de nuestra lista de hoy: los editores de código. Existen muchos editores y entornos de desarrollo integrados (IDE, por sus iniciales en inglés) con los que programar nuestros complementos y temas. En este punto poco te puedo ayudar, pues la elección de un editor o bien otro depende, en gran medida, de las preferencias de cada uno de ellos. Mas apacible, que no te voy a dejar solo en esta decisión.

Empecemos por ver algunas de las cosas que hay que tener en consideración en el momento de elegir un editor:

  • Soporte básico para PHP, JavaScript y CSS – Sintaxis y autocompletado. Si vas a desarrollar proyectos en WordPress, van a ser proyectos web. Conque es esencial que te familiarices con estas 3 tecnologías y que tu editor te asista con ellos. ¿De qué manera? 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 fatigues 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 ágil. No obstante, la primordial contraparte que tiene eso es que suele ser más difícil encontrar errores, pues desaparecen los errores que se advierten en tiempo de colección. Afortudamente, hoy día existen herramientas que analizan el código mientras que lo escribes y advierten muchos de estos errores:
    • PHP Lint. Puedes ejecutar PHP en modo lint (php -l), el cual se encargará de validar la sintaxis de tu archivo 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 ajusta a él. De esta manera, por servirnos de un ejemplo, si en WordPress se recomienda que los paréntesis de un if estén separados por espacios, algo como if( dólares americanos var) fallaría, pues no hay ni un solo espacio.
    • PHP Mess Detector. Otra herramienta de mis favoritas. Define un conjunto de reglas auxiliares (y complementarias) a las de Code Sniffer y te informa si tu código no las prosigue. Con esta herramienta, puedes advertir posibles bugs, identificar qué unas partes de tu código son demasiado complejas o descubrir partes sin usar.
  • Funcionalidades extra. Poder editar más de un archivo al unísono, saltar de la invocación de una función al archivo donde se define, poder refactorizar el código de manera rápida, definición y empleo de snippets de código para ahorrarnos repeticiones… Todas y cada una estas pequeñas cosas que utilizamos a diario pueden (y deberían) formar parte del editor que escojas. Si bien la curva de aprendizaje inicial pueda resultar un poco más dura, con el tiempo 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… conque solamente voy a mencionar un par:

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

#4. Recursos de desarrollo

WordPress tiene una comunidad de desarrolladores enorme detrás y eso se hace en especial plausible cuando uno empieza con sus desarrollos. En seguida te percatarás 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 precisas tener para la creación de plugins. Entre las cosas que vimos fue este proyecto, que pretende servir como esqueleto sobre el que montar tu propio trabajo. Imprescindible echarle un vistazo (o, si lo prefieres, utiliza la modificación en la que estoy trabajando ).
  2. Less, Sass y CSSnext. ¿De qué manera puedes escribir mejores hojas de estilo? Simple, ayudándote de (alguna de) estas extensiones para edificar tus ficheros CSS. Las dos primeras herramientas son preprocesadores que, cada uno de ellos con su propia sintaxis, te permitirán acotar variables, anidar reglas, operaciones, manipular colores, etc. CSSnext es parecido, mas en lugar de montarse su sintaxis usa construcciones del (próximo) estándar CSS, de tal manera que no debes aprender un lenguaje nuevo”, sino más bien utilizar la próxima versión del que ya conoces”. En todo caso, herramientas todas ellas muy aconsejables.
  3. PhpMyAdmin. Es inevitable: cuando te pones a manipular WordPress, en seguida descubrirás que tienes que preguntar de qué manera están las cosas en la base de datos. Preguntas como ¿Se ha guardado bien este valor?” o ¿De qué forma me cargo esta alternativa y vuelvo a comenzar?” 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 inconvenientes con el código, es esencial hallar 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 utilizas VVV puedes entrar en la máquina virtual (con el comando vagrant ssh) y activar un debug bonito (xdebug_on)
  5. Plugins de Debug. Ciertos plugins de WordPress que deberías tener instalados y (cuando los necesites) activados son:
    1. Debug Bar Esta barra agrega información muy útil en tu escritorio, como por ejemplo el uso de cache, el total de queries, el tiempo de ejecución o la memoria utilizada.
    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 emplean para validar o bien rechazar un tema, con lo que tenlo cerca.
    3. P3 (Complemento Performance Profiler) Otro plugin que te ayuda a examinar el rendimiento de los plugins que tienes en tu WordPress y ver el impacto que tienen. Complicado pero muy potente.
    4. User Switching Te deja saltar de un usuario a otro sin tener que estar introduciendo usuarios y claves de acceso continuamente. Realmente útil si estás desarrollando una extensión cuyas funcionalidades dependen del rol del usuario.
    5. Simply Show IDs Si ya antes te decía que es bastante frecuente consultar la base de datos, considera que lo normal es hacerlo mediante 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. Asimismo puedes instalar algunas extensiones en tu navegador que complementen la información que tienes de los plugins de debug:
    1. Herramientas de Desarrollador de Mozilla Firefox y Chrome Los 2 navegadores web principales disponen de un conjunto de herramientas de desarrollador para, por poner un ejemplo, editar el HTML y las hojas de estilo CSS de un sitios cualquiera o ejecutar sentencias JavaScript.
    2. MeasureIt . Una fácil y potente herramienta que te ayuda a medir la distancia que existe entre diferentes elementos en tu web. Indudablemente, un enorme 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 trabajas en alguna funcionalidad del front-end, instala esta extensión y vas a poder ocultarla cuando quieras.
    4. WPSniffer . Detecta el tema activo en la instalación de WordPress actual y el hosting que está utilizando. En especial interesante cuando, navegando por la web, hallas una página que te agrada y deseas saber qué tema emplea.

#5. Control de Calidad y Testing

Finalmente, me gustaría llenar la lista de hoy con algo que, por desgracia, casi absolutamente nadie incluye en sus desarrollos: el control de calidad y tests automatizados. La calidad de tu trabajo es vital 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 bien 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 incorporar.
  2. Escribes un poco de código para solventar una de esas funcionalidades.
  3. Lo pruebas.
  4. Si falla, procuras corregirlo y repites el paso 3.
  5. Cuando ya marcha, iteras sobre los pasos dos, 3 y cuatro 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 conforme tus proyectos van creciendo en tamaño y dificultad, es más y más fácil que un pequeño cambio en el código acabe rompiendo algo de forma inopinada. Y tener que comprobar manualmente que todas y cada una de las opciones de tu plugin continúan funcionando correctamente es imposible. ¿De qué forma 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ú debas hacer nada. Si generas suficientes tests como para contrastar todo tu plugin, vas a tener las espaldas bien cubiertas. Los tests suelen tener tres fases:

  1. Configuración. Preparas el entorno para que el estado inicial siempre y en todo momento sea exactamente el mismo (por poner un ejemplo, cargar una imitación de la base de datos donde solo hay una entrada en WordPress con un cierto título y un cierto ID).
  2. Actuar. Efectúas ciertas acciones para alterar el estado inicial (añadir una entrada, cambiar el título de otra, suprimir un comentario… lo que sea).
  3. Comprobar. Por último, verificas que el desenlace de las acciones efectuadas se corresponde con el resultado que aguardabas. De esta forma, por poner un ejemplo, si partías de un estado en que había una única entrada en tu weblog y la has borrado, el estado final debería ser que no existe ninguna entrada.

Para poder efectuar tests automáticos te invito a 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 emplearla en WordPress, estate atento por el hecho de que pronto vamos a escribir una entrada sobre ella.

En definitiva…

El mundo del desarrollo WordPress es amplísimo. Existen multitud de herramientas y recursos que nos ayudarán y, al final, cada uno tiene que descubrir cuáles encajan mejor con su forma de trabajar. El día de hoy hemos visto varios ejemplos que, espero, te asistan en tu vida profesional. Y si ya eres un desarrollador experimentado de WordPress, dinos: ¿qué herramientas utilizas ? ¿Nos hemos olvidado de alguna esencial?

Imagen destacada de Moyan Brenn.

SIMILAR ARTICLES

NO COMMENTS

Leave a Reply