Créer son premier thème WordPress pour mobile
146 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

Créer son premier thème WordPress pour mobile

-

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus
146 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Description


Vos premiers sites WordPress mobiles optimisés avec HTML5 et CSS3 pour tous les smartphones




  • Découvrez WordPress et comment ses thèmes fonctionnent ;


  • Comprenez les contraintes d'ergonomie du Web mobile ;


  • Créez les bases d'un thème mobile en tenant compte de la compatibilité avec les navigateurs ;


  • Exploitez les possibilités de HTML5 et CSS3 et maîtrisez la hiérarchie des éléments et balises ;


  • Optimisez les performances et le temps de chargement de vos sites mobiles ;


  • Testez votre site sur iPhone, iPad, Android, Windows Phone, etc. ;


  • Spécialisez votre site mobile pour iOS le système de l'iPhone ;


  • Adaptez le thème d'un site existant pour mobile.



Avec pour étude de cas la réalisation d'un thème mobile (de A à Z) et l'adaptation d'un thème existant.




  • Rappels sur le fonctionnement de WordPress


  • Comprendre le fonctionnement d'un thème


  • Créer les bases du thème


  • Intégration


  • Création d'une CSS pour mobile


  • Optimiser les performances


  • Tester l'affichage du site


  • Les spécificités iOS


  • Cas pratique : adapter facilement un thème existant


Sujets

Informations

Publié par
Date de parution 14 juin 2012
Nombre de lectures 97
EAN13 9782212166231
Langue Français
Poids de l'ouvrage 1 Mo

Informations légales : prix de location à la page 0,0067€. Cette information est donnée uniquement à titre indicatif conformément à la législation en vigueur.

Exrait

Résumé
Vos premiers sites WordPress mobiles optimisés avec HTML5 et CSS3 pour tous les smartphones
→ Découvrez WordPress et comment ses thèmes fonctionnent ;
→ Comprenez les contraintes d’ergonomie du Web mobile ;
→ Créez les bases d’un thème mobile en tenant compte de la compatibilité avec les navigateurs ;
→ Exploitez les possibilités de HTML5 et CSS3 et maîtrisez la hiérarchie des éléments et balises ;
→ Optimisez les performances et le temps de chargement de vos sites mobiles ;
→ Testez votre site sur iPhone, iPad, Android, Windows Phone, etc. ;
→ Spécialisez votre site mobile pour iOS le système de l’iPhone ;
→ Adaptez le thème d’un site existant pour mobile.
Avec pour étude de cas la réalisation d’un thème mobile de A à Z et l’adaptation d’un thème existant.
L’auteur
Thibaut Baillet est titulaire d’un DUT en réseau et télécommunications et diplômé de l’HETIC. Ce jeune développeur conçoit et réalise des interfaces web ou mobiles en HTML5, CSS3 et JavaScript. Il intervient également dans des écoles spécialisées en tant que formateur HTML5 et mobile.
www.editions-eyrolles.com
Thibaut Baillet
Créer son premier thème WordPress pour mobile
ÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.
© Groupe Eyrolles, 2012, ISBN : 978-2-212-13441-4
D ANS LA COLLECTION A CCÈS LIBRE

D ANS LA COLLECTION A B OOK A PART

C HEZ LE MÊME ÉDITEUR
Développement web mobile

