4 Façons d'améliorer la version mobile de votre thème WordPress

Article écrit par:
  • WordPress
  • Mis à jour: Jul 29, 2013

Version mobile WordPress

Faisons face à la vérité, les appareils mobiles deviennent de plus en plus populaires. La navigation sur les ordinateurs de bureau n’augmente plus, elle diminue en fait, alors que les téléphones mobiles se développent rapidement avec tous ces impressionnants téléphones intelligents et tables.

Selon Net MarketShare, les appareils mobiles représentent 10% du trafic Web total. C'est un chiffre important, et il l'est même davantage dans certains créneaux et certains pays. Mais l’important ici est l’attention particulière que requièrent les appareils mobiles, en raison de la taille réduite de l’écran et du fait que les connexions mobiles sont généralement plus lentes que les connexions de bureau.

Beaucoup de thèmes WordPress sont réactifs, mais vous savez, nous aurons toujours de la place pour des améliorations. Nous allons donc voir ici les technologies 4 et les moyens de les utiliser afin d'améliorer l'expérience mobile de vos utilisateurs.

Types de média #1 Ol '

Il y a quelques années, quand IE5.5 et IE6 étaient considérés comme vivants, les navigateurs mobiles commençaient tout juste à sortir (et Opera était de loin le meilleur), et les gens ont commencé à se rendre compte que les choses se cassaient depuis que les téléphones ne pouvaient traiter des choses simples comme CSS (sans parler de JS, flash, etc.).

Donc, faire un site mobile complètement séparé était la seule option lorsque les types de médias sont venus nous sauver. L'idée était simple: vous pouvez indiquer au navigateur si le fichier que vous fournissez est une règle CSS "avancée" (pour les ordinateurs de bureau) ou une règle CSS simple (pour un ordinateur de poche ou une impression). La syntaxe est aussi simple que cela:

<link rel = "stylesheet" href = "handheld.css" type = "text / css" media = "handheld" />

Cela peut être une bonne option pour créer un design complètement différent pour votre site mobile. Mais vous ne devriez pas l'utiliser.

Les types de média peuvent sembler bons au début, mais un problème simple est apparu avec les téléphones intelligents modernes: le manque de prise en charge du navigateur. La plupart des acteurs majeurs ignoraient ce type de fonctionnalité (comme Apple)
Ensuite, les requêtes des médias viennent nous sauver.

#2 Media Queries et comment vraiment améliorer l'expérience mobile

C’est de loin le moyen le plus populaire de créer une version mobile de votre site.

Vous pouvez cibler certains points en fonction de la taille du navigateur, de la taille de l'écran du périphérique, de la densité de pixels (ouais, de la rétine!) Et même des types de supports.

Voici une requête média simple:

@media (max-width: 700px) {body {background: red; }}

C'est à peu près la même chose que la programmation. IF "Largeur du navigateur est 700 ou inférieure", ALORS “Appliquer le code CSS suivant”.

enfant Thème

Créons un nouveau dossier dans votre / themes et appelons-le vingtMobile. Je sais, vingt-douze utilisent déjà les requêtes des médias, mais nous sommes ici pour apprendre, n'est-ce pas?

Alors, créez un fichier style.css et ajoutez ce contenu:

/ * Nom du thème: thème mobile Modèle: vingt-douze * / @import url (“../ vingt-douze / style.css”); @Média, seul l'écran et (largeur max: 767px) {nav ul {display: none;} nav select {display: block}}

Ci-dessus, nous avons créé le thème enfant CSS et nous avons également ajouté une règle qui ciblera uniquement les appareils mobiles, masquera le menu principal et affichera une sélection. Donc, si vous avez un menu dans une sélection, vous pourriez économiser beaucoup d’espace au lieu de l’afficher sous forme d’éléments ul / li

#3 relooking extrême avec jQuery Mobile

jQuery mobile est un framework génial qui utilise la fonctionnalité jQuery pour améliorer l'expérience mobile, avec des widgets et des éléments d'interface utilisateur optimisés.

Le code HTML nécessaire pour que cela fonctionne est assez simple, il utilise simplement les attributs de données HTML et JS pour détecter et créer des widgets d'interface utilisateur.

