Convertir un tema de WordPress a HTML5

Convertir un tema de WordPress a HTML5

Fecha: 28-May-2011 | Autor: .
Guardado en: HTML y CSS, Themes, WordPress

Hoy les traigo un artículo, que si bien no es de mi autoría, me pareció tan interesante, que decidí tomarme un tiempo y traducirlo para que esté disponible para la comunidad wordpress hispana. Y trata justamente de cómo convertir un theme de WordPress a HTML5, que como todos saben es “lo que se viene” (o ya se vino) según algunos, en maquetación web! ;)

HTML5 nos ofrece varias mejoras y características interesantes que pueden ser útiles al trabajar con WordPress. En este tutorial, aprenderás como convertir tu tema de WordPress a HTML5. Que lo disfrutes!

Estructura del documento en HTML5:

<!doctype html>
<head>
</head>
<body>
	<header>
	</header>
	<section id="content">
		<article>
			<header>
			</header>
		</article>
	</section>
	<aside>
		<nav>
		</nav>
	</aside>
	<footer>
	</footer>
</body>
</html>

Como podemos apreciar, se han agregado algunas nuevas etiquetas HTML, si añadimos a nuestro CSS article, aside, figure, footer, header, hgroup, menu, nav, section y les damos display:block;, podremos formatearlas como cualquier otro elemento de bloque (ej: <div>).

  • Dentro de <header> podemos incluir elementos que suelen aparecer en titulares (sliders, menus, logo, etc). El uso de <header> dentro de la etiqueta <article> lo veremos luego.
  • La etiqueta <section> nos ayuda a mantener el órden en nuestros documentos, nos permite dividirlos en sectores (ej: contenido, comentarios, galería, etc.).
  • Luego <article> puede ser usada para contener entradas (cada una dentro de una etiqueta <article> separada), el titulo y información meta de la entrada debería ir dentro del tag <header> lo cuál tendría un impacto positivo en el SEO.
  • El tag <nav> lleva la navegación, y no es necesario que esté dentro de <aside>, sino que puede estar en el <header> o cualquier otro sitio donde deseemos tener la navegación.
  • Si nuestro tema tiene un pie de página (o footer) es buena idea incluirlo dentro del tag <footer>. Podemos tener más de una etiqueta <footer>, pero cada una en una distinta <section> de la página, y una sola directo dentro de <body>
  • Las etiquetas <article>, <header>, <footer>, <section> pueden ser usada más de una vez, pero manteniendo una estructura correcta, propongo la siguiente:

¿Por qué este anuncio?
<section id="content">
	<article>
		<header>
		</header>
		<p>
		</p>
		<footer>
		</footer>
	</article>
</section>

Dentro de <header> podemos poner un <h3>, el cuál es el tipo de título más común en WordPress para los titulos de posts. Si deseamos incluir más de un titulo (ej: <h3> y <h4>) usaríamos el elemento <hgroup> de la siguiente forma:

<hgroup>
<h3>Título</h3>
<h4>Subtítulo</h4>
</hgroup>

La información meta del post, puede ir contenida en la etiqueta <footer> (o bien en el <header>).
Sobre los comentarios, podríamos tratarlos como posts y ponerlos dentro de tags <article> con su respectivo <header>, <p> y <footer> dentro.

Para nuestro formulario de comentarios, debemos usar también HTML5, para lo cuál contamos con varias nuevas carecterísticas en lo que respecta a formularios, por ejemplo veamos:

<input type="text" name="author" id="comment-form-author" placeholder="Tu nombre" value="" size="22" tabindex="1" required="required">
 
<input type="email" name="email" id="comment-form-email" placeholder="Tu email" pattern="[^ @]*@[^ @]*" value="" size="22" tabindex="2" required="required">
 
<input type="text" name="url" id="comment-form-url" placeholder="Tu sitio web" size="22" tabindex="3" />

En el parámetro placeholder podemos especificar una “ayuda” para el usuario, que aparecera como contenido del input y desaparecera al clickear sobre el mismo.
El parámetro pattern nos permite introducir una condición que debe cumplir el contenido del input para ser considerado valido, en el ejemplo se ve la aplicación con un condicionante para el email.

Por último, debemos tener en cuenta que HTML5 es una poderosa herramienta, pero no es soportada aún por todos los navegadores.

Original English Post: How to convert WordPress theme to HTML5? by skyje.com


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

3 comentarios, participa!

  1. rimboe

    24. Jul, 2011

    Hola buenas,

    Os recomiendo http://www.foroshtml5.com para todos los que queráis aprender y saber más sobre HTML.

    Estan creando una comunidad de habla hispana sobre el tema, es un foro joven que pinta muy bien.

    Saludos!

  2. Cristina

    04. Oct, 2011

    Hola, muy bueno el post, llegue aca porque tengo una duda y tal vez me puedas ayudar, hace tiempo me hicieron una pagina web en donde la persona que lo hizo adapto un tema de wordpress y lo utilizo como template para hacer la web pero sin tener instalado wordpress, como puedo hacer eso? o de que manera podría buscarlo en google para encontrar algun tuto, si puedes ayudarme te voy a estar mas que agradecida

  3. Marcelo

    04. Oct, 2011

    Hola Cristina, lo que tu comentas… en realidad lo que siempre se puede hacer es utilizar el diseño, y volver a maquetarlo (sin integrarlo en WP)… o incluso aprovechar algunas partes del HTML del theme… pero no creo que haya ninguna forma muy automatizada ;)

    Saludos!

Deja tu opinión