Share
Met de snelle groei van gebruikers van smartphones, het is steeds belangrijker geworden in webontwikkeling om ervoor te zorgen dat bezoekers die via handheld-apparaten toegang hebben tot uw website, op de juiste manier worden geholpen. Er zijn een aantal manieren waarop deze bezoekers kunnen worden getarget, en in deze tutorial zullen we onderzoeken of er een functie is gemaakt om iPhone-gebruikers in het echt te detecteren in WordPress.
Zorg ervoor dat je de functie plakt voor het sluiten label. Standaard gebruiken de thema's TwentyEleven en TwentyTen de body_class (); functie in het bestand header.php om klassen dynamisch aan de standaard toe te voegen label.
Bijvoorbeeld als u een enkele pagina in WordPress bekijkt, is een voorbeeld van een bodyklasse voor een enkele pagina / post, waarmee u de stijl van bepaalde elementen van uw ontwerp dynamisch kunt wijzigen met behulp van CSS. Als uw thema geen gebruik maakt van de body_class (); tag (ook al zou het dat eigenlijk al moeten doen!), ga je gang en neem het op, zoals dit:
>
WordPress heeft een aantal globale variabelen die kunnen worden gebruikt voor het detecteren van browsers, inclusief de $ is_iphone variabel. We zullen deze variabele samen met het body class-systeem in WordPress gebruiken. Om dat te doen, moeten we eerst een functie schrijven:
Dit is onze functie. Ten eerste geven we onze functie een naam? Detect_iphone? zodat we het kunnen ontcijferen vanuit onze andere functies. Merk je dan toegevoegd: global? naar onze $ is_iphone variabele, dit komt omdat de variabele buiten onze functie is gedefinieerd. Vervolgens vertellen we WordPress dat als aan deze voorwaarde is voldaan (als de gebruiker de site bekijkt vanaf een iPhone), iphone? voor onze lichaamsklasse. Ga je gang en plak dit codefragment boven het sluiten tag in header.php
Met deze functie kunnen we nu specifiek iPhone-gebruikers targeten met behulp van CSS, door onze nieuw gemaakte? Iphone te gebruiken? klasse. We kunnen bijvoorbeeld het volgende opnemen in ons stylesheet om onze te tonen h1 anders taggen voor iPhone-gebruikers:
h1 font-size: 30px; regelhoogte: 110%; tekstdecoratie: onderstrepen; .iphone h1 font-size: 35px; tekstdecoratie: geen; kleur: # FF0000;
Er zijn een toenemend aantal methoden om WordPress-sites vriendelijk te maken voor ons mobiele publiek en ik hoop dat deze quick-tip u heeft geholpen een andere aanpak te begrijpen bij het aanpakken van mobielvriendelijke sites.
Ik moedig u aan om uw eigen voorkeursmethoden voor het mobielvriendelijk maken van uw WordPress-sites te bespreken in de onderstaande opmerkingen!
Accentsconagua