miércoles, 29 de mayo de 2013

Tutorial de ThemeShaper sobre creación de Temas para WordPress

ThemeShaper es el sitio del Equipo de Temas de Automattic. Según ellos mismos, "ponemos a disposición impresionantes Temas que hacen de WordPress.com un lugar más feliz".
Como parte de ese objetivo, 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 LangstonThe 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 que va a continuación) e ir publicándolas a medida que las tenga listas.
Al final de esta entrada va el listado con todas las entradas (que iré activando a medida que las vaya traduciendo y publicando).

0. Introducción

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

En sólo 16 lecciones individuales, este tutorial sobre la creación de plantillas (o Temas) de WordPress le va a mostrar cómo construir una poderosa y actualizada plantilla de WordPress desde cero. A medida que avancemos voy a explicar lo que esté pasando, incluyendo (para bien o para mal) mi parecer sobre ciertas técnicas y por qué elijo un camino u otro. Básicamente, voy a enseñarle todo lo que necesita saber sobre el desarrollo de Temas para WordPress.

Al final de este tutorial, será capaz de hacer casi cualquier cosa que desee.



Presentando Underscores (_s), el Tema de arranque

Si usted no ha oído hablar de _s, se trata, en pocas palabras, de un Tema de arranque, 100% GPL, llevado delante por la comunidad, que contiene plantillas modernas, estilos CSS de arranque, y una organizada estructura de archivos - todo lo necesario para ayudarle a poner sus diseños en funcionamiento. También puede utilizar _s como punto de partida para sus proyectos de Temas futuros. Si desea conocer más sobre la filosofía de _s, por favor tome unos minutos para leer A 1000-Hour Head Start: Introducing the _s Theme. Vuelva aquí después de haberlo leído. Vaya, en serio, lo vamos a esperar.

El Tema que vamos a construir a lo largo de este tutorial es sencillo, el Tema "Shape", se basa en _s. Descárguelo y revíselo, si es que desea ver el código terminado al que vamos a llegar al final del camino. Falta un tiempo antes de llegar a la lección  de CSS, pero si, como adelanto, desea ver el diseño de ejemplo que vamos a crear para el Tema "Shape", lo puede obtener aquí.

Aquí está la lista de características de las que será capaz de presumir su Tema terminado:
  • Una estructura de archivos bien organizados y modular.
  • Toda la optimización para motores de búsqueda (SEO) que, realmente, necesita.
  • Soporte para el marcado de datos con Microformato de Google.
  • Estructura de marcado de datos semántica válida y lógica que se puede utilizar para crear CUALQUIER diseño.
  • Inteligentes diseños CSS predefinidos.
  • Compatibilidad de localización: marcado de datos listo para la traducción y una hoja de estilos RTL.
  • Clases dinámicas para el cuerpo, las entradas y los comentarios.
  • Trackbacks separados y comentarios encadenados.
  • Dos áreas de widgets: la primera con los widgets predefinidos y la segunda codificada para desaparecer cuando está vacía.
  • Soporte para el Aside format Post (después de completar el tutorial podrá fácilmente añadir soporte para más post formats).
  • Un menú personalizado, una imagen de cabecera personalizable y flexible y un fondo personalizado.
  • Estilo adaptativo simple, que incluye un menú de navegación ligero para dispositivos móviles.
  • Y todas las cosas típicas de WordPress que se puede esperar de un Tema.
Creo que todo eso es algo impresionante, para cualquier Tema de WordPress.

Sumario de entradas

  1. Introducción.
  2. El desarrollo de su "sentido temático".
  3. Herramientas para el desarrollo de Temas de WordPress
  4. Creación de una estructura HTML para su Tema de Wordpress.
  5. Plantillas y estructura de directorios de un Tema de WordPress.
  6. Configuración de las funciones de su Tema.
  7. Asegure su Tema de WordPress.
  8. La plantilla cabecera del Tema de WordPress: header.php.
  9. La plantilla Index de su Tema de WordPress.
  10. Las plantillas Entrada Individual, Entrada de Adjuntos y error 404 del Tema de WordPress .
  11. La plantilla de comentarios de un Tema de WordPress.
  12. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress.
  13. La plantilla Archivo.
  14. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress.
  15. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño.
  16. Fondo y cabecera personalizados.
  17. Distribuir su Tema de WordPress.

2 comentarios:

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.