JavierSam: 2. Herramientas para el desarrollo de Temas de WordPress

lunes, 10 de junio de 2013

2. Herramientas para el desarrollo de Temas de WordPress

(El artículo original y en inglés, fue publicado el 24 de octubre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicaron una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotaron y actualizaron ese tutorial. Esta vez con 16 artículos a cargo de Michelle Langston: The ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Antes de empezar a construir cualquier Tema de WordPress, necesitaremos tener en su lugar todas nuestras herramientas de desarrollo. En esta entrada, reseñaremos las mejores de las mejores y nos construiremos un entorno multiplataforma de pruebas de Temas de WordPress que enorgullecería a un desarrollador profesional.

Un servidor de pruebas local: XAMPP o MAMP

El mejor lugar donde desarrollar su propio Tema para WordPress es, desconectado de la web, en su computadora personal. Sin embargo, para hacerlo deberá convertir su computadora en un servidor local ("local server"), esencialmente, aproximándose al conjunto de programas de un servidor web normal (Apache, MySQL y PHP). Esto quiere decir que puede instalar WordPress en su computadora personal.
Instalar estos programas para servidores por separado pude ser todo un desafío técnico pero, afortunadamente para nosotros, existe un par de programas libres que instalarán y gestionarán todo eso para nosotros.
Si está en una computadora con Windows, querrá probar con XAMPP. Si está en una Mac, querrá descargar MAMP. Que es el que yo usé y funciona.

[Agregado a la traducción: para GNU/Linux también pueden probar con otra versión de XAMPP, tal como explico en una entrada previa]

Desarrollar en un servidor remoto

Si prefiere desarrollar en un servidor remoto (como, por ejemplo, HostGator, Blue Host, etc), necesitará acceder a su sitio con un cliente FTP. Por más ayuda sobre FTP, visite la página del Codex de WordPress sobre este tópico: http://codex.wordpress.org/FTP_Clients
¿No tiene un cliente FTP? Necesitará instalar uno. Aquí tiene algunas posibilidades libres:

CyberDuck – para Mac y Windows.
FileZilla – este funciona en Macs, PCs y Linux.

Después que ha descargado un cliente FTP, necesita conectar a su sitio web a través de él. Diríjase a la documentación del cliente de su elección para aprender cómo hacer esto.
Una vez conectado con su sitio, ya está listo para instalar WordPress.

WordPress

Obviamente, necesitaremos descargar la versión más reciente de WordPress e instalarla correctamente en su servidor de pruebas local.
Si está utilizando XAMPP, siga estas instrucciones para instalar WordPress en su servidor de pruebas local.
Si está utilizando MAMP, siga estas instrucciones para instalar WordPress en su servidor de pruebas local.
Si está utilizando un servidor remoto, siga estas instrucciones para subir WordPress a un alojamiento remoto.

Contenido de relleno

Su instalación de WordPress va a necesitar algo de texto simulado, o de relleno. Algo para "tematizar". En su Escritorio de WordPress, vaya a Herramientas > Importar y elija "WordPress" de la lista de opciones. Ahora, solo se necesita un archivo con la información de las entradas en formato WXR para importar.
Existen algunas opciones:

Cada uno de esos grupos de contenido de prueba tiene sus ventajas y desventajas. Una cosa que me gusta hacer es importar todo el contenido de relleno que me sea posible. Todo. De esa forma nada se pierde. Cuando crea que terminó de diseñar su tema, use la navegación entre entradas para ver cada una de ellas. Revise los archivos para el mes, el año y las categorías. Con texto simulado robusto, será más fácil ver si algo anda mal.
¡Agregue, también, algo de relleno “real”!
Además del texto simulado, también es una buena idea probar con contenido real. Contenido real, verdadero, que no sea solo “Lorem Ipsum” o texto sin sentido repetido una y otra vez. Consiga algo de contenido real — de su blog, si es que tiene uno, o de cualquier documento de su computadora — y cree algunas entradas a partir de ellos. Al ser menos predecible que el texto simulado estándar, el contenido "real" pinta un cuadro mucho más exacto de como funcionará su Tema en un entorno real (lectura relacionada: Don’t let Lorem Ipsum decide the fonts used in your WordPress Themes de nuestro propio Takashi Irie).

Lineamientos de desarrollo

Si está interesado en desarrollar siguiendo las mejores y más actuales prácticas, la página del Codex, Theme Review Guidelines, es un gran lugar para empezar.

Plugins esenciales

Querrá hacerse de una copia del Plugin Developer, puesto a su disposición por los domadores de código de Automattic. Después que lo active, le va a sugerir un montón de plugins adicionales, que se pueden instalar con tan solo un clic, para ayudarle a optimizar su entorno de desarrollo de WordPress y poner a prueba sus Temas de WordPress en busca de las mejores prácticas de codificación. Eche un vistazo a nuestra breve reseña del Plugin Developer para obtener más información.

El Monster Widget, escrito por nuestro propio Michael Fields, es otro plugin obligatorio para los desarrolladores de Temas. Arrastrando un solo monster widget hacia la barra lateral, se pueden probar, a la vez, todos los widgets básicos de WordPress en su Tema.

Un editor de texto

No necesitará ninguna aplicación gráfica especial para crear Temas de WordPress - tan solo un viejo editor de texto plano. Pero, por supuesto, algunos son mejores que otros.
Para Windows, puede probar con Notepad++. Es libre y open-source, y viene recomendado por Lifehacker.
Para la Mac, recomiendo Text Wrangler.

[Agregado a la traducción: para GNU/Linux, Geany o Gedit son unas más que aceptables opciones]

Firefox

Por supuesto que se puede utilizar cualquier navegador web para el desarrollo, pero el que yo recomiendo es Firefox. Especialmente con los siguientes 2 complementos que harán su vida inmensamente más sencilla cuando se trate de desarrollar con WordPress.
El complemento Web Developer agrega una barra de tareas que le brinda un montó de opciones para la inspección y la depuración de su código, desde la dasactivación de todos estilos CSS a la validación del HTML local (que es lo que sucede en la pantalla del navegador de su servidor de prueba).
that gives you a whole host of options for inspecting and debugging your code, from disabling all CSS styles to validating local HTML (that’s the stuff happening on the browser screen of your test server).
El complemento Firebug es indispensable. Con Firebug activado, puede hacer clic secundario sobre cualquier elemento en la ventana del navegador y apreciar -en un apartado al pie de la pantalla- como se ve en el código fuente. También puede ver todas y cada una de las reglas de estilo que estén afectando ese elemento en particular. Es posible activar y desactivar las reglas de estilo para ver el resultado. Inclusive puede agregar o modificar reglas de estilo y ver los cambios en tiempo real.
Firefox en su versión 10 y superiores tiene un inspector web incluido que, como Firebug, también le permite hacer clic sobre un elemento para ver una ventana con su código fuente. Este inspector web, aunque práctico, no llega a tenr todo el poder y las prestaciones de Firebug.

Safari y Chrome

Si lo suyo no es Firefox, Safari y Google Chrome son alternativas válidas. Ambas contienen herramientas de desarrollo integradas similares a Firebug. Puede leer más sobre las herramientas de desarrollo web de Safari, y la documentación sobre herramientas de desarrollo en Chrome.

HTML y CSS

No le voy a mentir, una familiaridad básica con HTML y CSS le ayudará a llegar a buen puerto. Recomiendo leer, de HTML Dog, el tutorial de HTML para principiantes y el tutorial de CSS para principiantes. Para ponerse al día con HTML5, échele un vistazo al índice de elementos de HTML5 (de html5doctor.com). Leerse esos tutoriales es completamente opcional, pero no le hará daño y le ayudará a captar algunos conceptos básicos.

PHP

Pero, ¿qué hay de PHP? ¿No se necesita saber PHP para crear un Tema de WordPress? Bueno, sí, se necesita. Pero, a medida que avancemos, le enseñaré lo suficiente para ser peligroso con un Tema de WordPress. Si desea ser más competente -siempre recomendado- puede empezar leyendo PHP 101: PHP for the Absolute Beginner. Nuevamente, es completamente opcional. En realidad solo necesita captar los conceptos básicos.