3. Creación de una estructura HTML para su Tema de Wordpress

(El artículo original y en inglés, fue publicado el 25 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.

Ahora estamos empezando a entrar en el meollo del asunto del desarrollo de Temas para WordPress: la codificación de la estructura HTML.

Los objetivos de cualquier estructura HTML

Cuando escriba el código de un sitio web, deberá hacerlo con 2 objetivos en mente: código reducido y código semántico. Esto es, usar el menor etiquetado (etiquetas HTML) que sea posible y asegurarse que el mismo sea significativo, mediante el uso de clases semánticas y nombres de ID que refieran a su contenido, no a su apariencia (class="widget-area" en lugar de class="sidebar-left").

Ahora, cuando escriba el código de un Tema de WordPress (o cualquier plantilla para cualquier Sistema de Gestión de Contenidos - CMS) tendrá que alcanzar un equilibrio entre un etiquetado reducido, con muy poca estructura, y lo que se conoce como Divitis; o sea, incluir en su código demasiados e innecesarios elementos div. En otras palabras, demasiada estructura sin significado. Probablemente haya visto anteriormente la etiqueta div si ha observado el código de una página web o un Tema de WordPress. Piense en ellos como contenedores de código HTML —contenedores que son muy útiles para la manipulación de código  HTML con CSS. Obviamente vamos a utilizar algunos. Pero no queremos demasiados o de esos sin significado.
HTML5 ha hecho mucho más sencilla nuestra búsqueda de etiquetado significativo con el agregado de etiquetas estructurales como header, nav, y footer. Estos nuevos elementos son similares a la etiqueta div ya que también pueden servir como contenedores de código HTML. Al mismo tiempo, nos permiten crear un esquema mucho más descriptivo para nuestro código HTML.
En definitiva, queremos una estructura suficiente -haciendo uso de las nuevas etiquetas de HTML5 así como de las etiquetas div- y que podamos reutilizar nuestro código para múltiples blogs y diseño de sitios. Queremos escribir código al que podamos volver y usar de nuevo.

La estructura HTML para su Tema de WordPress

Echemos un vistazo a la estructura HTML que vamos a utilizar para el cuerpo de nuestro Tema de WordPress.

<div class="hfeed site" id="page">
    <header class="site-header" id="masthead" role="banner">
          <hgroup></hgroup>
          <nav class="site-navigation main-navigation" role="navigation"></nav><!-- .site-navigation .main-navigation -->
    </header><!-- #masthead .site-header -->    
    <div class="site-main" id="main">
        <div class="content-area" id="primary">
            <div id="content" class="site-content">
            </div><!-- #content .site-content -->
        </div><!-- #primary .content-area -->
        <div id="secondary" class="widget-area">
        </div> <!-- #secondary .widget-area -->
        <div id="tertiary" class="widget-area">
        </div> <!-- #tertiary .widget-area -->
    </div> <!-- #main .site-main -->
    <footer class="site-footer" id="colophon" role="contentinfo">
        <div class="site-info">
        </div><!-- .site-info -->
    </footer><!-- #colophon .site-footer -->
</div> <!-- #page .hfeed .site -->

En realidad, este código HTML es la columna vertebral de _s (imagine que es una radiografía). Siga adelante, pegue este código en su editor de texto y guárdelo bien a mano. Lo vamos a utilizar más tarde, cuando construyamos la estructura de archivos de nuestro Tema. Pero antes de hacer eso, hay algunas cosas que queremos revisar.

Un paseo rápido por el HTML de su Tema de WordPress

Eche un vistazo a la implementación de la estructura HTML que se ve sobre estas líneas.
Cuanto más oscuro es un bloque, más profundo está anidado. La disposición de estos bloques está determinado, en gran medida, por los estilos CSS, de los que hablaremos en una futura lección.

También puede modificar la propia estructura HTML para ajustarla a sus necesidades. Por ejemplo, puede mover el bloque de navegación fuera del bloque de la cabecera, o mover una de las áreas de widgets hacia el bloque del pie de página.

Sin embargo, a los efectos de este tutorial, vamos a mantener la estructura HTML tal como está y, cuando lleguemos al tema, usaremos CSS para ordenar los contenidos y las áreas de widgets.

Muy bien, demos un pequeño recorrido a través del código.
En primer lugar, hfeed, el atributo de clase en el contenedor principal. hfeed es parte del esquema de Microformato hatom. En español simple, esto significa que, al agregar esta clase hfeed a nuestra página, le estamos diciendo a cualquier máquina que lea nuestro sitio (como los robots de los motores de búsqueda u otros servicios) que nuestro sitio publica contenido sindicado, como entradas de un blog. Irá viendo un montón de nombres como este a medida que avancemos.

Si presta atención en la estructura para la cabecera y el pie de página, probablemente notará la presencia de las nuevas etiquetas estructurales de HTML5, header y footer, respectivamente. Estas etiquetas describen grandes secciones del documento. Al tomar prestado del mundo editorial los nombres de las clases (WordPress hace de nosotros editores de contenidos, ¿no es así?), he intentado agregarle significado al código que estará incluido en esos contenedores, así como a los contenedores dentro de ellos.

También notará la presencia del atributo "role" (de ARIA) en las etiquetas HTML estructurales. El atributo "role" ayuda a hacer más sencilla la navegación en su sitio para quienes utilizan dispositivos con tecnologías de apoyo. Para obterner más información, vaya a HTML5 Accessibility Chops: When to use an ARIA role.
En la parte principal de nuestro HTML (id="main"), note que las áreas de  widgets aparecen después del área de contenido. También podrá notar que el contenido del sitio reside dentro de un div contenedor (con el nombre de clase “content-area”). Estos son los puntos clave. Esto permite, no sólo que el contenido principal aparezca antes que las barras laterales a los ojos de los motores de búsqueda (y los lectores de pantalla), sino que, a través del uso de técnicas CSS que incluyan márgenes negativos, podamos hacer de esto un Tema de 1 o 2 columnas con tan solo unas pocas líneas de CSS.
Esta estructura HTML va a asegurar el futuro de su Tema de WordPress y le dará la oportunidad de hacer algo muy poderoso con CSS. Es una buena idea.

Sumario de entradas

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