Majoriteten av de nya sajter som släpps idag använder en responsiv design som anpassar sig efter bredden på enheterna som den visas på, men ibland vill man veta redan i PHP-stadiet om besökaren använder en dator med mus och tangentbord eller om hen använder en surfplatta eller smartphone. Man kanske har en specifik meny för mobila enheter som inte ska visas för andra besökare, eller så vill man lägga till en klass till sidans body
-tagg när besökaren använder en mobil. Som tur är har WordPress en inbyggd funktion som gör det lätt att göra just det.
Den här guiden är endast för de som har en egen WordPress-installation. Den fungerar inte på webbplatser hos WordPress.com.
Funktionen heter wp_is_mobile()
. Det är en booleansk funktion, vilket innebär att den svarar antingen true
(ja, det är en mobil enhet) eller false
(nej, det är inte en mobil enhet). Du hittar ett enkelt exempel nedan:
<?php if ( wp_is_mobile() ) { // Besökaren använder en mobil enhet } else { // Besökaren använder inte en mobil enhet } ?>
Har man en meny som ska visas på mobila enheter och en som ska visas på stationära/bärbara datorer kan man använda koden ovan till att se till att bara en av menyerna visas åt gången. Samma resultat kan uppnås genom att dölja en meny med CSS, men då laddas ändå HTML-koden för menyn som inte visas ned till användarens enhet.
Vill man lägga till en CSS-klass till body
-taggen (”mobile”, i det här fallet) om användaren har en mobil enhet kan man använda koden nedan.
// Lägg till CSS-klass om besökaren har mobil/surfplatta if ( wp_is_mobile() ) { function add_mobile_class_names_to_body($classes) { $classes[] = 'mobile'; return $classes; } add_filter( 'body_class', 'add_mobile_class_names_to_body' ); }
Det här är mycket användbart om man har innehåll som enbart ska visas när besökaren hovrar över ett element. Arkivsidan för portfolion på min personliga webbplats visas en bild för varje projekt, och när man hovrar över bilden visas projektets titel. Det är en snygg effekt, men då mobila enheter saknar en hover-motsvarighet skulle de inte kunna se varje projekts titel utan att klicka på bilden. Med hjälp av funktionen ovan, och klassen i <body>
-taggen, ordnade jag dock så att titeln visas automatiskt för besökare på mobila enheter. Du kan jämföra nedan:
21 april 2014 kl. 07:02
Snyggt! Du kunde även göra bilderna för iPad versionen något ”transparenta”, dvs lägga in i själva bilden så att man ser en liten förtitt av respektive hemsidas utseende i den svarta bakgrunden.