Formas de 4 para mejorar la versión móvil de su tema de WordPress

Artículo escrito por:
  • COXNUMX
  • Actualizado: Jul 29, 2013

Versión móvil de WordPress

Afrontemos la verdad, los dispositivos móviles son cada vez más populares. La navegación de escritorio ya no está creciendo, en realidad está disminuyendo, mientras que el móvil está creciendo rápidamente con todos esos teléfonos inteligentes y mesas increíbles.

Según Net MarketShare, los dispositivos móviles representan el 10% del tráfico web total. Es una gran figura, y es incluso más grande en algunos nichos y países. Pero lo importante aquí es la atención especial que requieren los dispositivos móviles, debido al espacio de pantalla limitado y al hecho de que las conexiones móviles suelen ser más lentas que las conexiones de escritorio.

Una gran cantidad de temas de WordPress son receptivos, pero ya sabes, siempre tendremos espacio para mejoras. Así que aquí veremos las tecnologías 4 y las formas de usarlas para mejorar la experiencia móvil para sus usuarios.

#1 Ol 'tipos de medios

Hace unos años, cuando IE5.5 e IE6 se consideraban vivos, los navegadores móviles estaban empezando a aparecer (y Opera era el mejor por mucho), y la gente comenzó a darse cuenta de que las cosas se estaban rompiendo ya que los teléfonos en ese entonces simplemente no podían Procese cosas simples como CSS (sin mencionar JS, flash, etc.).

Entonces, hacer un sitio móvil completamente separado fue la única opción cuando los tipos de medios vinieron a salvarnos. La idea era simple, podría decirle al navegador si el archivo que está proporcionando son reglas CSS "avanzadas" (para equipos de escritorio) o reglas CSS simples (para dispositivos de mano o impresas). La sintaxis es tan simple como esto:

<link rel = "hoja de estilo" href = "handheld.css" type = "text / css" media = "handheld" />

Esta puede ser una buena opción para crear un diseño completamente diferente para su sitio móvil. Pero no deberías usarlo.

Los tipos de medios pueden sonar bien al principio, pero un problema simple vino con los teléfonos inteligentes modernos: la falta de soporte del navegador. La mayoría de los jugadores principales que estaban por ahí ignoraban este tipo de funcionalidad (como Apple)
Luego vienen las consultas de los medios para salvarnos.

#2 Media Queries y cómo mejorar realmente la experiencia móvil

Esta es, con mucho, la forma más popular de crear una versión móvil de su sitio.

Puede apuntar a ciertos puntos en función del tamaño del navegador, el tamaño de la pantalla del dispositivo, la densidad de píxeles (sí, la retina) e incluso los tipos de medios.

Aquí hay una consulta de medios simple:

@media (max-width: 700px) {body {background: red; }}

Esto es más o menos lo mismo que la programación. IF “El ancho del navegador es 700 o inferior”, ENTONCES "Aplicar el siguiente código CSS".

Tema niño

Vamos a crear una nueva carpeta en tu / temas y llamémosla veinteMóvil. Lo sé, veinte y doce ya usan consultas de medios, pero estamos aquí para aprender, ¿no es así?

Entonces, crea un archivo style.css y agrega este contenido:

/ * Nombre del tema: Plantilla de tema móvil: Twentwelve * / @import url (“../ twentytwelve / style.css”); @media handheld, solo pantalla y (ancho máximo: 767px) {nav ul {display: none;} nav select {display: block}}

Anteriormente, creamos el tema secundario CSS y también agregamos una regla que se dirigirá solo a dispositivos móviles, que ocultará el menú principal y mostrará una selección. Por lo tanto, si tiene un menú en una selección, puede ahorrar mucho espacio en lugar de mostrarlo como elementos ul / li

#3 Cambio de imagen extremo con jQuery Mobile

jQuery mobile es un marco impresionante que utiliza la funcionalidad jQuery para mejorar la experiencia móvil, con widgets optimizados y elementos de interfaz de usuario.

El HTML necesario para que funcione es bastante simple, solo usa los atributos de datos HTML y JS para detectar y crear widgets de UI.

Pero para que jQuery Mobile funcione correctamente en su blog de WordPress, primero deberá llamar al script móvil de jQuery. Volviendo a nuestro tema hijo, duplique el archivo header.php del tema principal y agregue estas líneas en la etiqueta head:

<link rel = "hoja de estilo" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </script>

Debería mencionar que para las propuestas comerciales, debe usar wp_enqueue _script, para evitar duplicar bibliotecas en su sitio.
Ahora podemos jugar con casi cualquier elemento de la interfaz de usuario que desee. jQuery mobile tiene muchos widgets de UI que puedes usar en un tema, pero apliquemos la página y los paneles plegables.
Esta es la sintaxis HTML básica:

<div data-role = "page"> <div data-role = "header"> </div> <div data-role = "content"> </div> <div data-role = "footer"> </ div> </div>

Con este código, creará una nueva "página" y las áreas de encabezado, contenido y pie de página. El encabezado y el pie de página son fijos, y el contenido cambiará en función de la página actual, por lo que puede cargar varias páginas una vez y simplemente ocultarlas asignando diferentes ID.
Este es el HTML básico para paneles plegables:

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" data-collapsed = "true"> <p> Contenido del área colapsable </p> </div> </div>

Es bastante sencillo implementar un bucle allí, ¿no es así? Bueno, tu código se verá así:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible" data-collapsed = "true"> </div> <? ...}?> </div>

El menú de selección revisado

Con el código que hemos visto arriba (en la sección de consultas de medios) puede ocultar su menú habitual y mostrar un menú de selección especial. jQuery te permite agregarlo sin mucho código PHP (para ser sincero, no necesitaremos PHP en absoluto). Vamos a crear un nuevo archivo y agregar este código allí:

jQuery (function ($) {// cuando el DOM está listo $ (document) .ready (function () {// vamos a crear el elemento de selección $ ("<select />").appendTo("nav"); / / Con la nueva opción, vaya a ... $ ("<option />", {"value": "," text ":" Go to ... "}). AppendTo (" nav select ");}); / / Ahora tenemos la selección creada, la rellenamos: $ ("nav .menu a"). Each (function () {// para cada ENLACE que encuentre en el menú var aux = $ (this); $ ("<option /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // añadir un nuevo elemento a la selección)} ; // luego configuramos la función desplegable para redirigir cuando seleccionamos un nuevo elemento $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Hacer esto creará un nuevo menú móvil, PERO el problema es que estamos cargando jquery mobile incluso en la versión "normal" del sitio. Es por eso que podemos usar también algunos complementos para ayudarnos a mejorar nuestro sitio.

#4 - Envolviendo todo con Mobile Detector

Este increíble complemento crea una nueva funcionalidad que nos permite cargar condicionalmente temas dependiendo del dispositivo del usuario. Y funciona con reglas condicionales simples, como esta:

<? php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}?>

El método MobileDTS comprueba el dispositivo actual y luego devuelve un simple verdadero / falso. Luego podemos usar una función mágica llamada switch_theme () para establecer un nuevo tema, y ​​puedes usar condicionales de complementos como MobileDTS :: is_switcher_enabled () para crear un enlace a una versión de escritorio cuando usas el móvil, por ejemplo.

Conclusión

Entonces, ¿alguna vez ha utilizado complementos o funciones móviles en su tema de WordPress? ¿Qué método prefieres? ¡No seas tímido y comparte tus pensamientos!

Artículo de Rochester Oliveira.

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.

Conectarse: