Créer son premier thème WordPress pour mobile

-

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

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 94
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.

Signaler un problème

«

B a i l l e t

T h i b a u t

Créer son premier thème
WordPress

pour
mobile

avec
HTML 5
& CSS3

L’informatique
libre à laportée
detous!

L’auteur
Thibaut Bailletest 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.

Créer son premier thème
WordPress

pour
mobile

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

« DécouvrezWordPress et comment ses
thèmes fonctionnent ;
« Comprenezles contraintes d’ergonomie
du Web mobile ;
« Créezles bases d’un thème mobile
en tenant compte de la compatibilité
avec les navigateurs ;
« Exploitezles possibilités de HTML5 et CSS3
et maîtrisez la hiérarchie des éléments
et balises ;
« Optimisezles performances et le temps
de chargement de vos sites mobiles ;
« Testezvotre site sur iPhone, iPad, Android,
Windows Phone, etc. ;
« Spécialisezvotre site mobile
pour iOS le système de l’iPhone ;
« Adaptezle 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.

Conception : Nord Compo

ISBN : 978-2-212-13441-4
Code éditeur : G13

Créer son premier thème
WordPress

pour
mobile

Dans la collectionaccès libre

Dans la collectiona bookapart

chez le même éDiteur
Développement web mobile

Design et marketing Web

Préface de Chirs Heilmann

DESIGN

K a e ligD E L O U M E A U -P R IG E N T

CSS maintenables
avec Sass/Compass

OUTILS ET BONNES PRATIQUES POUR L’INTÉGRATEUR WEB

ThibautBaillet

Créer son premier thème
WordPress

pour
mobile

avec
HTML 5
& CSS3

É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

Avant-propos

En France, en 2012, on dénombre plus de 18millions 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 !

© Groupe Eyrolles, 2010

CR É E R S O N P R E M I E R T H È M E WO R DPR E S S M O B I L E

Structure de l’ouvrage
Dans unpremier chapitre, nous commençons par rappeler rapidement
comment fonctionne WordPress, afin de comprendre l’intérêt d’utiliser ce
CMS.
Auchapitre 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.
Lechapitre 3, après un rappel sur HTML5 et CSS3, explique comment
écrire les bases de tout thème WordPress. Ensuite, auchapitre 4, on voit
comment afficher les différents contenus dans notre thème.
C’est auchapitre 5que 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, auchapitre 6, nous verrons comment optimiser les performances
du site – une conditionsine qua nonpour le succès d’un site destiné à des
internautes nomades.
Bien entendu, nous parlons, auchapitre 7, de l’étape indispensable des
tests : comment simuler des visites et tester l’affichage.
Lechapitre 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.

VI

RessourcesSite 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.
Bhttp://thibaut-baillet.com/livre/

© Groupe Eyrolles, 2010

Av a n t - p r o p o s

À 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 :
Bhttp://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
smartphone 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éveloppeurfrontend. 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.

© Groupe Eyrolles, 2010

VII

CR É E R S O N P R E M I E R T H È M E WO R DPR E S S M O B I L E

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.

VIII

© Groupe Eyrolles, 2010

Table des matières

1.RAPPELS SUR LE FONCTIONNEMENT DEWORDPRESS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
WordPress : un CMS à optimiser pour le Web mobile • 2
Fonctionnement de WordPress • 2
Les articles • 3
Les médias : PDF, images, vidéos, sons...• 4
Les liens • 4
Les pages • 4
Les commentaires • 4
Apparence • 4
Extensions • 5
Utilisateurs • 5
Les outils • 5
Réglages • 5
Et bien d’autres... • 6
Plug-ins à installer • 6
2.COMPRENDRE LE FONCTIONNEMENT D’UN THÈME9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Convention de nommage • 10
Arborescence des fichiers • 10
Les différents dossiers • 10
Le répertoire CSS • 11
Composition d’une page web • 13
Le fichier header.php • 13
La barre latérale et ses composants • 14
La page d’accueil • 15
Les autres fichiers utiles • 16
Les boucles, moteur essentiel de WordPress • 17
Afficher les articles • 17
Options de réglage des boucles • 18

CR É E R S O N P R E M I E R T H È M E WO R DPR E S S M O B I L E

3.CRÉER LES BASES DU THÈME. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Utilisation de HTML5 et CSS3 • 22
Les nouvelles balises • 23
Le doctype • 25
L’encodage de caractères • 25
Les balises header et footer • 26
Les balises section et article • 27
La balise nav • 27
La balise video • 28
CSS3 • 29
La compatibilité navigateur • 31
Les scripts de compatibilité • 31
Les formats de vidéos • 32
Les CSS propriétaires • 32
Définition du viewport • 33
Utilisation des fichiers de base • 36
Création de l’arborescence • 38
Mise en place des fichiers de base• 38
Mise en place du fichier index.php • 38
Configuration de l’en-tête • 39
Activation du thème • 40
4.INTÉGRATION. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Affichage du contenu • 44
Création du menu • 44
Activation de la gestion de menu • 44
Affichage des menus • 45
Affichage des articles et pagination • 47
Utilisation de la boucle WordPress • 47
Affichage d’informations supplémentaires • 49
Utilisation d’une image miniature (thumbnail) • 50
Performance • 50
La pagination • 52
Affichage d’un article complet et de ses commentaires • 53
Le formulaire de commentaire • 56
Intégration du pied de page • 60
Réaliser une feuille de style CSS • 61
Utiliser un reset CSS • 61
Les bases de notre feuille de style • 65
5.CRÉATION D’UNECSSPOUR MOBILE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Les contraintes du Web mobile • 70

X

© Groupe Eyrolles, 2011

T a b l ed e sm a t i è r e s

La nouveauté des fonctions mobiles • 70
La diversité des appareils • 70
La compatibilité des navigateurs • 71
Une ergonomie adaptée • 71
Mise en place d’une présentation adaptative • 72
Un menu extensible • 72
Organisation des articles • 74
Présentation du contenu • 74
Un bouton « Lire la suite » • 75
Pagination • 76
Des formulaires adaptés • 77
Présentation du pied de page • 80
Optimisation en mode paysage • 82
6.OPTIMISER LES PERFORMANCES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85 .
Mesurer la vitesse du site • 86
Page Speed • 86
YSlow • 87
Gestion des tailles d’images • 88
La taille des images • 88
Le poids des images • 89
Outils de compression • 90
Mise en cache • 92

7.TESTER L’AFFICHAGE DU SITE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 .
Les simulateurs en ligne • 96
Les outils officiels • 96
Le SDK iOS • 96
L’émulateur Android • 97
Opera Mini • 98
8.LES SPÉCIFICITÉS IOS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Créer son icône de bureau • 102
Faire disparaître la barre d’adresse • 103
Le mode web application • 103
L’écran de démarrage • 105

9.CAS PRATIQUE:ADAPTER FACILEMENT UN THÈME EXISTANT . . . . . . . . . . . . . . . . . . . .107
Utilisation du thème par défaut • 108
Étude de la structure • 109
Adaptation du thème • 110
Utiliser plusieurs thèmes • 115

© Groupe Eyrolles, 2011

XI

CR É E R S O N P R E M I E R T H È M E WO R DPR E S S M O B I L E

CONCLUSION117 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ouverture sur le design adaptatif • 118
Le framework jQuery mobile • 119
INSTALLATION RAPIDE DEWORDPRESS .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
RESSOURCES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Liens francophones • 125
Liens anglophones • 126
Livres • 127
Comptes Twitter • 127

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129

XII

© Groupe Eyrolles, 2011