Se avete un tema di wordpress responsive adatto quindi alla visualizzazione su dispositivi mobile molto bene, ma nel caso vogliate fare ancora meglio una piccola modifica che potreste fare è quello di non visualizzare alcuni elementi del vostro template responsive in modo da velocizzare la navigazione dell’utente.
Sul discorso di come offrire il proprio sito o blog su wordpress o altre piattaforme per i dispositivi mobile che comprendono al giorno d’oggi una varietà enorme di apparecchi come smartphone e tablet android, iPhone, iPad, Windows Phone e tantissimi altri ancora, si potrebbe stare a discutere giorni interni visto che non esiste solo il responsive design.
Nel caso però abbiate scelto di utilizzare un tema responsive sul vostro WordPress potrebbe essere interessante visualizzare solo determinati elementi se un utente accede al vostro sito da cellulare o tablet in modo da rendere il caricamentopiù veloce.
Le soluzioni per non mostrare determinati elementi in caso ci trovassimo davanti ad un dispositivo mobile possono essere due:
- usare un css con rispettivo media screen e display:none;
- utilizzare una funzione php per sapere se ci troviamo davanti a un dispositivo mobile.
In questo caso utilizzeremo il secondo metodo, a mio avviso decisamente migliore visto che non andremo a nascodere una parte del template come la sidebar, ma non andremo caricheremo per niente gli elementi che sceglieremo di non caricare riconoscendo l’User Agent e rendendo così il caricamente delle pagine più veloci.
Come nascondere un elemento del template se ci troviamo davanti ad un dispositivo mobile
Come prima cosa aprite il file function.php del vostro tema wordpress e incollate questa funzione:
function detectdevice()
{
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$arg = "false";
if (stripos($ua,'android') || stripos($ua,'iphone') || stripos($ua,'windows phone os') || stripos($ua,'blackberry') || stripos($ua,'webos') || stripos($ua,'symbian') || stripos($ua,'series60') !== false) {
$arg = "true"; }
return $arg;
} Come potete vedere qui vengono rilevati i vari user agent dove ho escluso l’iPad perchè preferisco che il template venga visualizzato come da computer visto che lo schermo è ancora accettabile.
Ora andiamo nella parte del template dove richiamiamo l’elemento da non visualizzare, ad esempio la sidebar ed incolliamo il seguente codice:
<?php if (detectdevice() == 'false') : ?> <?php get_sidebar(); ?> <?php endif; ?>
In questo modo la vostra sidebar nel caso ci dovessimo trovare davanti ad un device supportato nella lista degli user agent non verrà visualizzata!
Concludo ricordandovi di testare tutte le parti del vostro tema wordpress che andrete a modificare!
