Nella primavera del 2012 è stata rilasciata la versione 3.4 di WordPress. Oltre a introdurre il Theme Customizer e la possibilità di inserire automaticamente i Tweet, la versione 3.4 ha anche aggiunto una funzione che gli sviluppatori possono utilizzare per verificare se un visitatore del sito si sta collegando da un dispositivo mobile come uno smartphone o un tablet.

Questa funzione, wp_is_mobile(), è apparsa in un momento in cui il celebre “Retina Display” che Apple aveva presentato per il suo iPhone 4 era un misero 640 x 960 pixel. Quando l’iPhone 5 arrivò, pochi mesi dopo WordPress 3.4, il display del telefono raggiungeva 640 x 1.136 pixel, ancora molto lontano dai display dei moderni smartphone e tablet, che rendono più sottile il confine tra lo schermo mobile e quello desktop.

Quindi, wp_is_mobile() è ancora utile oggi?

Lo scopo della funzione wp_is_mobile()

Nel 2012, il supporto dei browser per le media queries CSS che consentono il responsive web design era ancora relativamente nuovo. (Davvero nuovo per gli utenti del browser Internet Explorer di Microsoft!) Ma la possibilità di creare layout di pagina che si adattino alle diverse dimensioni del viewport non era l’obiettivo di wp_is_mobile().

La funzione non fa distinzione tra telefoni e tablet e ignora completamente i pixel disponibili nel browser di un visitatore. Invece, wp_is_mobile() è stato concepito come uno strumento che avrebbe permesso agli sviluppatori di ottimizzare la larghezza di banda per rispondere a dispositivi mobili spesso poco potenti e magari nelle mani di utenti che pagano i loro fornitori di telecomunicazioni per i trasferimenti di dati.

Con i telefoni e i tablet di oggi più potenti di molti desktop disponibili nel 2012, la limitazione della larghezza di banda potrebbe essere meno importante, ma ci sono ancora casi d’uso per una funzione che semplicemente divide il mondo in due: dispositivi mobili e tutto il resto.

La funzione wp_is_mobile() in azione

La funzione di WordPress wp_is_mobile() restituisce true quando viene eseguita come risultato di una richiesta da parte dei browser della maggior parte degli smartphone e dei tablet (compreso il Kindle). Quindi, il classico esempio di funzione che genera diversi flussi di contenuti in PHP si presenta così:

<?php if( wp_is_mobile()){ ?>

    <p>This content is for mobile devices</p>

<?php } else { ?>

    <p>This content is for desktops (and laptops).</p>

<?php } ?>

Se avete davvero bisogno di ottimizzare l’output del vostro sito web per i dispositivi mobili (probabilmente per ridurre al minimo i requisiti di larghezza di banda), la tecnica sopra descritta potrebbe essere utilizzata nei file dei temi per produrre strutture completamente diverse per le pagine mobili e per quelle desktop.

Rilevamento del dispositivo per una regolazione granulare dei contenuti

Le media query CSS e le altre tecniche a supporto del responsive web design possono aiutare i layout delle pagine ad adattarsi a un’ampia varietà di dimensioni e orientamenti dello schermo. Ma non possono aiutarvi a comunicare con i visitatori del vostro sito come utenti di dispositivi mobili o desktop.

Ad esempio, sapete che gli utenti desktop probabilmente useranno il mouse per “cliccare” sugli elementi del vostro sito, mentre gli utenti mobile “toccheranno” il display. Gli utenti desktop potrebbero cliccare con il tasto destro del mouse su un link per aprirlo in una nuova finestra del browser. Nel frattempo, gli utenti mobili potrebbero “premere e tenere premuto” per avviare la stessa operazione. Spiegare agli utenti come navigare nel vostro sito web (ad esempio nella documentazione di aiuto) potrebbe portare al rischio di usare la terminologia sbagliata la metà delle volte.

