Crear template responsive para wordpress

Crear template responsive para wordpress, Comprende tu plantilla responsive de wordpress, transforma tu plantilla de wordpress en responsive.

Internet cada día llega a más dispositivos, smartphones, tabletas, libros electrónicos etc.. cada uno con sus dimensiones y limitaciones, es por esto que queda en evidencia la necesidad de contemplar a la hora de crear un sitio web la correcta visualización de los contenidos que mostramos.

Para ello existe el “responsive web design” o el diseño web adaptativo, una técnica que permite adaptar nuestra web a los diferentes soportes y dispositivos mediante el uso de estructuras e imágenes que se adaptan a la resolución de la pantalla, así como media-queries que se implementan en la hoja de estilo (CSS) que permiten que la misma versión de una web sea apta para cualquier dispositivo.

WordPress es el sistema de gestión de contenido de código abierto más extendido y popular. Desde hace algunos años su comunidad viene desarrollando themes que responden a esta necesidad.

El theme por defecto que wordpress instala “Twenty Eleven” es un ejemplo de diseño responsive, pero podéis encontrar muchos themes gratuitos para wordpress responsives o adaptables, algunos de los más conocidos son:
Skeleton
Responsive
Twenty Twelve
Simplecorp

También existen plugins para wordpress que contemplan la inclusión de elementos responsive en tu theme tales como sliders, menus redimensionables, conversión de imágenes etc..

Si queremos entender o modificar nuestro theme responsive o queremos convertir nuestro theme en responsive tenemos que tener en cuenta varios factores:

Factores para crear template responsive para wordpress

1. Contenido
Los elementos variables de la web han de tener un tamaño de ancho en porcentaje, esto permite que los contenido fluyan en función del tamaño de la ventana del navegador.

div#contenedor
{max-width: 990px}

div#contenido
{width: 70%; float left;}

div#sidebar
{width: 30%; float: right;}

Hay que tener en cuenta que no se trata de hacer el contenido más pequeño sino de hacerlo más accesible, por tanto habrá elementos que no se redimensionen, sino que se posicionen de manera diferente mediante media-queries.

2. Imágenes
Las imágenes deben adaptarse al elemento que las contiene, por ello no debemos definir su tamaño en el html sino en las css. De esta manera las imágenes se escalarán a medida que elemento que las contenga lo haga.

img {max-width: 100%; height: auto;}

3. Media-queries.
La utilización de media-queries permite definir estilos diferentes en nuestras CSS para cada resolución. En las CSS se definen 3 media queries básicos que contemplan las resoluciones de los diferentes dispositivos, se pueden utilizar cuantos media queries se necesiten:

/* #### Mobile Phones #### */
@media screen and (min-device-width: 320px) and and (max-device-width: 480px){
   div#contenido
{width: 100%;}

div#sidebar
{width: 100%;}
}

/* #### Tablets #### */
@media screen and (max-device-width: 768px){
 div#contenido
{width: 100%;}

div#sidebar
{width: 100%;}
}

/* #### Desktops #### */
@media screen and (max-width: 1024px){
  div#contenido
{width: 70%; float left;}

div#sidebar
{width: 30%; float: right;}
}

Esperamos que os haya servido de ayuda, y sobre todo, si quieres un trabajo profesional de wordpress, deja que lo hagan profesionales. ¡No te arrepentirás!

 

 

 

¿Te ha gustado el artículo?
Sé el primero en calificar esta publicación.
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

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

5 Comentarios

roberto

jjj sigue asiendo spam jjj :) es broma

Cristian

Hola, muy buen articulo. Aqui les dejo otro buen videotutorial para crear plantillas Wordpress desde cero sin tener que programar en PHP. Videotutorial: http://creatutemadewordpress.com Espero les ayude. Saludos!

Carlos

Pues este blog es muy poco responsive... la sidebar siempre permanece en la derecha, y al entrar desde móvil se ve el contenido en la izquierda ocupando media pantalla, y la sidebar ocupando la otra media. No aplicáis lo de "div#sidebar {width: 100%;}" para que la sidebar se vaya debajo del contenido y éste se pueda leer correctamente ocupando el 100%.

aNTONIO rOMAN

Este tuto esta muy bien,pero como soy novatillo,tengo una pregunta cual seria el codigo completo y donde tendria que ponerlo,podrias explicarmelo,gracias

Fliberty

Muy buena explicación y yo que pensé que era más complicado, o sea que la idea no es utilizar em ó px, si no %. Muchas gracias.