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)

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:

• Theme Unit Test data
• WPCandy Sample Content
• WordPress.com Featured Images Test Data

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.