Design et marketing Web
Avant-propos
En France, en 2012, on dénombre plus de 18 millions d’internautes mobiles. Ce chiffre est en constante augmentation à travers le monde ; nul doute que l’Internet de demain sera sur mobile.
À travers ce livre, vous apprendrez à créer votre propre site mobile avec le CMS WordPress. En outre, vous saurez prendre en considération tous les principes et problématiques liés au Web mobile. Nous espérons d’ailleurs que lors de la conception d’un site web, vous penserez d’abord à sa version mobile.
Cet ouvrage est en outre l’occasion de promouvoir et de démocratiser l’utilisation de technologies comme HTML5 et CSS3.
Que vous soyez plus intéressé par le mobile ou par WordPress, j’ai fait en sorte que ces domaines soient accessibles à tous, même sans grandes connaissances préalables.
Bonne lecture !
Structure de l’ouvrage
Dans un premier chapitre, nous commençons par rappeler rapidement comment fonctionne WordPress, afin de comprendre l’intérêt d’utiliser ce CMS.
Au chapitre 2 , nous entrons plus en détail dans le fonctionnement des thèmes eux-mêmes : où se trouvent les fichiers, comment ils déterminent l’affichage des contenus, notamment grâce aux boucles, qui sont au cœur du fonctionnement de WordPress.
Le chapitre 3 , après un rappel sur HTML5 et CSS3, explique comment écrire les bases de tout thème WordPress. Ensuite, au chapitre 4 , on voit comment afficher les différents contenus dans notre thème.
C’est au chapitre 5 que nous verrons à quoi doit ressembler une feuille de style CSS adaptée à un support mobile – et suffisamment souple pour tenir compte de la multiplicité des supports.
Enfin, au chapitre 6 , nous verrons comment optimiser les performances du site – une condition sine qua non pour le succès d’un site destiné à des internautes nomades.
Bien entendu, nous parlons, au chapitre 7 , de l’étape indispensable des tests : comment simuler des visites et tester l’affichage.
Le chapitre 8 , quant à lui, traite des spécificités de l’affichage sur terminal iPhone ou iPad, et propose des façons d’intégrer plus étroitement le site au smartphone via iOS.
Enfin, nous vous montrerons, au fil d’une petite étude de cas limpide ( chapitre 9 ), comment adapter un thème existant à une consultation depuis un mobile.

R ESSOURCES Site dédié au livre
Le lecteur souhaitera sans doute une assistance en ligne, nous fournissons une page spéciale dédiée à ce livre. Vous y retrouverez les codes utilisés, des informations complémentaires, ainsi qu’une boîte de dialogue pour échanger avec moi ou laisser votre avis sur le livre.
http://thibaut-baillet.com/livre/