Ecco come possiamo combinare wp_is_mobile() e gli shortcode di WordPress per supportare l’output granulare di contenuti per dispositivi mobili o desktop in un modo che sia anche facile da comandare per gli editor del sito web.

Utilizzeremo il nostro rilevamento mobile/desktop insieme alle funzioni di WordPress add_shortcode() e do_shortocde() per creare strumenti shortcode che gli editor potranno applicare ai post.

Per prima cosa, aggiungeremo questo codice al file functions.php (dopo averlo protetto creando un tema child):

/**
 * Add shortcodes
 */

// Create [desktop] shortcode
add_shortcode('desktop', 'show_desktop_content');
function show_desktop_content($atts, $content = null){
    if( !wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

// Create [mobile] shortcode
add_shortcode('mobile', 'show_mobile_content');
function show_mobile_content($atts, $content = null){
    if( wp_is_mobile() ){
        return do_shortcode( $content );
    } else {
        return null;
    }
}

Questo crea gli shortcode [desktop] e [mobile] (e i relativi tag di chiusura) che possiamo utilizzare in qualsiasi post o pagina come questa:

<h2>Password Help</h2>

To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.

Su un dispositivo mobile, il contenuto qui sopra apparirà così:

Schermata che mostra l'output degli shortcode su un dispositivo mobile, con un riferimento a
Gli utenti di dispositivi mobili vedranno “tap” nell’output qui sopra.

Su tutti gli altri dispositivi, i visitatori vedranno questo:

Schermata che mostra l'output degli shortcode su un dispositivo mobile, con un riferimento a
Gli utenti “Desktop” vedranno “click” nell’output qui sopra.

Questa tecnica rende abbastanza facile fornire contenuti che siano “consapevoli” del modo in cui i visitatori interagiscono con il vostro sito WordPress.

La funzione wp_is_mobile() e il caching di WordPress

Non è necessario aver utilizzato WordPress dal 2012 per sapere che il caching delle pagine è uno dei modi più efficaci per migliorare le prestazioni. Ma il caching di base di WordPress può ostacolare i tentativi di fornire contenuti diversi alle richieste per la stessa pagina.

La cache di WordPress di una singola pagina viene avviata da una richiesta del cliente. Se la prima richiesta proviene da un dispositivo mobile, il contenuto della cache sarà adattato agli utenti mobili se modificato da wp_is_mobile(). Ogni successiva richiesta di quella pagina fornirà contenuti per dispositivi mobili, anche agli utenti desktop, fino a quando la cache non verrà cancellata.

Ecco perché la piattaforma di hosting WordPress gestito di Kinsta supporta cache separate per i contenuti mobile e desktop, a partire dalla cache locale del vostro server web NGINX fino alla Edge Cache di Kinsta nei 260+ PoP Cloudflare di tutto il mondo.

Per abilitare la cache delle pagine per i dispositivi mobili bastano un paio di clic (o di tap!) nella dashboard di MyKinsta:

Schermata che mostra i controlli della cache nella dashboard di MyKinsta. È visibile l'opzione per disabilitare o abilitare la cache mobile.
Controlli della cache per un sito WordPress nella dashboard di MyKinsta.

Riepilogo

L’uso della funzione di WordPress wp_is_mobile() potrà sembrarvi un ritorno al passato, ma gli utilizzi per il suo rilevamento “mobile-or-desktop” possono aiutarvi a creare un’esperienza migliore per tutti i visitatori del vostro sito web.

Non dimenticate che avrete bisogno di cache separate per i diversi contenuti che generate se volete ottenere le migliori prestazioni da questi percorsi per dispositivi mobili e desktop.

Avete un’idea geniale per sfruttare wp_is_mobile()? Fatecelo sapere nei commenti qui sotto.

Steve Bonisteel Kinsta

Steve Bonisteel è un Technical Editor di Kinsta che ha iniziato la sua carriera di scrittore come giornalista della carta stampata, inseguendo ambulanze e camion dei pompieri. Dalla fine degli anni '90 si occupa di tecnologia legata a Internet.