Convertir un tema WordPress a HTML5

Si quieres convertir tu tema WordPress de XHTML a HTML5 vamos a ver paso a paso como hacerlo. Las ventajas de usar HTML5 tienen sobre todo que ver con una web más humana y fácil de leer, para los navegadores y también para los buscadores.

De hecho, Google te agradecerá que uses las ya estándar etiquetas HTML5.

En este tutorial vamos a convertir los siguientes archivos:

  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php
  • style.css

Estos archivos son los básicos de todo tema WordPress, el resto los puedes adaptar partiendo de las premisas de estos, que son los fundamentales.

1. Plantilla base HTML5

La estructura básica de HTML5 se basa en etiquetas como header, footer, nav, section y article que, en inglés, son mucho más autoexplicativas que la estructura mediante «div» de XHTML.

Un ejemplo completo sería este:

<!DOCTYPE html>
<html lang="es">
<head>
	<title>TÍTULO | Descripción!</title>
</head>
<body>
	<nav role="navigation"></nav>
<!--Fin de header.php-->
<!--Empieza  index.php-->
	<section id="content">
		<article role="main">
			<h1>Título del artículo</h1>
			<time datetime="DD-MM-YYYY"></time>
			<p>El text de tus entradas irá aquí.</p>
			<p>Aquí termini el text de tu artículo.</p>
		</article>

		<aside role="sidebar">
			<h2>Algún Widget en la barra lateral</h2>
		</aside>
	</section>
<!--Fin de index.php-->
<!--Empieza  footer.php-->
	<footer role="foottext">
		<small>Algo de Copyright</small>
	</footer>
</body>
</html>

2. Convertir header.php a HTML5

Un fichero header.php tipo sería así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mi Web</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
	<div class="container">
		<h1><a href="<?php bloginfo('url');?>">Mi sitio web molón.</a></h1>
	</div><!-- End  Container -->
</div><!-- End  Header -->

<!-- Navigation Bar Starts -->
<div class="navbar">
	<div class="container">
		<ul class="grid nav_bar">
			<?php wp_list_categories('navs_li='); ?>
	     </ul>
	</div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">

Si lo convertimos a HTML5 queda de este modo:

<!doctype html>
<html>
<head>
<title>Mi Web</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">Mi sitio web molón.</a></h1>
    </div>
</header>
<!-- End Header  -->

<!-- Navigation Bar Starts-->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">

El único elemento mantenido en la conversión sería la etiqueta div, que puedes sustituir por la nueva section si así lo deseas.

Otro cambio posible sería que en HTML5 se usan las etiquetas script y link. Así que puedes quitar type="text/javascript" Ya que cualquier navegador considerará la etiqueta script como JavaScript a menos que especifiques el tipo. Igualmente, puedes quitar type="text/css" de tu etiqueta link para la hoja de estilos.

3. Convertir index.php a HTML5

Para no poner todo el código posible, nos remitimos a las etiquetas básicas a modificar en un fichero index.php base, que sería así:

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>

</div><!--Fin de entries (loop)-->
<?php get_sidebar(); ?>
</div><!--Fin del content-->
</div><!--Fin del container-->
<?php get_footer(); ?>

Para pasarlo a HTML5 debemos cambiarlas por esto otro:

<div id="container">
	<div id="content">
		<section id="entries">
			<article id="post">...</article>
		</section><!--fin entries-->
		<?php get_sidebar(); ?>
	</div><!--fin content-->
</div><!--fin wrap-->
<?php get_footer(); ?>

Llegados a este punto lo que hay que apuntarse es que en HTML5 section remplaza al div entries, que article sustituye el div posts y que aside es lo que se usa para nuestra barra lateral (sidebar).

Un index.php completo sería algo así:

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();

<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) {
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/imagen.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="post_content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Sigue leyendo</a>
    </section>
    <section class="meta">

    <p> <?php the_category(',') ?></p>

    <p><?php the_tags(""); ?></p>

    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Lo siento, no hay entraps relacionadas con lo que buscas.'); ?>
  </p>
  <?php endif; ?>

  <?php posts_nav_link(' ⏼ ', __('« Entradas siguientes'), __('Entradas anteriores »')); ?>
</section>

4. Convertir sidebar.php a HTML5

Un simple sidebar.php de este estilo:

<div id="sidebar">...</div>

Pasa a ser así en HTML5:

<aside id="sidebar">...</aside>

Como ves lo importante es cambiar el div por aside, que lo identifica como tal.

5. Convertir footer.php a HTML5

De nuevo, esto es sencillito, pasando de algo así:

<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

a esto otro en HTML5:

<footer id="footer">
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

6. Convertir single.php a HTML5

Aquí, partiendo de un fichero tipo single.php en XHTML como este:

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

<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <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 >Read More</p>'); ?>
        </div>
        <div class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 

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

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

<?php get_footer(); ?>

Pasamos a su versión HTML5 de este modo:

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

<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <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>Read More</p>'); ?>
        </section>
        <section class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 

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

<?php get_footer(); ?>

7. Convertir style.css (la hoja de estilos) a HTML5

Para asegurarnos la compatibilidad con navegadores antiguos debemos asegurarnos de que los elementos HTML5 se muestren como bloques, usando display: block style. Lo único que tenemos que hacer es añadir la siguiente línea al principio de nuestra hoja de estilos, del fichero style.css del tema:

header, nav, section, article, aside, figure, footer { display: block; }

Y con esto ya tenemos un tema WordPress casi completo en HTML5. A partir de aquí podemos usar las etiquetas HTML5 como hemos visto en los archivos anteriores sobre el resto de los que use tu tema. Por ejemplo, el fichero page.php usará la misma estructura que single.php, para archive.php nos basaremos en index.php y así sucesivamente.

Aquí te dejo unos interesantes enlaces para aprender más sobre HTML5:

Esta guía es una adaptación del tutorial creado por WP tuts

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

10 comentarios en “Convertir un tema WordPress a HTML5”

  1. Fernando muchas gracias por enviar estos tips, para ir pensando como se modernizara el codigo. Te queria preguntar, como puedo cambiar la fecha en wordpress de Publicado hace 3 meses, o ejem. Publicado hace 3 dias… es un foro dentro de wordpress, pero me gustaria cambiar esa leyenda por algo como: 2/26/2012. Gracias 🙂 y adelante con el blog. 

  2. Muy buen post pero sólo habría que tener en cuenta que los nuevos tags semánticos de HTML5 no lo soportan navegadores anteriores a IE9, una solución es utilizar Modernizr o este polyfill, este script condicional dentro del head

    <!–[if lt IE 9]>–>

    Saludos

  3. html5 le gusta a google, ese es el beneficio, y en un futuro se posicionara mejor en los resultados de busqueda.

    y JDRE yo lo hago de esta forma  " echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; " , colocas eso en ves lo los tags que te da wordpress.

    Tambien hay plugins, busca SINCE TIME en los plugins de wordpress y encontraras varios.

  4. esta genial este articulo , ya habia hecho algunos cambios hacia HTML5 pero me parece que me faltaba más para completa la actualizacion del codigo
       SE AGRADECE MUCHO. THANK YOU

  5. Pingback: Haz tu Wordpress un poquito más móvil - mediotic . info : mediotic . info

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido