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:

2. Convertir header.php a HTML5

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

Si lo convertimos a HTML5 queda de este modo:

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í:

Para pasarlo a HTML5 debemos cambiarlas por esto otro:

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í:

4. Convertir sidebar.php a HTML5

Un simple sidebar.php de este estilo:

Pasa a ser así en HTML5:

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í:

a esto otro en HTML5:

6. Convertir single.php a HTML5

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

Pasamos a su versión HTML5 de este modo:

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:

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

AVISO: esta publicación es de hace dos 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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (sin valoración aún)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest