Avec la croissance rapide de utilisateurs de téléphones intelligents, Dans le développement Web, il est devenu de plus en plus important de veiller à ce que les visiteurs qui accèdent à votre site Web via des appareils de poche soient pris en compte de manière appropriée. Ces visiteurs peuvent être ciblés de différentes manières. Dans ce didacticiel, nous allons créer une fonction permettant de détecter de manière native les utilisateurs d'iPhone dans WordPress.
Assurez-vous de coller la fonction avant la fermeture étiquette. Par défaut, les thèmes TwentyEleven et TwentyTen utilisent le
body_class ();
fonction dans le fichier header.php pour ajouter dynamiquement des classes à la norme étiquette.
Par exemple, si vous visualisez une seule page dans WordPress, est un exemple de classe de corps pour une page / publication unique, qui vous permettrait de changer le style de certains éléments de votre conception de manière dynamique en utilisant CSS. Si votre thème n'utilise pas le
body_class ();
tag (même s’il devrait le faire déjà!), incluez-le comme ceci:
>
WordPress contient un certain nombre de variables globales qui peuvent être utilisées pour la détection du navigateur, y compris la $ is_iphone
variable. Nous utiliserons cette variable avec le système de classes de corps dans WordPress. Pour cela, nous devons d’abord écrire une fonction:
Ceci est notre fonction. Tout d’abord, nous attribuons à notre fonction le nom de? Detect_iphone? afin que nous puissions le déchiffrer de nos autres fonctions. Vous remarquerez alors ajouté? Global? à notre $ is_iphone
variable, c'est parce que la variable est définie en dehors de notre fonction. Nous disons ensuite à WordPress que si cette condition est remplie (si l'utilisateur navigue sur le site à partir d'un iPhone), ajouter? Iphone? à notre classe de corps. Allez-y et collez cet extrait de code au-dessus de la fermeture balise dans header.php
Cette fonction nous permet désormais de cibler spécifiquement les utilisateurs d’iPhone à l’aide de CSS, à l’aide de notre nouvel iPhone créé? classe. Par exemple, nous pouvons inclure les éléments suivants dans notre feuille de style pour afficher notre h1
étiqueter différemment les utilisateurs d'iPhone
h1 taille de la police: 30px; hauteur de trait: 110%; texte-décoration: souligné; .iphone h1 taille de la police: 35px; texte-décoration: aucun; couleur: # FF0000;
Il existe un nombre croissant de méthodes pour rendre les sites WordPress conviviaux pour notre public mobile, et j'espère que ce petit conseil vous a aidé à comprendre une autre approche pour aborder les sites compatibles avec les mobiles..
Je vous encourage à discuter de vos propres méthodes préférées pour rendre vos sites WordPress compatibles avec les appareils mobiles dans les commentaires ci-dessous.!