Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development

Construyendo un tema de WordPress receptivo, primer móvil

by
Difficulty:IntermediateLength:LongLanguages:

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

La construcción del tema está en el corazón de WordPress. Es la técnica que utiliza para crear sitios web a medida para usted o para sus clientes y es una habilidad vital para cualquier persona que quiera diseñar y desarrollar con WordPress.

Cada vez hay más temas de WordPress que responden: utilizan consultas de medios CSS para adaptarse a diferentes anchos de pantalla, ajustando el diseño y realizando cambios de diseño e interfaz para hacer que cualquier sitio creado con el tema sea más fácil de leer e interactuar en una variedad de dispositivos y Tamaños de pantalla.

En este tutorial, te mostraré cómo crear un tema de Mobile First WordPress, que comienza con el estilo de las pantallas más pequeñas y funciona hacia arriba.


Lo Que Necesitaras Para Este Tutorial

En este tutorial voy a tomar un tema de WordPress con un estilo mínimo y luego lo estilizaré para que sea móvil primero. El diseño final será muy simple: la idea es cubrir los componentes básicos del contenido y el diseño, y luego puede agregar sus propios elementos de diseño si lo desea.

Para seguir los pasos de este tutorial necesitaras lo siguiente:

  • Un editor de texto o código. Si aún no tiene uno, tanto TextWrangler como Kompozer son gratuitos.
  • Si está desarrollando localmente, MAMP, WAMP o XAMPP para poder ejecutar PHP y MySQL y trabajar localmente con WordPress.
  • Si está desarrollando de forma remota, un cliente FTP como FileZilla.
  • Una instalación local de WordPress (o una remota que estés feliz de usar para las pruebas)

Supongo que ya está familiarizado con la instalación y el trabajo con WordPress. Trabajaré en una instalación remota de WordPress
y proporciona enlaces mientras continuo.

A menos que tenga su propio tema en el que está trabajando, también necesitará el código de inicio para el tutorial. Puede ver mi tema en http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ y descargar el código para el tema en varias etapas de su desarrollo desde xxx [se agregará en función del sistema nettuts + downloads].


Antes de comenzar: ¿Qué es móvil primero?

Mobile First es un término que fue acuñado por primera vez por Luke Wroblewski. Se refiere a la
estrategia de cambiar la forma en que diseñamos sitios web y temas en su cabeza. En lugar de comenzar con un diseño de escritorio y luego ajustarlo para dispositivos móviles, trabajamos en la otra dirección: comenzamos diseñando y codificando para dispositivos móviles y luego agregamos lo que se necesita para pantallas más grandes. Esto tiene algunas ventajas:

  • Es más rápido: no se les envía contenido o estilo que no es necesario en pantallas pequeñas. Esto puede ser más rápido que simplemente ocultarlo o anularlo.
  • Cambia la forma en que planificamos el contenido: al centrarnos en pantallas pequeñas, nos centramos en lo que es realmente importante en lugar de en lo que incluimos porque tenemos el espacio. Diseñar de esta manera puede tener un impacto drástico en el eventual diseño del escritorio.

1. Nuestro Tema de Comienzo

El tema de inicio tiene un estilo mínimo aplicado y ningún diseño de diseño todavía, que se agregará a medida que avancemos en el tutorial.

Los elementos que incluye el tema se muestran a continuación:

01-theme-doctree.jpg

En la actualidad, el tema se ve así en un teléfono inteligente (es decir, con un tamaño de pantalla de 320 x 480 px):

02-startingtheme-320px-screen.png

Como todavía no he aplicado ningún ancho, el sitio debería redimensionarse a pantallas más pequeñas, pero no porque el teléfono inteligente lo muestre como si tuviera 960px de ancho. Lo primero que debe hacer es decirle a los teléfonos inteligentes que muestren el sitio en el ancho real de la pantalla.


2. Estableciendo la Anchura de la Pantalla

Para que los teléfonos inteligentes se comporten bien con respecto al ancho de la pantalla, agrego una línea a la sección  head en header.php, de la siguiente manera:

Esto le indica a los teléfonos inteligentes que muestren la página en el ancho de la pantalla del dispositivo en lugar de crear una ventana gráfica virtual de 960 píxeles, que es el comportamiento predeterminado.

Ahora el tema se ve así en una pantalla pequeña:

03-startingtheme-correct-screen-width.png

