De vegades ens pot interessar detectar si ens visiten des d’un mòbil o no al nostre WordPress. Veurem una funció que ho detecta, però com tot a programació, té algunes característiques que hem de vigilar.
Si estàs llegint aquest article, segur que el que vols fer és:
Mostrar o no un contingut, depenent de si et visiten des d’un mòbil o no. Si és ordinador, mostrarem un contingut concret, i si és mòbil mostrarem un altre contingut diferent. Un clar exemple seria un tipus de menú, o una imatge optimitzada per PC o una imatge optimitzada per mòbil.
Comencem amb la funció que en ho permet fer:
WP_IS_MOBILE()
Aquesta funció el que fa és analitzar si el $_SERVER[‘HTTP_USER_AGENT’] conté les paraule ANDROID, KINDLE, BLACKBERRY… Veiem com està implementada aquesta funció que WordPress facilita:
function wp_is_mobile() {
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
$is_mobile = false;
} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
$is_mobile = true;
} else {
$is_mobile = false;
}
/**
* Filters whether the request should be treated as coming from a mobile device or not.
*
* @since 4.9.0
*
* @param bool $is_mobile Whether the request is from a mobile device or not.
*/
return apply_filters( 'wp_is_mobile', $is_mobile );
}Si ens posem una mica figaflors… podem veure que qualsevol que domini una mica aquest tema, pot canviar les capçaleres i enviar el que vuilgui cap el nostre WordPress i fer veure que és un mòbil, quan no ho és… Però bé, ens centrarem en els usuaris normals.
El CSS
Normalment jugarem amb els CSS per adaptar el nostre tema als diferents dispositius. Més concretament, treballarem amb el que diem Media Queries.
@media (min-width: 690px) and (orientation: landscape) {
...
}Però també podríem jugar amb la funció que acabem de veure: wp_is_mobile per assignar un classe CSS o una altra:
$classes = "";
<?php
if ( wp_is_mobile() ) {
$classes= "menu-mobile borde-mobile";
} else {
$classes= "menu-desktop borde-desktop";
}
?>
<div class="<?php echo $classes; ?>">
Contingut
</div>O ja, directament posar el contingut segons torni la funció
<?php
if ( wp_is_mobile() ) {
?>
<div id="data-mobile" class="content mobile">...</div>
<?php
} else {
?>
<div id="data-desktop" class="content desktop">...</div>
<?php
}
?>Son diverses maneres d’actuar segons ens visitin amb dispositiu mòbil o no.
Altres opcions
El codi que hem vist, podem treballar-lo a les plantilles/temes, però si no volem tocar temes de programació, sempre podem optar per plugins. Amb el plugin Conditional Display for Mobile , una vegada instal·lat, dintre de les descripcions de les pàgines o entrades, pots fer un condicional per mostrar determinats continguts segons si és mòbil o no. Veiem uns exemples:
[wonderplugin_cond deviceinclude="Mobile"]
Aquest contingut es mostra només a mòbils i tauletes
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude="Mobile"]
Aquest contingut NO es mostra a mòbils i tauletes
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude="iPhone,iPad"]
Aquest contingut es mostra a tots els dispositius, excepte iPhone i iPad.
[/wonderplugin_cond]Instal·lem aquest plugin i ens oblidem d’haver de tocar plantilles i programació.
Tot molt bonic
Doncs no. També té els seus problemes. On podem trobar els problemes? Els més veterans ho deuen haver endevinat ja: a les cachés. Es crea el contingut i es queda a la caché. Per tant, es pot donar que es guardi el d’un dispositiu concret i es mostri on no toca.
Si treballeu amb cachés, igual hauríeu de treballar amb el plugin.
Més informació