À PROPOS DE L’AUTEUR
Encore étudiant à l’heure où j’écris ces lignes, je me souviens du jour où je suis tombé dans l’univers du Web. En cette année 2007, je devais préparer mon bac électronique. C’est alors que j’ai découvert un site appelé le Site du Zéro ; j’ai passé toutes mes journées sur le tutoriel xHTML et CSS de Mathieu Nebra. Je n’ai jamais eu autant de plaisir à lire et la qualité des explications m’a donné envie de poursuivre dans cette voie. Je me suis donc orienté vers le développement web plus classique, avec des technologies telles que PHP pour m’entraîner, et j’ai ainsi créé mon site :
http://thibaut-baillet.com
Souhaitant continuer mes études pour devenir développeur web, j’ai obtenu un DUT Services et Réseaux de Communication. Ensuite, j’ai rejoint HETIC, la seule école à proposer une formation entièrement tournée vers les métiers d’Internet.
Cette école a été une grande source de motivation pour entreprendre et créer des projets. Passionné par les nouvelles technologies, j’ai orienté mon expertise vers le développement web mobile. Ce marché est en pleine expansion grâce au smart-phone qui concurrence de plus en plus nos ordinateurs. En parallèle, je me suis lancé en free-lance pour arrondir mes fins de mois d’étudiant.
C’est ainsi que pendant deux ans, je me mis à travailler plus de soixante heures par semaine pour continuer mes études, réaliser des projets free-lance et pratiquer le plus possible le Web mobile et HTML5.
Aujourd’hui, la fin de mes études approche. Je me présente en tant que développeur frontend . Ce terme anglais résume très bien ce que je fais : développer des interfaces web ou mobile en utilisant les technologies actuelles telles que HTML5, CSS3 et JavaScript. Je donne également des cours de développement dans d’autres écoles que HETIC.
J’espère que vous trouverez ce livre simple et efficace et que, grâce à lui, quand vous concevrez un site Internet, vous penserez également mobile.
Remerciements
À l’instar de nombreux autres auteurs, je souhaite tout particulièrement remercier ma compagne pour son soutien durant ces soirées à écrire et pour sa relecture.
Je remercie également ma famille qui m’a toujours soutenu dans mes études et dans mes projets personnels.
J’aimerais d’une manière plus générale remercier toutes les personnes que j’ai croisées durant mon parcours, qui m’ont directement ou indirectement orienté et permis d’en être là actuellement. Un grand merci à Barthelemy Ehui N’da, Mathieu Nebra, Sylvain Weber, Jacinthe Busson, Stéphane Dietz, Mathieu Adoutte, Jean-Christophe Beaux, Olivier Chatel, Eloïse Barbarin, Stéphanie Chhim, Pierrick Caen, ainsi qu’à toute l’équipe de TRI-OR, de l’IUT de Sarcelles et de HETIC.
Merci à Geoffroy Monika pour les illustrations.
Un dernier remerciement pour ma maison d’édition Eyrolles et Muriel Shan Sei Fan qui m’ont donné la chance de réaliser ce beau projet.
Table des matières
1. R APPELS SUR LE FONCTIONNEMENT DE W ORD P RESS
WordPress : un CMS à optimiser pour le Web mobile
Fonctionnement de WordPress
Les articles
Les médias : PDF, images, vidéos, sons …
Les liens
Les pages
Les commentaires
Apparence
Extensions
Utilisateurs
Les outils
Réglages
Et bien d’autres …
Plug-ins à installer
2. C OMPRENDRE LE FONCTIONNEMENT D ’ UN THÈME
Convention de nommage
Arborescence des fichiers
Les différents dossiers
Le répertoire CSS
Composition d’une page web
Le fichier header.php
La barre latérale et ses composants
La page d’accueil
Les autres fichiers utiles
Les boucles, moteur essentiel de WordPress
Afficher les articles
Options de réglage des boucles
3. C RÉER LES BASES DU THÈME
Utilisation de HTML5 et CSS3
Les nouvelles balises
Le doctype
L’encodage de caractères
Les balises header et footer
Les balises section et article
La balise nav
La balise video
CSS3
La compatibilité navigateur
Les scripts de compatibilité
Les formats de vidéos
Les CSS propriétaires
Définition du viewport
Utilisation des fichiers de base
Création de l’arborescence
Mise en place des fichiers de base
Mise en place du fichier index.php
Configuration de l’en-tête
Activation du thème
4. I NTÉGRATION
Affichage du contenu
Création du menu
Activation de la gestion de menu
Affichage des menus
Affichage des articles et pagination
Utilisation de la boucle WordPress
Affichage d’informations supplémentaires
Utilisation d’une image miniature (thumbnail)
Performance
La pagination
Affichage d’un article complet et de ses commentaires
Le formulaire de commentaire
Intégration du pied de page
Réaliser une feuille de style CSS
Utiliser un reset CSS
Les bases de notre feuille de style
5. C RÉATION D ’ UNE CSS POUR MOBILE
Les contraintes du Web mobile
La nouveauté des fonctions mobiles
La diversité des appareils
La compatibilité des navigateurs
Une ergonomie adaptée
Mise en place d’une présentation adaptative
Un menu extensible
Organisation des articles
Présentation du contenu
Un bouton « Lire la suite »
Pagination
Des formulaires adaptés
Présentation du pied de page
Optimisation en mode paysage
6. O PTIMISER LES PERFORMANCES
Mesurer la vitesse du site
Page Speed
YSlow
Gestion des tailles d’images
La taille des images
Le poids des images
Outils de compression
Mise en cache
7. T ESTER L’AFFICHAGE DU SITE
Les simulateurs en ligne
Les outils officiels
Le SDK iOS
L’émulateur Android
Opera Mini
8. L ES SPÉCIFICITÉS I OS
Créer son icône de bureau
Faire disparaître la barre d’adresse
Le mode web application
L’écran de démarrage
9. C AS PRATIQUE : ADAPTER FACILEMENT UN THÈME EXISTANT
Utilisation du thème par défaut
Étude de la structure
Adaptation du thème
Utiliser plusieurs thèmes
C ONCLUSION
Ouverture sur le design adaptatif
Le framework jQuery mobile
I NSTALLATION RAPIDE DE W ORD P RESS
R ESSOURCES
Liens francophones
Liens anglophones
Livres
Comptes Twitter
I NDEX

Rappels sur le fonctionnement de WordPress
Avant de commencer à développer pour mobile, il est important de revoir les bases du fonctionnement de WordPress et les spécificités liées au Web mobile.
S OMMAIRE
Introduction à WordPress et au Web mobile
Le fonctionnement de WordPress
Les plug-ins à installer
WordPress : un CMS à optimiser pour le Web mobile
WordPress est un logiciel open source de gestion de contenu ( Content Management System ou CMS). À sa création, il permettait essentiellement de réaliser des blogs, mais aujourd’hui, de nombreux sites l’utilisent comme des sites vitrine, institutionnels ou encore des e-commerces.
L’un des rares inconvénients à son utilisation est la performance. Il peut s’avérer très lent à l’affichage et consommer beaucoup de ressources serveur, ce qui va à l’encontre du Web mobile, basé essentiellement sur des connexions de type 3G dont le débit est nettement inférieur à celui d’un ordinateur connecté en Wi-Fi ou en Ethernet.
Pour pallier ce problème, WordPress possède de nombreux plug-ins améliorant la vitesse de chargement. Ceux-ci vont utiliser des techniques comme la mise en cache du site côté serveur ou encore la compression du code source des fichiers HTML et CSS.

V ERSION WordPress 3.3
Tout au long de ce livre, j’utiliserai la version 3.3 de WordPress. Au moment où vous lirez ces lignes, il est possible qu’une nouvelle version soit sortie ou que l’interface ait légèrement changé. Cependant, tout ce que vous allez voir dans ce livre restera toujours valable.
Fonctionnement de WordPress
WordPress propose un back-office vraiment très agréable pour gérer le contenu de notre site. On peut facilement éditer des articles, des pages, gérer des commentaires ou encore les différentes images et vidéos qui vont être utilisées.
L’élément important est la barre latérale (sidebar) présente à gauche, que je vais rapidement vous présenter.


F IGURE 1–1 Le back-office de WordPress
Les articles
C’est le cœur de votre site et sûrement l’une des raisons qui fait que vous utilisez WordPress aujourd’hui. Vous allez créer du contenu : les articles de votre blog. Sachez qu’avec WordPress, vous pouvez faire bien plus. Il est possible de concevoir vos articles comme des créations que vous afficherez dans un portfolio, ou comme des petites annonces dans le cas d’un site spécialisé, etc.
De base, un article comporte un titre, un contenu, ainsi que des catégories ou des tags que vous pourrez lui rattacher.

Les médias : PDF, images, vidéos, sons …
C’est ici que vous gérez les différentes illustrations de votre site. Vous pouvez charger des images, des vidéos ou encore des fichiers PDF.

R EMARQUE
Rassurez-vous, il n’est pas obligatoire de passer par là pour ajouter une image à un article. Cette fonction est directement disponible lors de la création de votre article.
Les liens
C’est une liste de liens que vous pouvez ajouter et classifier par catégories. Cela vous sera utile si vous souhaitez créer une liste de sites partenaires ou que vous les recommandez. Vous les afficherez facilement dans votre barre latérale avec les widgets disponibles dans WordPress.
Les pages
Leur fonctionnement est similaire à celui des articles. On les utilise pour créer les pages dites statiques de notre site, comme les pages À propos, Contact, Mentions légales , etc. Vous ajouterez ensuite facilement les liens de ces différentes pages dans le menu de votre site.
Les commentaires
Vous pourrez ici gérer tous les commentaires qui ont été ajoutés sur vos articles ou sur vos pages, les approuver ou au contraire les déclarer comme spams.
Apparence
C’est un menu très important où vous choisirez le thème à utiliser sur votre site. C’est également à partir de là que vous ajouterez des widgets si votre thème le permet. WordPress propose de nombreux widgets par défaut, pour afficher des liens, des articles récents ou bien des formulaires de recherche.