Mais pour que jQuery Mobile fonctionne correctement dans votre blog WordPress, vous devez d'abord appeler le script jQuery Mobile. Pour revenir à notre thème enfant, dupliquez le fichier header.php du thème principal et ajoutez ces lignes dans la balise head:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

Je devrais mentionner que, pour les propositions commerciales, vous devez utiliser wp_enqueue _script, afin d’éviter la duplication de bibliothèques sur votre site.
Maintenant, nous pouvons jouer avec à peu près n'importe quel élément de l'interface utilisateur que vous voulez. jQuery mobile dispose de nombreux widgets d'interface utilisateur que vous pouvez utiliser dans un thème, mais appliquons la page et les panneaux réductibles.
Voici la syntaxe HTML de base:

<div data-role = "page"> <div data-role = "en-tête"> </ div> <div data-role = "contenu"> </ div> <div data-role = "footer"> </ div> </ div>

Avec ce code, vous créez une nouvelle "page" et les zones d'en-tête, de contenu et de pied de page. L'en-tête et le pied de page sont fixes et le contenu changera en fonction de la page en cours. Vous pouvez donc charger plusieurs pages une seule fois et les masquer simplement en attribuant des identifiants différents.
Voici le code HTML de base pour les panneaux réductibles:

<div data-role = “ensemble pliable”> <div data-role = “ensemble pliable” data-collapsed = “true”> <p> Contenu de la zone réductible </ p> </ div> </ div>

C'est assez simple de mettre en place une boucle, n'est-ce pas? Eh bien, votre code ressemblera à ceci:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible" data-collapsed = "true"> </ div> <? ...}?> </ div>

Le menu de sélection révisé

Avec le code que nous avons vu ci-dessus (dans la section Requêtes avec les médias), vous pouvez masquer votre menu habituel et afficher un menu de sélection spécial. jQuery vous permet de l'ajouter sans trop de code PHP (pour être honnête, nous n'aurons pas besoin de PHP). Créons un nouveau fichier et ajoutons ce code ici:

jQuery (function ($) {// quand le DOM est prêt $ (document) .ready (function () {// créons l'élément select $ ("<select />").appendTo("nav"); / / Avec la nouvelle option, accédez à… $ ("<option />", {"valeur": "", "texte": "Accéder à ..."}). AppendTo ("nav select");}); / / Maintenant que la sélection a été créée, peuplons-la: $ ("nav .menu a"). Each (function () {// pour chaque LINK trouvé dans le menu var aux = $ (this); $ ("<option /> ", {" valeur ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // ajoute un nouvel élément à la sélection)} ; // nous avons ensuite défini la fonctionnalité de liste déroulante pour rediriger lorsque nous sélectionnons un nouvel élément $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Cela créera un nouveau menu mobile, MAIS le problème est que nous chargeons jquery mobile même dans la version «normale» du site. C'est pourquoi nous pouvons également utiliser quelques plugins pour nous aider à améliorer notre site.

#4 - Envelopper tout avec Mobile Detector

Ce plugin génial crée une nouvelle fonctionnalité qui nous permet de charger des thèmes de manière conditionnelle en fonction du périphérique de l'utilisateur. Et cela fonctionne avec de simples règles conditionnelles, comme ceci:

<? php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}?>

La méthode MobileDTS vérifie le périphérique actuel, puis renvoie un simple vrai / faux. Ensuite, nous pouvons utiliser une fonction magique appelée switch_theme () pour définir un nouveau thème, et vous pouvez utiliser des conditions de plug-in telles que MobileDTS :: is_switcher_enabled () pour créer un lien vers une version de bureau lorsque vous utilisez mobile, par exemple.

Conclusion

Alors, avez-vous déjà utilisé des plugins ou des fonctions mobiles dans votre thème WordPress? Quelle méthode préférez-vous? Ne soyez pas timide et partagez vos pensées!

Article de Rochester Oliveira

Je suis un concepteur de sites Web et un entrepreneur de Itajubá (MG), Brésil. J'aime écrire sur des sujets obscurs et faire des trucs sympas.

Soyez connectés: