Crear template responsive para wordpress

WordPress   |   4 Comentarios

Hoy os vamos a explicar cómo crear un template responsive para wordpress. Comprende tu plantilla responsive de wordpress, transforma tu plantilla de wordpress en responsive.

Crear template Responsive para WordPress

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?

(2 votos, promedio: 4,50 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes