[ad_1]
In het voorjaar van 2012 werd WordPress versie 3.4 uitgebracht. Naast de introductie van de Theme Customizer en de mogelijkheid om Tweets automatisch in te voegen, voegde versie 3.4 ook een functie toe die ontwikkelaars konden gebruiken om te testen of een websitebezoeker verbinding maakte vanaf een mobiel apparaat zoals een smartphone of tablet.
Die functie – wp_is_mobile() – verscheen op een moment dat het bekende “Retina Display” dat Apple had gelanceerd voor de iPhone 4 een magere 640 x 960 pixels had. Toen de iPhone 5 een paar maanden na WordPress 3.4 op de markt kwam, bereikte het beeldscherm van de telefoon 640 x 1.136 pixels – nog steeds ver verwijderd van de beeldschermen van moderne smartphones en tablets, die de grenzen tussen mobiele en desktop beeldschermen vervagen.
Dus, heeft wp_is_mobile() vandaag de dag nog enig nut?
Het doel van de wp_is_mobile() functie
In 2012 was browserondersteuning voor CSS media queries die responsief webdesign mogelijk maken nog relatief nieuw. (Echt nieuw voor gebruikers van Microsofts Internet Explorer browser!) Maar het mogelijk maken van paginalayouts die zich aanpassen aan verschillende viewport-afmetingen was niet het doel van wp_is_mobile().
De functie maakt geen onderscheid tussen telefoons en tablets en is zich totaal niet bewust van de beschikbare pixels in de browser van een bezoeker. In plaats daarvan was wp_is_mobile() bedoeld als een hulpmiddel waarmee ontwikkelaars bandbreedte konden optimaliseren wanneer ze reageerden op mobiele apparaten die vaak te weinig kracht hadden en mogelijk in handen waren van gebruikers die hun telecomproviders betaalden voor gegevensoverdracht.
Nu telefoons en tablets krachtiger zijn dan veel desktops die in 2012 beschikbaar waren, is het beperken van bandbreedte misschien minder belangrijk, maar er zijn nog steeds use cases voor een functie die de wereld eenvoudigweg in tweeën deelt: mobiele apparaten en al het andere.
De wp_is_mobile() functie in actie
De WordPress wp_is_mobile() functie retourneert true wanneer deze wordt uitgevoerd als het resultaat van een verzoek van browsers op de meeste smartphones en tablets (inclusief de Kindle). Het klassieke voorbeeld van de functie die verschillende inhoudsstromen genereert in PHP ziet er dus zo uit:
<?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 } ?>Als je de uitvoer van je website echt moet optimaliseren voor mobiele apparaten (waarschijnlijk om de benodigde bandbreedte te minimaliseren), dan kan de bovenstaande techniek worden gebruikt in themabestanden om geheel verschillende structuren uit te voeren voor mobiele en desktop pagina’s.
Apparaatdetectie voor specifiekere inhoudsaanpassingen
CSS media queries en andere technieken ter ondersteuning van responsive webdesign kunnen paginalayouts helpen om zich aan te passen aan een grote verscheidenheid aan schermformaten en oriëntaties. Maar ze kunnen je niet helpen om te communiceren met de bezoekers van je site als mobiele of desktopgebruikers.
Je weet bijvoorbeeld dat desktopgebruikers waarschijnlijk een muis gebruiken om op elementen van je site te “klikken”, terwijl mobiele gebruikers “tikken”. Desktopgebruikers kunnen “rechtsklikken” op een link om de link in een nieuw browservenster te openen. Mobiele gebruikers kunnen daarentegen “ingedrukt houden” om dezelfde taak te starten. Alleen al het communiceren met gebruikers over hoe ze door je website moeten navigeren (zoals in je helpdocumentatie) kan betekenen dat je de helft van de tijd de verkeerde terminologie gebruikt.
Dit is hoe we wp_is_mobile() en WordPress shortcodes kunnen combineren om gedetailleerdere uitvoer van mobiele of desktop content te ondersteunen op een manier die ook voor websiteredacteuren eenvoudig te bedienen is.
We gebruiken onze mobiele/desktop detectie in combinatie met de WordPress add_shortcode() en do_shortocde() functies om shortcode tools te maken die redacteuren kunnen toepassen in berichten.
Eerst voegen we deze code toe aan het functions.php bestand (nadat we het hebben beschermd door een childthema te maken):
/**
* 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;
}
}Dat creëert de shortcodes [desktop] en [mobile] (en hun afsluitende tags) die we kunnen gebruiken in elke post of pagina-inhoud zoals deze:
<h2>Password Help</h2>
To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.Op een mobiel apparaat zal de bovenstaande inhoud er als volgt uitzien:
Op alle andere apparaten zien bezoekers dit:
Deze techniek maakt het vrij eenvoudig om inhoud te leveren die “bewust” is van hoe bezoekers omgaan met je WordPress site.
De wp_is_mobile() functie en WordPress caching
Je hoeft WordPress niet sinds 2012 te gebruiken om te weten dat paginacaching een van de meest effectieve manieren is om de prestaties te verbeteren. Maar basic WordPress caching kan lastig zijn bij pogingen om verschillende inhoud te leveren bij aanvragen voor dezelfde pagina.
Een WordPress cache van een individuele pagina wordt gestart door een verzoek van een klant. Als dat eerste verzoek afkomstig is van een mobiel apparaat, dan wordt de gecachete inhoud aangepast voor mobiele gebruikers als deze wordt gewijzigd door wp_is_mobile(). En elk volgend verzoek voor die pagina levert mobiele inhoud – zelfs aan desktopgebruikers – totdat de cache wordt gewist.
Daarom ondersteunt Kinsta’s Managed WordPress Hosting platform aparte caches voor mobiele en desktop content – te beginnen met de lokale cache van je NGINX webserver en uit te breiden naar Kinsta’s Edge Cache in 260+ Cloudflare PoP’s over de hele wereld.
Het inschakelen van de caching van pagina’s voor mobiele apparaten wordt bereikt met slechts een paar klikken (of tikken!) in het MyKinsta dashboard:
Samenvatting
De WordPress functie wp_is_mobile() lijkt misschien iets uit het verleden, maar je kunt misschien toepassingen vinden voor de “mobiel-of-desktop” detectie die je kunnen helpen bij het creëren van een betere ervaring voor alle bezoekers van je website.
Vergeet niet dat je aparte caches nodig hebt voor de verschillende content die je genereert als je de beste prestaties wilt halen uit deze mobiele en desktop paden.
Heb jij een goed idee om te profiteren van wp_is_mobile()? Laat het ons weten in een reactie hieronder.
Kinsta
Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.
