Últimamente me vienen muchos encargos en los que el diseño en móvil y el diseño en web son totalmente diferentes, ya no solo pequeños ajustes sino comportamientos en la forma de mostrar los contenidos.
El responsive me ayudan a colocar cosas pero para optimizar el código no consiste en ocultar ese html para movil y mostrarlo en web para que este optimizado necesito enviar la informacion justa y necesaria. No tiene sentido que estemos optimizando que si el html, la carga de los ficheros y lo mas basico el html no lo estemos cuidando. Me he encontrado proyectos con web que tenian problemas de rendimiento y es que cuando detectaban en el javascript que era un movil reescribian y convertian lo que era un listado en un carousel y cosas asi.
Hace tiempo buscando en google parecía que había encontrado la funcion de WordPress que me iba a dar la solucion, wp_is_mobile() que nos indica si es un dispositivo móvil o no, pero jajaja no funciona correctamente y esta indicada para que no se use en temas, creo que es una de las cosas que deberian mejorar.
Los principales problemas suelen ser los sistemas de cache, ademas que en las pruebas que he realizado en un tema con la funcion wp_is_mobile() solo funcionaba si el usuario estaba registrado.
Por otro lado, también existen variables globales para detectar navegadores y servidores pero no cumplia con lo que necesitaba.
Ejemplo:
- $is_iphone (boolean) iPhone Safari
- $is_chrome (boolean) Google Chrome
- $is_safari (boolean) Safari
- $is_NS4 (boolean) Netscape 4
- $is_opera (boolean) Opera
- $is_macIE (boolean) Mac Internet Explorer
- $is_winIE (boolean) Windows Internet Explorer
- $is_gecko (boolean) FireFox
- $is_lynx (boolean)
- $is_IE (boolean) Internet Explorer
- $is_edge (boolean) Microsoft Edge
Buscando encontré esta otra librería una gran joya que he probado en mas de un proyecto y no se ha quejado nadie aun mobile-detect de serbanghita y de ella parten varios plugins para WordPress.
Ejemplo de como usarla mobile-detect en tus temas
1.- Lo primero que tenemos que hacer es añadir Mobile_Detect.php en nuestra carpeta del tema.
2.- Luego tenemos que incluirla en functions.php podriamos usar:
if ( ! class_exists( 'Mobile_Detect' ) ) {
require get_template_directory() . '/Mobile_Detect.php';
}Ahora ya la tenemos lista para usar.
3.- functions.php // aqui vamos a declarar las funciones para luego usarlas en nuestros templates
$mobble_detect = new Mobile_Detect();
$mobble_detect->setDetectionType( 'extended' );
// funcion para detectar un movil
function es_movil() {
global $mobble_detect;
return $mobble_detect->isMobile();
}
// funcion para detectar una tablet
function es_tablet() {
global $mobble_detect;
return $mobble_detect->isTablet();
}4.- ejemplo de como usarla en el index.php o en cualquier otro sitio
<?php if (es_movil()){
echo "<p> Esto solo se muestra en movil </p>";
} ?>
Existen muchas funciones pero eso podéis verlo en las librerías os pongo las dos de ellas pero la clase $mobble_detect se puede preguntar por dispositivo, versión ,…
Personalmente creo que WordPress debería incluir todo este tipo de funciones. Hace años quizás no era necesario pero hoy en dia es como el responsive algo obligatorio.