Vous pourrez créer autant de menus que votre thème le permet en fonction de vos différentes pages ou catégories d’articles. Certains thèmes, comme celui que nous allons créer, permettent d’insérer un menu principal et un menu secondaire pour le pied de page. Après, vous êtes libre de choisir les liens à afficher dans le menu.
Extensions
L’une des forces de WordPress est de disposer de milliers de plug-ins développés par toute une communauté. Dans ce menu, vous installerez des plug-ins qui créent des formulaires de contact, affichent des boutons de partage sur les réseaux sociaux, etc. Vous pouvez installer directement vos extensions depuis ce menu ou bien aller sur le site officiel de WordPress.
Utilisateurs
WordPress propose un système de gestion d’utilisateurs avec différents rôles. Vous pouvez créer des administrateurs, des éditeurs, des auteurs et des contributeurs ou encore des abonnés. Chacun de ces rôles définit les zones du back-office qui seront accessibles à votre utilisateur.
Les outils
Il existe quelques outils par défaut intéressants, comme la possibilité d’exporter et d’importer le contenu de votre blog. Cela peut être utile pour faire des sauvegardes régulières.
Il est intéressant de noter que WordPress permet d’importer des contenus d’autres services de blog comme Blogger ou encore Tumblr.
Certains plug-ins que vous installerez sont susceptibles d’ajouter des sous-menus dans cette section.
Réglages
C’est un endroit très important de WordPress, que je vous conseille d’inspecter attentivement. On y retrouve de nombreux réglages, comme le titre et la description de notre site, le choix du fuseau horaire, la possibilité de laisser des commentaires, les formats de vos images, etc.
Et bien d’autres …
On voit, sur la capture précédente, deux sections, Contact et Performance . Ces rubriques ont été ajoutées par des plug-ins. Quand vous installez un plug-in, il est donc possible que cela crée un onglet ou un sous-menu dans l’onglet Réglages ou Outils .
Plug-ins à installer
Tout au long de ce livre, trois plug-ins vont être particulièrement utiles :
• W3 Total Cache ;
• Contact form 7 ;
• Mobile Theme Switcher.
Le premier met en place la compression et la mise en cache des fichiers. Le deuxième gère les formulaires de contact.
Quant à Mobile Theme Switcher, il charge un thème spécifiquement adapté si l’internaute utilise un mobile.
Pour installer, par exemple, le plug-in W3 Total Cache :
1 Allez dans l’option Extensions du menu de gauche et cliquez sur Ajouter .
2 Ensuite, tapez W3 Total Cache dans le moteur de recherche de plugins.
3 Une fois le plug-in trouvé, il reste à cliquer sur Installer maintenant . Après l’installation, vous serez invité à activer le plug-in.

R EMARQUE
Nous verrons plus précisément comment configurer W3 Total Cache dans le chapitre 5 .


F IGURE 1–2 Installation du plug-in W3 Total Cache
Il existe bien d’autres plug-ins qui peuvent vous être utiles. En voici quelques-uns :
• WP pagenavi pour la pagination ;
• All in one SEO pour optimiser le référencement naturel ;
• Yoast Breadcrumbs pour créer un fil d’Ariane.

R ESSOURCES Installation et utilisation de WordPress
Si vous souhaitez savoir comment installer et utiliser WordPress, reportez-vous au court tutoriel en annexe de ce livre.

Comprendre le fonctionnement d’un thème
Nous allons décrire la structure d’un thème WordPress et comment les fichiers fonctionnent pour afficher le contenu de votre site.
S OMMAIRE
Conventions de nommage
Arborescence des fichiers
Composition d’une page web
Les boucles WordPress
Convention de nommage
Tout au long de ce livre, nous allons appliquer quelques conventions simples pour mieux nous organiser.

  • Accueil Accueil
  • Univers Univers
  • Ebooks Ebooks
  • Livres audio Livres audio
  • Presse Presse
  • BD BD
  • Documents Documents