WP desde cero (3): estructura semántica

En esta entrada veremos cómo definir la estructura semántica de la página principal de forma que sea compatible con el Explorer.

Roy Lichtenstein

archivado en: WordPress / 29 noviembre, 2012 / taller:

Seguimos con la serie de WordPress desde cero. En esta tercera entrada prepararemos  la estructura semántica de la página principal, del archivo index.php, que será el que luego adaptaremos a las distintas páginas que necesita el tema (para entradas individuales, para el archivo, etcétera).

[singlepic id=30 w=400 h=417 float=center]

Entonces, toda la página estará contenida en un div que llevará por identificador la palabra wrap, que en inglés significa «contenedor». No es necesario llamarlo así, es solo una convención, pero si la respetamos será más fácil que terceras personas puedan adaptar el tema a sus necesidades. Y tampoco es que sea necesario usar este supercontenedor, pero me parece que así queda todo mucho más estructurado, manejable y comprensible.

En vez de un div, quizás se podría emplear aquí un <section>, pero como creo que esta etiqueta necesita mayor definición por parte de la W3C, prefiero no usarla, pues no creo que sirva realmente para mucho.

La página comenzará por un <header>, que contendrá la cabecera, y a continuación incluiremos un menú entre las etiquetas <nav></nav>, que sirven para englobar los elementos importantes de navegación.

Luego vendrá el cuerpo principal de la página, definido por un <div> que llamaremos también por convención main (principal), el cual contendrá dos grandes bloques: uno definido por un div con un id denominado primary, en el cual irá un par <article></article> por cada post; y otro formado por un par <aside></aside> con la barra lateral o sidebar.

Por último al final de la página pondremos la información secundaria, como el copy-left, en el par <footer></footer>.

Así, de momento, el archivo index.php quedaría más o menos de esta manera:

  1. <?php
  2. /*
  3. * @package WordPress
  4. * @subpackage mmfilesi-bones
  5. * @since mmfilesi-bones 1.0
  6. */
  7. ?><!DOCTYPE html>
  8. <html>
  9. <head>
  10. <title>
  11. </title>
  12. <!-- CSS -->
  13. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  14. </head>
  15. <body>
  16. <div id="wrap">
  17. <header>
  18. <!-- Aquí irá la cabecera -->
  19. </header>
  20. <nav>
  21. <!-- Aquí irá la barra de navegación -->
  22. </nav>
  23. <div id="main">
  24. <div id="primary">
  25. <!-- Aquí irá la columna central -->
  26. </div> <!-- #primary -->
  27. <aside id="secondary">
  28. <!-- Aquí irá la columna lateral (sidebar) -->
  29. </aside> <!-- #secondary -->
  30. </div> <!-- #main -->
  31. <footer>
  32. <!-- Aquí irá el pie de página -->
  33. </footer>
  34. </div> <!-- #wrap -->
  35. </body>
  36. </html>

Observad que, cuando la etiqueta de cierre está muy distanciada de la etiqueta de apertura, en el cierre añado un comentario indicando cuál es su pareja: <!-- #wrap -->. Esto no es obligatorio, claro, pero sí muy recomendable pues, como veremos, algunos pares de etiquetas podrán incluso abrirse en un archivo y cerrarse en otro, por lo que solo anotando con cuidado el código evitas volverte tarumba más adelante tratando de identificar para qué sirve cada cosa.

HTML5 Shiv y modernizr

Bien, ya tenemos la estructura semántica básica del documento, pero ahora tenemos que resolver un problema y es que no todos los navegadores son capaces de interpretar las etiquetas semánticas. El Explorer solo lo hace desde la versión 9 y, como no se actualiza solo, corremos el riesgo de que nuestro tema quede fatal en muchos ordenadores.  😎

Dont Panic, como ya expliqué, la solución es bien sencilla incorporando al tema el script HTML5 Shiv.

Para eso, lo bajamos de la página oficial, lo descomprimimos y guardamos el archivo src>html5shiv.js en una carpeta llamada js, en la cual pondremos todos los archivos JavaScript y jQuery que vayamos a usar.

Luego hay que añadirlo a WordPress y aquí la dificultad es indicar la ruta. Por razones que ya veremos, WordPress se hace un lío con las rutas relativas (js/miscript.js) y hay que poner siempre la ruta absoluta de las cosas:

http://www.midominio.com/wp-content/themes/nombre_del_tema/js/miscript.js

Si el tema es para uno mismo y nunca va a usarlo en otro sitio, se podría poner la ruta absoluta tal cual, pero eso es una chapuza, ya que si luego se quiere usar el tema en otra web hay que localizar y cambiar todas las rutas. Pero como no hay mal en este mundo para el que Dios no haya puesto una solución, que decía san Isidoro de Sevilla, tenemos a nuestra disposición la función de WordPress get_template_directory_uri(), que devuelve la ruta del tema.

Así, lo único que hay que hacer es añadir en el head, antes de las CSS, esta línea

  • <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" type="text/javascript"></script>

Ahora bien, aunque pesa nada y menos, es una pena cargar este script si el navegador no es una versión inferior del Explorer 9, por lo que podemos usar un truco que solo funciona con este navegador y consiste en incluir un comentario condicional:

  • <!--[if IE 6]>
  • Instrucciones especiales para el IE6
  • <![endif]-->

De esa forma, los demás navegadores no cargarán el script:

  • <!--[if IE 6]>
  • <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" type="text/javascript"></script>
  • <![endif]-->
  • <!--[if IE 7]>
  • <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" type="text/javascript"></script>
  • <![endif]-->
  • <!--[if IE8]>
  • <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" type="text/javascript"></script>
  • <![endif]-->

Quizás nos podríamos ahorrar el caso del IE6, pues prácticamente ya casi nadie lo usa, pero la verdad es que no cuesta nada añadirlo.

Otra opción es agrupar todas las versiones antiguas en un solo condicional mediante lte (menor o igual que):

  • <!--[if lte IE 8]>
  • <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" type="text/javascript"></script>
  • <![endif]-->

Vale, esto nos sirve para las etiquetas semánticas, pero si vamos a utilizar muchas más cosas de HTML5 y CSS3, entonces, en vez del script html5shiv.js nos conviene incluir toda la librería modernizr.

Para eso, vamos a la página oficial, pulsamos la opción production, seleccionamos lo que vayamos a necesitar, pulsamos la opción generate (abajo a la izquierda) y, finalmente, nos descargamos un archivo que podemos renombrar como nos venga en gana (por ejemplo, en vez de modernizr.custom.87045, sencillamente modernizr.js).

Para incluirlo en WordPress, la jugada sería la misma:

  • <!--[if IE 6]>
  • <script src="<?php echo get_template_directory_uri(); ?>/js/modernizr.js" type="text/javascript"></script>
  • <![endif]-->

Luego, en el tag <html> hay que añadir class=no-js:

  • <html class="no-js">

Con eso ya podríamos ir definiendo alternativas, un tema complejo que escapa al objeto de estudio de esta serie y del que podéis consultar un manual muy bueno en desarrolloweb.com.

Importante: La opción del modernizer es prescindible. Los usuarios con versiones antiguas del Explorer pueden acceder a una página aunque se pierdan las sombras, los bordes redondeados y los degradados. No es grave. Pero sí es más que recomendable incluir al menos html5shiv.js.

Bueno, pues por hoy ya está bien  :-).

abrazos++;

|| Tags: , ,

valoración de los lectores sobre WP desde cero (3): estructura semántica

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.7 sobre 5 (19 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

7 respuestas a “WP desde cero (3): estructura semántica

  1. Campeón. No me canse de repertir que está genial este blog/turorial. Te cuento de un pequeño detalle. En la parte donde dice ; acá le faltó una comilla al fina. Lo correcto debería ser así: .
    Abrazos

  2. Campeón. No me canse de repertir que está genial este blog/turorial. Te cuento de un pequeño detalle. En la parte donde dice <html class=”no-js > acá le faltó una comilla al final. Lo correcto debería ser así: <html class=”no-js > (Me había olvidado de tener cuidado de escribir bien el código para que no se ejecute; solo se visualice).
    Abrazos

  3. Campeón. No me canse de repertir que está genial este blog/turorial. Te cuento de un pequeño detalle. En la parte donde dice < html class=”no-js > acá le faltó una comilla al final. Lo correcto debería ser así: < html class=”no-js” > (Me había olvidado de tener cuidado de escribir bien el código para que no se ejecute; solo se visualice). [Me volví a equivocar!! GRRR 🙁 perdón!]
    Abrazos

  4. Ulises2010 el dijo:

    Gracias por este tutorial que parece que es exactamente lo que buscaba.
    Lo estoy siguiendo paso a paso y de momento todo bien, pero la última parte de este post me lia un poco y aunque decís que no es imprescindible me gustaría ir entendiendo todo.

    Hablas de descargar la libreria modernizr con lo que vayamos a necesitar, pero no nos dices que es ni que es lo más recomendable.

    Para incluirlo en la web nos das este códico:


    <script src="/js/modernizr.js” type=”text/javascript”>

    Pero ese código creo que vale sólo para el IE6… ¿habría que ponerlo también para IE7 e IE8?

    Todo esto imagino que hay que meterlo en el , igual que lo anterior, pero no se muy bien donde y como meter el no-js en el tag ¿es en el que declara la página, el que aparece en la línea 8?

    Gracias

  5. Ulises2010 el dijo:

    Acabo de ver tu aviso de que no te es posible resolver dudas y nos recomiendas los foros de forosdelweb.

    Lo comprendo y te lo agradezco igual.

    Gracias