logoRF_HTML5Hace unos días, presentamos como se podía hacer un tema para wordpress; solo planteamos una pagina; la index, que nos puede servir como remplazo para cualquiera, y no nos metimos en demasiados detalles porque era nuestra primera pagina seria, ahora vamos a ver como podemos hacer que sea semánticamente correcta.

Con nuestros conocimientos recien adquiridos sobre HTML5, podemos revisar nuestro codigo. Vamos a empezar con el contenido de header

Header antes de modificar

Lo  primero que vemos es que en la linea 10, dejamos una etiqueta «nav», por despiste, que no significa nada, por lo que la eliminaremos, y luego tendremos que eliminar su cierre de footer.php, por lo que yo, abriría también «footer.php» para ir haciendo los cambios, y que no se nos olviden. Y en «footer.php» esta en la linea 26, con lo cual borro el «/nav

En la linea 23 de «header.php» tenemos una etiqueta «div» con el id de «nav», que ya sabemos, no tiene ningún valor semántico, pero ahora si podemos conseguir que lo tenga, para ello, solo tenemos que cambiar:

< div id=»nav» >

por

< nav id=»nav»>

El id, ya no lo necesitamos, pero si lo retiramos, cualquier estilo que hayamos aplicado a ese ID, lo deberemos modificar para aplicarlo a la etiqueta, y de momento, no es el objetivo del curso, aunque soy consciente de que tenéis conocimientos para hacerlo vosotros solos.

En cambio, una cosa que nos va a llevar algo  mas de trabajo, es la linea 12:

 < div id=»main» role=»main» >

ya vemos, que esta intentando definir el main del documento, pero según la recomendación HTML5,

El contenido del área main, tiene que estar directamente relacionado con el tema central del documento o su funcionalidad.

Por lo que si lo dejamos en ese punto, estaremos englobando áreas como»header» o «nav». Vamos a revisar si alguien esta definiendo algo con el ID main, para poder colocarlo donde debería ir. Una vez comprobado, borramos esa linea, y la linea 24 de «footer.php» que era donde acababa main.

Si main tiene que estar directamente relacionado con el contenido del documento, deberemos acercarlo al bucle que nos entrega los articulos, por lo que abriremos el archivo «index.php»

indexTemaWordpressEl main debe contener únicamente el resultado del bucle, por lo que veo, que una posibilidad, es cambiar el div de «cajaTexto, en linea 4, por el main, osea

< div id=»cajaTexto»>

por

< main id=»cajaTexto»>

respeto el ID, para poder seguir recibiendo cualquier estilo que haya aplicado, aunque los tendré que revisar.

Nuestro siguiente paso es ubicar la etiqueta «article», y como ya suponéis, nos debe englobar cada uno de los post que tengamos; eso lo podemos hacer abriendo la etiqueta despues de la linea 7; alli, deberemos poner

< article>
< header>
< hgroup>

ya que ademas de «article», deberemos abrir las cabeceras (header», y dentro de las cabeceras un grupo de encabezado (hgroup) ya que tenemos dos lineas de encabezamiento.

El cierre de los dos últimos, lo haremos después de la linea 14, que  es donde termina la cabecera del articulo

< /hgroup>
< /header>

La ultima etiqueta que nos queda abierta es «article», que debe cerrarse, justo donde acabara nuestro post, y eso ocurre justamente antes de «end while» y antes del «hr» que nos servirá para indicar temas distintos.

Otra modificación que puedo incorporar, es hacer que la fecha de publicación
pase a estar identificada; para ello, utilizo la etiqueta «time».

html5_etiqueta_time

Observad que utilizo un formato de fecha especial, ya que «datetime» asi me lo pide. Asi mismo, tengo luego que hacer que la fecha se imprima, ya que esta etiqueta la identifica pero no la presenta. Tambien utilizo el atributo «pubdate» para indicar que es la fecha de publicación

Solo queda apartar la barra lateral del contenido principal, y esa es la funcion de la etiqueta «aside», y la podemos ubicar en dos sitios, o bien al principio y fin del fichero «sidebar.php», o envolviendo la llamada que se hace a ese fichero.

Nosotros por motivos de claridad, hemos optado por incorporarlo a «sidebar.php», de forma que cambiamos el div de «sidebar», por un «aside»

Al final, nuestro codigo ha quedado asi:

header.php:

html5_headerEn donde hemos añadido una rutina javascript para los navegadores que todavía no soportan HTML5

index.phpindex_html5

sidebar.php

html5_sidebarfooter.php

footer_html5Con esto, podeis investigar un poco, y probar de modificar vuestro tema. En nuestro siguiente articulo, volveremos al HTML, y revisaremos alguna estructura antigua como «table».

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.