Si ha creado hojas de estilo de respuesta antes, pero no las de Mobile First, esto será un poco revelador. ¿Recuerda todo el estilo adicional que agregó a sus consultas de medios para pantallas pequeñas? Necesitará muy poco, ya que una página con un diseño de diseño mínimo ya se ve mejor en el móvil que en el escritorio, como puede ver en esta captura de pantalla, tomada a 1024px de ancho:

04-starting-theme%20desktop.png

Pero todavía tengo que agregar algunos estilos de diseño para pantallas pequeñas, que es el siguiente paso.


3. Estilo de los bloques de diseño principal para pantallas pequeñas

Comenzaré agregando algunos anchos y flotadores para los elementos principales, para asegurar que se extiendan por la pantalla. Agrego algunos anchos y una declaracion clear: both a los elementos relevantes:

A continuación, para evitar que el diseño se vea comprimido en la pantalla pequeña, agregaré relleno a algunos elementos:

Tenga en cuenta que estos son los únicos valores horizontales que definiré en píxeles, y lo hago porque no quiero que el relleno sea demasiado grande a medida que aumenta el tamaño de la pantalla.

Ahora el sitio se ve menos lleno y los elementos principales se muestran uno debajo del otro:

05-mobile-padding-applied.png

A continuación, ordenaré las áreas de los widgets y mejoraré la navegación.


4. Añadir estilo adicional para pantallas pequeñas

La navegación debe abarcar el ancho de la pantalla y me gustaría centrar cada elemento del menú, así que agregaré un poco de estilo para el menú:

Esto me da un menú mucho más inteligente:

06-centred-menu.png

Las áreas de los widgets están muy juntas y es difícil ver dónde termina uno y comienza otro. Agregaré algunos bordes y relleno para abordar eso:

A continuación, los widgets de pie de página. Haré algo similar a ellos también:

Esto añade cierta separación entre mis widgets:

07-widgets-border.png

Ahora tengo un diseño simple para mi tema en pantallas pequeñas, con algunos colores, bordes, márgenes y relleno para ayudar a mejorar las cosas. No agregaré ningún estilo adicional aquí ya que podría ralentizar el tema en dispositivos móviles y no creo que siempre sea necesario en pantallas pequeñas. Así que el siguiente paso es comenzar a crear consultas de medios.


5. Añadir algunas consultas de medios

Para este tema voy a apuntar a tres tamaños de pantalla adicionales:

  • 600px de ancho y más, que abarcará tabletas en vertical u horizontal, así como pantallas de escritorio
  • Ancho de 800px y superior, que incluirá tabletas en modo horizontal y escritorios
  • 1025px de ancho y más, que abarcará todas las pantallas de escritorio, excepto las más pequeñas. Iré deliberadamente un píxel por encima de 1024 píxeles para que las tabletas grandes no se vean afectadas por esta consulta de medios.

Es posible que haya detectado que mis consultas de medios no están todas basadas en el ancho de un dispositivo específico. Esto se debe a que a medida que se amplía el rango de dispositivos y anchos de pantalla, la orientación de dispositivos específicos se vuelve menos confiable que establecer consultas de medios en el punto en el que el diseño se beneficia de ellos. He probado el diseño cambiando el tamaño de la ventana de mi navegador y con un ancho de 600px se ve así:

08-mobile-first-theme-at-600px.png

En mi opinión, el diseño se ve mal en este ancho y puede beneficiarse de algunos cambios de diseño.

Entonces, comienzo agregando mis consultas de medios al final de la hoja de estilos:

Tenga en cuenta que he usado el ancho mínimo, no el ancho máximo, como lo haría si estuviera diseñando el escritorio primero y escribiendo consultas de medios para pantallas más pequeñas.

A continuación, pasaré al estilo para dispositivos de tableta.


6. Añadir estilo para dispositivos de tableta en modo vertical

Quiero mejorar mi diseño para aprovechar mejor el espacio de la pantalla en estas pantallas más grandes, y también agregaré algunos gradientes de CSS para que el diseño sea un poco más pulido.

En primer lugar, el diseño. Dentro de mi consulta de medios para pantallas de 600px y mayores, agrego:

Esto agrega flotadores y algunos márgenes para hacer un mejor uso del ancho de la pantalla:

09-tablet-widgets.png

Ahora voy a modificar la navegación, ya que el diseño actual deja mucho espacio vacío al lado de cada elemento y ocupa mucho espacio. Agrego el siguiente estilo para crear una barra de navegación horizontal:

