Advertisement
  1. Code
  2. Theme Development

Convierte tu tema de WordPress a HTML5

Scroll to top
Read Time: 8 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

HTML5 introduce un excelente conjunto de funciones nuevas y opciones sencillas. Pronto contará con el soporte total de la mayoría de los navegadores que se utilizan en la actualidad. Eventualmente todos tendrán que convertir los temas de WordPress de XHTML a HTML5. Después de la actualización Panda de Google, tu sitio necesita tener un código más limpio y legible para las personas, con el fin de lograr una mejor clasificación en Google. Te enseñaré cómo convertir tu tema de XHTML a HTML. También nos ocuparemos del 2% de los usuarios de Internet que tienen JavaScript desactivado (para lograr la compatibilidad con versiones anteriores).


Nuestros objetivos

En este tutorial nos concentraremos en convertir nuestro tema de WordPress de XHTML a HTML5. Iremos paso a paso, aprendiendo los cambios a través de los archivos listados a continuación (estos archivos se encuentran presentes en tu carpeta de temas, es decir wp-content/themes/tutema/¡aquí!).

  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php (opcional)

Diseño HTML5 básico

Echemos un vistazo al diseño HTML5 básico que vamos a crear. HTML5 es mucho más que solamente el doctype (o declaración de tipo de documento) al comienzo de tu código. Existen varios elementos recién introducidos que nos ayudan a dar estilo y codificar de manera eficiente con menos marcado (esa es una de las razones por las que HTML5 es mejor).

Ahora solamente necesitamos saber en dónde colocar las nuevas etiquetas HTML5 correspondientes a headerfooternavsection y article. Los nombres de las etiquetas recién introducidas explican por sí mismos sus funciones, en contraste con el XHTML estructurado con div.


Paso 1. Convirtiendo header.php a HTML5

Ahora te mostraré el código que se utiliza comúnmente en el header.php de los temas XHTML de WordPress.

El header.php de un tema XHTML

Aquí, uno debe preguntarse ¿por qué estamos haciendo todo esto? La respuesta es simple: por el marcado semántico de HTML5. Este reduce el marcado, lo que lo hace muy fácil de entender y administrar.

El header.php en HTML5 (conversión)

Lee el código y luego sigue las instrucciones a continuación para convertir el header.php de tu tema a HTML5.

Como puedes ver, el código convertido es muy similar al código XHTML. Analicemos los cambios.

  • <!doctype html>: HTML5 tiene un doctype verdaderamente simple, pero incluye muchas de las etiquetas semánticas nuevas.
  • <header>: la etiqueta semántica de la porción del encabezado.
  • <nav>: reemplazamos el código div de la barra de navegación con una etiqueta semántica nueva usada para controlar la barra de navegación en HTML5.

Nota: algunas personas incluyen la etiqueta section en el encabezado. Hay mucho debate sobre esto. Personalmente estoy en contra de incluir la etiqueta section en el encabezado, ya que destruirá la belleza de HTML5. Puedes usar el antiguo div ahí, por supuesto.

¿Qué ocurre con los scripts y las hojas de estilo?

Al convertir un tema de WordPress a HTML5, la inclusión de los scripts y las hojas de estilo en el encabezado es realmente muy simple. En HTML5 solamente usamos las etiquetas <script> y <link>. Así que elimina type="text/javascript"; todos los navegadores considerarán una etiqueta <script> como JavaScript, a menos que escribas su tipo explícitamente. De manera similar, elimina type="text/css" de tu etiqueta <link> para una hoja de estilo.

¡Tomando en consideración los navegadores antiguos!

Para lograr la compatibilidad con navegadores más antiguos se incluye un shiv de HTML. Se trata de un archivo JavaScript simple. Algunos ejemplos de un shiv son el script en HTML5 de Remy Sharp o el script Modernizr. Usemos Modernizr.

Vamos a necesitar poner en cola el script de nuestro archivo functions.php, de esta manera:

Consejo: coloca tus etiquetas de encabezado que aparecen consecutivamente dentro de <hgroup>.

Nota: este script debe colocarse en la parte superior, dentro de la etiqueta <?php wp_head(); ?>, por lo que le hemos asignado a add_action una prioridad de 1.


Paso 2. Convirtiendo index.php a HTML5

Un index.php común en XHTML está compuesto por las siguientes etiquetas. Convertiré cada una de ellas, explicando todo el proceso después de la conversión.

Nota: no voy a agregar el código completo aquí, ya que ocasionará que el artículo sea más largo sin ningún motivo.

index.php en XHTML

index.php en HTML5 (conversión)

Antes de echar un vistazo a los cambios que hicimos, debemos saber que HTML5 nos proporciona tres etiquetas básicas para el modelado del diseño: section, article y aside. Section reemplazará el div de las entradas, article reemplazará el div de las publicaciones y aside será usada para nuestra barra lateral un poco más tarde.

  • <section>: HTML5 tiene una etiqueta de diseño llamada section que separa a un bloque por el código usado en él.
  • <article>: una etiqueta semántica para la porción de la publicación, similar a section.
  • <aside>: una etiqueta semántica para colocar las imágenes de la publicación a un lado y para las barras laterales.
  • Migas de pan y navegación de página: si nuestro tema tiene migas de pan, estas serán usadas en un div, como en <div class="breadcrumbs">...</div>, y para la navegación de página usaremos <nav id="pgnav">...</nav>.

index.php completo en HTML5

Nota: a continuación he pegado un index.php general, es decir, algo de código terminado convertido a HTML5.


Paso 3. Trabajando con sidebar.php

Usaremos <aside> en nuestra barra lateral en lugar de un <div>, por ejemplo:

sidebar.php en XHTML

Se convierte en lo siguiente después de usar <aside>.

sidebar.php en HTML5

¡Eso fue fácil!


Paso 4. Las ediciones en footer.php

Usaremos la etiqueta semántica <footer> en lugar de un simple div en nuestro footer.php, por ejemplo:

footer.php en XHTML

footer.php en HTML5


Paso 5. Trabajando en single.php

No hay cambios especiales en single.php, así que solo voy a pegar el código modificado, ya que podría ser útil para algunos de ustedes que son principiantes. He usado las etiquetas section y article en él. También puedes usar la etiqueta <time> si lo deseas.

single.php en XHTML

single.php en HTML5

Nota: con respecto al SEO, algunas personas usan <header class="entry-header"> antes de los títulos de las publicaciones, lo cual también es una práctica recomendada.


Paso 6. Finalmente, el style.css

Al final, lo único que nos importa es el problema de la compatibilidad con las versiones anteriores. Para estar del lado seguro con los navegadores más antiguos, los elementos HTML5 deberían mostrarse como bloques usando un estilo display: block. Simplemente coloca el siguiente código en la parte superior de tu style.css:


Notas adicionales

Si usas audio o video incrustados en un archivo de plantilla, debes usar elementos de audio y video de HTML5. En la hoja de referencia mostrada a continuación puedes ver algunas etiquetas más. Cada vez que agregues alguna funcionalidad nueva, investiga un poco sobre cómo agregarla en HTML5 con sus etiquetas semánticas.

Recursos sobre HTML5

Algunos temas HTML5 gratuitos

Ahora es tu turno

¿Planeas utilizar HTML5? ¿Ya has pasado a HTML5 y los cambios afectaron tu clasificación de SEO? ¡Cuéntanos en los comentarios a continuación!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.