Convierte tu Theme de WordPress a HTML5

HTML5 presenta un gran conjunto de nuevas características y opciones fáciles. Pronto tendrá el pleno apoyo de la mayoría de los navegadores en uso hoy en día. Con el tiempo todo el mundo tiene que convertir los temas de WordPress de XHTML a HTML5. Después de la actualización de Google Panda el nuevo algoritmo de búsquedas de Google, tu sitio necesita que el código esté más claro y legible, para clasificar mejor en Google y demás buscadores.

Los archivos que editaremos son header.php, index.php, sidebar.php, footer.php y single.php. Recomiendo que antes de hacer los cambios se documenten un poco mas de HTML5 y sus nuevas etiquetas, para que son cada una, aquí solo muestro un antes y un después de tales cambios.

Estructura Básica de HTML5

Aquí puedes encontrar una Estructura Básica de HTML5, el código de HTML5 luce mejor organizado y mas limpio por lo que es mas legible.

[html]
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título | Descripción o Eslogan!</title>
</head>
<body>
<nav id="navigation">
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Contacto</li>
<ul>
</nav>
<!–Final header.php–>

<!–Comienzo index.php–>
<section id="content">
<article id="main">
<h1>Titulo del Articulo</h1>
<p>Aquí tu texto.</p>
</article>

<aside id="sidebar">
<h2>Algun Widget en el Sidebar</h2>
</aside>
</section>
<!–Final index.php–>

<!–comienzo del footer.php–>
<footer id="footer-page">
<small>Información de Copyright</small>
</footer>
</body>
</html>
[/html]

Ahora sólo tenemos que saber dónde colocar las nuevas etiquetas de HTML5 como la cabecera, sección, navegación, artículo, etc.

El Header.php

Comúnmente con XHTML antes era así:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titulo del Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!– Comienzo Header –>
<div class="header">
<div class="container">
<h1><a href="<?php bloginfo(‘url’);?>">Titulo del Blog</a></h1>
</div><!– Final Container –>
</div><!– Final Header –>

<!– Comienzo Navigacion –>
<div class="nav">
<div class="container">
<ul class="nav_bar">
<?php wp_list_categories(); ?>
</ul>
</div>
</div>
<!– Final Navegacion –>

<div class="container">
[/html]

Ahora con HTML5 resulta mas fácil de entender todo el código.

[html]
<!doctype html>
<html>
<head>
<title>Titulo</title>
<?php wp_head(); ?>
</head>
<body>
<!– Comienzo Header –>
<header class="container">
<h1 class="grid"><a href="<?php bloginfo(‘url’);?>">Convirtiendo el Header.</a></h1>
</header>
<!– Final Header –>

<!– Comienzo Navegación–>
<nav>
<div class="navbar">
<ul class="grid nav_bar">
<?php wp_list_categories(‘title_li=’); ?>
</ul>
</div>
</nav>
<!– Final Navegación –>
<section class="container">
[/html]

El Index.php

Con XHTML resulta así:
[html]
<div id="container">
<div id="content">
<div id="entries">
<div id="post">
<p>Aquí el contenido</p>
</div>
</div><!–Final Entries–>
<?php get_sidebar(); ?>
</div><!–Final content–>
</div><!–Final container–>
<?php get_footer(); ?>
[/html]

En HTML5 resulta así:

[html]
<div id="container">
<div id="content">
<section id="entries">
<article id="post">
<p>Aquí el contenido</p>
</article>
</section><!–Final entries–>
< ?php get_sidebar(); ?>
</div><!–Final content–>
</div><!–Final container–>
< ?php get_footer(); ?>
[/html]

Esto es solo algo básico de como resulta el archivo Index.php, no se incluye el loop ni demás funciones de wordpress. Ver una Guía rápida de el Loop de WordPress.

El Sidebar.php

Con la etiqueta aside en lugar de un div, por ejemplo:

con XHTML resulta así:
[html]
<div id="sidebar">aquí tus widgets</div>
[/html]

Y con HTML5 así:
[html]
<aside id="sidebar">Aquí tus widgets</aside>
[/html]

Así de fácil. 🙂

El Footer.php

Con la etiqueta footer en lugar de un div en nuestro footer.php, por ejemplo:

con XHTML así:
[html]
<div id="footer">
<div id="foot_widgets">
<section>
Aqui tus widgets
</section>
</div>
<div id="copyright">
<p>Informacion de Copyright.</p>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
[/html]

con HTML5 así:
[html]
</section> <!–cierras en section que se abre en el header –>
<footer id="footer">
<section id="foot_widgets">aquí tus widgets</section>
<section id="foot_widgets">aquí tus widgets</section>
<section id="foot_widgets">aquí tus widgets</section>
<div id="copyright"><small>Información de Copyright</small></div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
[/html]

El Single.php

Con XHTML resulta así:
[html]
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="container">
<div class="content">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

<div id="entry-content-single">
<?php the_content(‘<p >Leer Mas</p>’); ?>
</div>
<div class="meta"> Publicado por:
<?php the_author() ?>
<?php edit_post_link(__(‘Editar Post’)); ?>

<p><?php the_tags(""); ?></p>
</div>
<div class="clearfix"></div>
</div>

<!– End of post –>
</div></div>

<?php get_footer(); ?>
[/html]

Y con HTML5 así:

[html]
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<section class="content">
<article class="box">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

<section id="entry-content-single">
<?php the_content(‘<p>Leer Mas</p>’); ?>
</section>
<section class="meta"> Publicado Por:
<?php the_author() ?>
<?php edit_post_link(__(‘Editar Post’)); ?>

<p><?php the_tags(""); ?></p>
</section>
<div class="clearfix"></div>
</article>
<!– end post –>
</section></div>

<?php get_footer(); ?>
[/html]

¿Qué pasa con los Navegadores viejos?

En cuanto a IE podemos implementar un método usando el Script de Google:
[html]
<!–[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
[/html]

Con otras etiquetas:
[html]
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="es" class="no-js"> <!–<![endif]–>
[/html]

Agregando una función al archivo functions.php del theme para llamar el script Modernizr que ofrece compatibilidad de HTML5 a navegadores que no lo son.

[php]
function html5_scripts()
{
wp_register_script( ‘modernizr’, get_template_directory_uri() . ‘/js/Modernizr-1.6.min.js’ );
wp_enqueue_script( ‘modernizr’ );
}
add_action( ‘wp_enqueue_scripts’, ‘html5_scripts’, 1 );
[/php]

Todo lo planteado aquí, es una estructura básica de como hacerlo, recomiendo que después de hacerlo reestructuren las clases de su hoja de estilos y agreguen el soporte a las nuevas etiquetas que algunos navegadores no ven y por lo tanto no le aplican estilo.

[css]
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
[/css]

Normalize, ofrece soporte para estandarizar todas las etiquetas de HTML5 haciendo que se vea todo igual en cualquier navegador, es una forma de haceer un Reset a las etiquetas.

Recomendado