También agregaré un gradiente al menú para este tamaño de pantalla y superior:

Dependiendo de los dispositivos y los navegadores a los que me dirijo, podría omitir algunos de esos prefijos del navegador, pero los he dejado para cualquier otro usuario de mi tema.

Entonces, ahora tengo un diseño mejorado para tabletas en orientación vertical, como se muestra en la captura de pantalla:

10-tablet-navigation-gradient.png

7. Añadir estilo para dispositivos de tableta en modo horizontal

Solo haré un cambio para las pantallas de este ancho: moveré la barra lateral a la derecha del contenido, ya que el contenido se verá un poco estirado si abarca toda la pantalla. Para hacer esto, agrego lo siguiente en la consulta de medios con un ancho mínimo de 800 px:

Esto hace algunas cosas:

  • Mueve la barra lateral a la parte derecha del contenido.
  • Cambia el tamaño de la barra lateral y el contenido y agrega flotadores y una propiedad clear  para el diseño
  • Elimina flotadores en los widgets para que estén ahora en una columna
  • Elimina el borde superior del primer widget, que ya no lo necesita

El tema ahora se ve así en una tableta en modo horizontal:

11-tablet-landscape.png

8. Añadir estilo de escritorio

Si hubiera creado mi tema de respuesta de la manera tradicional, el escritorio primero, estaría trabajando primero en este tamaño de pantalla, pero aquí estoy trabajando en último lugar. Es posible que ya hayas notado que esto hace que las cosas sean muy eficientes; según mi experiencia, eliminar el estilo de escritorio en las consultas de medios dirigidas a dispositivos móviles requiere mucho más trabajo que ajustar mi diseño móvil para equipos de escritorio.

Voy a ajustar el diseño del pie de página para tener las cuatro áreas de widgets del pie de página una junto a la otra, y agregar una imagen de fondo al encabezado. Esta imagen no es crucial para el contenido, pero está ahí para la decoración, así que me siento cómodo con el hecho de que no está en mi marca.

Primero, el diseño. Además de ajustar el diseño del pie de página, agregaré un valor de ancho máximo a la etiqueta del cuerpo para evitar estirar el diseño en todo el ancho de las pantallas muy anchas:

El estilo anterior va en la consulta de medios para pantallas con un ancho mínimo de 1025 píxeles y hace lo siguiente:

  • Añade ancho máximo al cuerpo
  • Ajusta el ancho y el margen derecho en los elementos laterales del pie de página.
  • Ajusta el margen para las áreas de widgets con números pares al 2% en línea con las otras áreas de widgets.
  • Al usar la clase asignada al cuarto área de widgets en el tema (.fourth), se reduce su margen a 0. He utilizado deliberadamente una clase aquí en lugar de nth-child, ya que necesito que esto funcione en todos los navegadores

Entonces, ¿cómo se ve mi tema en el escritorio?

12-desktop-version.png

No está mal. Finalmente agregaré una imagen de fondo a mi encabezado.

Esto agrega mi imagen como fondo con algunos rellenos para dejar espacio para ella:

13-final-desktop-banner-image.png

La ventaja de utilizar este enfoque es que esta imagen solo se descargará en las máquinas de escritorio. Como no está en el estilo central o en las consultas de medios para dispositivos más pequeños, no los ralentizará. Sin embargo, hay desventajas en el uso de imágenes como fondos, especialmente en relación con la accesibilidad, por lo que es importante usar esta técnica solo cuando la imagen es solo para diseño y no es parte del contenido. Alternativamente, podría haber agregado una versión más pequeña de la imagen en mi marca y utilizar CSS para ocultar eso y mostrar una versión más grande de la misma imagen como fondo para pantallas más grandes.


Resumen

Ahora tengo un tema responsivo, Mobile First. Al comenzar con pantallas pequeñas y trabajar a mi manera, reduje la cantidad de código necesario para crear mi diseño receptivo y pude garantizar que no se envíe una imagen grande a dispositivos móviles.

A medida que más desarrolladores y propietarios de sitios requieran que sus sitios respondan, ser capaz de crear temas de WordPress sensibles se convertirá en una habilidad invaluable. En este tutorial, he demostrado que no debe ser un proceso oneroso y que no debería tomar mucho tiempo. Por supuesto, puede continuar el proceso y agregar contenido específico para dispositivos móviles o estilos adicionales dirigidos a dispositivos específicos, ¡pero eso es algo para otro día!

Advertisement
Advertisement
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.