Vous êtes sur la page 1sur 146

L'informatique

libre à la portée
de tous!
Créer son premier thème

or Press

pourmo 1 e

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
DANS LA COLLECTION AccÈS LIBRE

DANS LA COLLECTION A BooK APART


CHEZ LE MÊME ÉDITEUR
Développement web mobile

__
jBuery
.. .... ,,. .......
Mabile
Relever le défi du
Web mobile
XHTMUCSS .
JavaScrlpt - ..

-----
web mobile
.... .... .,.
Vl
QJ

0
'-
>-
w
N
,......
0
N

~ Design et marketing Web


.c
Ol
'i:
>-
a.
0
W
EB
u
Thibaut Baillet

Créer son premier thème

Vl
Q)

0
'-
>-
w
N
......
0
N
@
.....,
..c
Ol
ï::::
>-
0.
0
u

EYROLLES
ÉDITIONS EYROLLES
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com

Vl
(!)

0
'--
>-
w
N
..--t
0
N
©
.......
..c
O'l
·;::::
~ En application de la loi du 11 mars 1957 , il est interdit de reproduire intégralement ou
u partiellement le présent ouvrage, sur quelque support que ce soit, sans l'autorisation
de !'É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 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 HTMLS 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 con-
naissances préalables.
Vl
Bonne lecture !
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

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 HTMLS 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 (cha-
pitre 9), comment adapter un thème existant à une consultation depuis
Vl
(!) un mobile.
0
..__
w
>-
N
..--t
RESSOURCES Site dédié au livre
0
N Le lecteur souhaitera sans doute une assistance en ligne, nous four-
© nissons une page spéciale dédiée à ce livre. Vous y retrouverez les
.......
..c codes utilisés, des informations complémentaires, ainsi qu'une boîte
O'l
·;::::
>-
0.
de dialogue pour échanger avec moi ou laisser votre avis sur le livre.
0
u ~ http://thibaut-baillet.com/livre/
AVANT·PROPOS

1
À 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 élec-
tronique. C'est alors que j'ai découvert un site appelé le Site du Zéro; j'ai passé tou-
tes 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 HTMLS.
Aujourd'hui, la fin de mes études approche. Je me présente en tant que déve-
loppeur 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 HTMLS,
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.

Vl
(!)

0
'--
w
N
>-
Remerciements
..--t
0
N À l'instar de nombreux autres auteurs, je souhaite tout particulièrement
©
.......
..c
remercier ma compagne pour son soutien durant ces soirées à écrire et
O'l
·;:::: pour sa relecture.
>-
0.

u
0 Je remercie également ma famille qui m'a toujours soutenu dans mes
études et dans mes projets personnels.

VII 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

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.

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u

1 VIII
Table des matières

1. RAPPELS SUR LE FONCTIONNEMENT DE WORDPRESS • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 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ÈME • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 9


Convention de nommage · 10
Vl
(!)
Arborescence des fichiers · 1O
0 Les différents dossiers • 1O
'--
w
>- Le répertoire CSS • 11
N
..--t Composition d'une page web · 13
0
N Le fichier header.p hp • 13
© La barre latérale et ses composants· 14
.......
..c
O'l La page d'accueil · 15
·;::::
>-
0.
Les autres fichiers utiles • 16
0
u Les boucles, moteur essentiel de WordPress · 17
Afficher les articles • 17
Options de réglage des boucles • 18
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

3. CRÉER LES BASES DU TH ÈME •••••••••••••••••••••••••••••••••••••••••••••••• 21


Utilisation de HTMLS 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
vi
(!) Performance • 50
0
..._ La pagination • 52
w
>-
Affichage d 'un article complet et de ses commentaires· 53
N
..-t
0 Le formulaire de commentaire· 56
N
Intégration du pied de page· 60
©
.......
..c
Réaliser une feuille de style CSS · 61
O'l
·;:::: Utiliser un reset CSS · 61
>-
o.
0
Les bases de notre feuille de style· 65
u
S. CRÉATION D'UNE CSS POUR MOBILE ........................................ 69
Les contraintes du Web mobile · 70

lx
TABLE DES MATIÈRES

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

Vl
8. LES SPÉCIFICITÉS IOS 101
(!)

0
Créer son icône de bureau • 102
'--
w
>- Faire disparaître la barre d'adresse· 103
N
..--t
Le mode web application· 103
0
N L'écran de démarrage • 1OS
©
~ 9. CAS PRATIQUE: ADAPTER FACILEMENT UN THÈME EXISTANT •••••••••••••••••••• 107
O'l
·;::::
>- Utilisation du thème par défaut • 108
0.

u
0 Étude de la structure • 109
Adaptation du thème • 11 O
Utiliser plusieurs thèmes • 11 S
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

CONCLUSION • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 117
Ouverture sur le design adaptatif· 118
Le frameworkjQuery mobile· 119
INSTALLATION RAPIDE DE WORDPRESS 121

RESSOURCES • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 125
Liens francophones • 125
Liens anglophones • 126
Livres · 127
Comptes Twitter • 127

INDEX • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 129

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u

1 XII
Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
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.

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l SOMMAIRE
·;::::
>-
0.
0 ~ Introduction à WordPress et au Web mobile
u
~ Le fonctionnement de WordPress
~ Les plug-ins à installer
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

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 ser-
veur, 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.

VERSION 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 ver-
sion soit sortie ou que l'interface ait légèrement changé. Cependant,
tout ce que vous allez voir dans ce livre restera toujours valable.

Vl
Fonctionnement de WordPress
(!)

0
'-- WordPress propose un back-office vraiment très agréable pour gérer le
w
>-
N
contenu de notre site. On peut facilement éditer des articles, des pages,
..--t
0 gérer des commentaires ou encore les différentes images et vidéos qui vont
N
© être utilisées.
.......
..c
O'l
·;::::
L'élément important est la barre latérale (sidebar) présente à gauche, que je
>-
0. vais rapidement vous présenter.
0
u
1 - RAPPELS SUR LE FONCTIONNEMENT DE WORDPRESS

Accueil
Mises à jour ~ Tableau de bord
P' Articles
Fermer
~ Médias

,P Liens Bienvenue dans votre


iO Pages nouveau site WordPress !
ç;> Commentaires 0
l!!J Apparence Si vous avez besoin d'aide pour vous lancer,
$1 Extensions ieter un oeil à notre documentation, " Premiers
<'8 Utilisateurs pas avec WordPress. 81 vous préférez faire le
î~ Outils grand saut directement, voici quelques
[!!] Réglages indications sur ce que la plupart des
Contact utilisateurs font quand ils mettent en place un
Performance nouveau site WordPress. Si vous avez besoin
d'aide, utilisez les onglets d'aide, situés dans
le coin supérieur droit, pour obtenir des

FIGURE 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
Vl
QJ spécialisé, etc.
0

w
'-
>- De base, un article comporte un titre, un contenu, ainsi que des catégories
N
,...... ou des tags que vous pourrez lui rattacher.
0
N
@

.c
Ol
'i:
>-
a.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

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.

REMARQUE

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, Con-
tact, Mentions légales, etc. Vous ajouterez ensuite facilement les liens de ces
différentes pages dans le menu de votre site.

Les commentaires
Vl
(!)
Vous pourrez ici gérer tous les commentaires qui ont été ajoutés sur vos
0
'--
articles ou sur vos pages, les approuver ou au contraire les déclarer comme
>-
w spams.
N
..--t
0
N
©
.......
..c
Apparence
O'l
·;::::
>-
0. C'est un menu très important où vous choisirez le thème à utiliser sur votre
0
u 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.
1 - RAPPELS SUR LE FONCTIONNEMENT DE WORDPRESS

Vous pourrez créer autant de menus que votre thème le permet en fonc-
tion 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 prin-
cipal 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éve-
loppé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
li 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.
Vl
(!)
li est intéressant de noter que WordPress permet d'importer des contenus
0
'--
>- d'autres services de blog comme Blogger ou encore Tumblr.
w
N
..--t Certains plug-ins que vous installerez sont susceptibles d'ajouter des sous-
0
N
menus dans cette section.
©
.......
..c
O'l
·;::::
>-
0.
0
Réglages
u
C'est un endroit très important de WordPress, que je vous conseille d'ins-
pecter attentivement. On y retrouve de nombreux réglages, comme le titre
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

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 Tota l cache dans le moteur de recherche de plug-
vi ms.
(!)

0
'--
3 Une fois le plug-in trouvé, il reste à cliquer sur Installer maintenant.
>-
w Après l'installation, vous serez invité à activer le plug-in.
N
..--t
0
N
© REMARQUE
.......
..c
O'l
Nous verrons plus précisément comment configurer W3 Total
·;::::
>- Cache dans le chapitre 5.
o.
0
u
1 - RAPPELS SUR LE FONCTIONNEMENT DE WORDPRESS

~ Extension en cours d'installation: W3 Total Cache


0.9.2.4
Téléchargement de l'archive d'lnstallation depuis http: //downloads. wordpress. org/plugin/w3-total-
cache .0. 9. 2 .4 . zip ...

Décompression de l'archive de l'extension ...

Installation de l'extension ...

L'extension W3 Total Cache 0.9.2A a bien été installée.

Actlver l'extension 1Retourner à l'installeur d 'extensions

FIGURE 1-2 Installation du plug-in W3 Total Cache

li existe bien d'autres plug-ins qui peuvent vous être utiles. En voici quel-
ques-uns:
· WP pagenavi pour la pagination ;
· Ali in one SEO pour optimiser le référencement naturel;
· Yoast Breadcrumbs pour créer un fil d'Ariane.

RESSOURCESInstallation et utilisation de WordPress


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

Vl
Q)

0
'-
>-
w
N
......
0
N
@
.....,
..c
Ol
ï::::
>-
0.
0
u
0000

Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
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.

Vl
(!)

0
..__
w
>-
N
..--t
0
N
© SOMMAIRE
.......
..c
O'l ~ Conventions de nommage
·;::::
>-
0. ~ Arborescence des fichiers
0
u
~ Composition d'une page web
~ Les boucles WordPress
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Convention de nommage
Tout au long de ce livre, nous allons appliquer quelques conventions sim-
ples pour mieux nous organiser. Cela améliorera la lisibilité du code si vous
travaillez en équipe sur un projet WordPress.
Les noms des fichiers créés doivent être en minuscules. S'ils sont composés
de plusieurs mots, ces derniers doivent être séparés par des tirets, par
exemple n a v- f oot e r. php. Nous écrirons de la même manière les sélec-
teurs utilisés dans les fichiers CSS (par exemple, . s ide b a r-r i ght).
Comme vous venez de le voir, nous emploierons des termes en anglais, qui
est le langage de référence en matière de développement.
Les conventions utilisées dans ce livre ne sont en aucun cas obligatoires;
elles résultent juste des habitudes de programmation en équipe au sein
d 'une entreprise.

UN PEU DE MÉTHODE
La seule chose qu'il faut vraiment éviter est l'incohérence: mélanger
les termes français et anglais, séparer les mots par un tiret une fois sur
deux, etc.

Arborescence des fichiers


Pour concevoir un thème, il faut d'abord créer un dossier dans le répertoire
/wp-content/themes/ n om - du - theme.
Vl
(!)
Nous allons prendre à titre d 'illustration le thème par défaut de Word-
0
'-
Press, nommé twentye l even.
w
>-
N
..--t
0
N
©
Les différents dossiers
.......
..c
O'l
·;::::
Notre dossier t went ye l even est composé de plusieurs sous-dossiers qui
>-
0. structurent notre thème par types de fichiers :
0
u · /images: contient les différentes images utilisées dans le thème ;
• / css: contient uniquement les fichiers de styles du thème ;
2 - COMPRENDRE LE FONCTIONNEMENT D'UN THÈME

· / j s: contient des fichiers JavaScript pour créer des animations et des


interactions.
Notez que certains thèmes avancés contiennent d'autres dossiers assurant
leur traduction ou leur personnalisation vis-à-vis du module d'administra-
tion de WordPress.

Le répertoire CSS
Par défaut, WordPress charge le fichier style. css qui se trouve à la racine
du thème. À partir de ce fichier, il affiche les informations du thème dans le
module d'administration des thèmes. Vous pouvez également ajouter une
image qui servira d'aperçu, en insérant à la racine un fichier nommé
scre e n shot . png.

® Wordpress

[BJ] Gérer les thèmes


Thème actuel

Version mobile 1.0 par Thibaut Balllet

- Thème Wordpress adapté au mobile.

OPTIONS: Widgets 1Menus 1Arrière-plan 1Theme Options

FIGURE 2-1 Aperçu du thème dans l'administration


Vl
Q)

0
Au début du fichier style . css, nous retrouvons donc en commentaire la
'-
w
>- description du thème affichée par WordPress. Cette description est obliga-
N
....... toire pour que WordPress reconnaisse votre thème. Dans l'exemple sui-
0
N vant, seul le numéro de version est optionnel.
@
.....,
..c
Ol
ï::::
>-
0.
0
u

11 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Description du thème

/*
Theme Name: Version mobile
Theme URI: http://thibaut-baillet.com
Description: Thème WordPress adapté au mobile.
Author: Thibaut Baillet
Author URI: http://thibaut-baillet.com
Version: 1.0
*/

ASTUCE Les informations optionnelles


D'autres informations optionnelles peuvent également être ajoutées.
Par exemple, si vous souhaitez créer un thème disponible pour tous,
vous pouvez ajouter une licence de distribution ou bien des tags pour
être trouvé dans le moteur de recherche du site officiel de WordPress.
~ http://goo.gl/LIUBp

Pourquoi y a-t-il un dossier nommé css dans notre thème, alors que le
fichier styl e . css se trouve à la racine de celui-ci? C'est parce que nous
utilisons le fichier styl e . css uniquement pour décrire le thème comme
fait précédemment. Ensuite, nous allons lui demander d'inclure les feuill es
de style présentes dans le dossier css.

Importation du fichier theme.css dans style.css

1@import url ( 1 css/ theme . css 1 ) ;

Vl
(!)
Il peut y avoir un seul fichier t heme . css qui regroupe l'ensemble du code
0
..... CSS pour la présentation du site. Dans certains thèmes, il est toutefois pos-
>-
w sible que vous trouviez plusieurs fichiers, comme ie. css dédié à l'affi-
N
..--t
0 chage du site sous Internet Explorer, ou p rint. css qui est la feuille uti-
N
© lisée pour l'impression. Dans ce cas-là, il suffit d'ajouter une ligne dans le
.......
..c fichier s t y l e . css .
O'l
·;::::
>-
0.
0 Importation du fichier ie.css dans style.css
u
1 @i mport url ( ' css/ie . css ' ) ;
1
2 - COMPRENDRE LE FONCTIONNEMENT D UN THÈME

Composition d'une page web


Un thème est donc composé de feuilles de style CSS, d'images et de plu-
sieurs templates. En particulier, la page d 'accueil d 'un site est généralement
constituée des templates suivants: h ead er . php, s ideb ar . php,
index . p h p ou encore f oot e r . php.

Le fichier header.php
Il contient la partie supérieure de votre site, que l'on verra sur toutes les
pages. Nous y retrouverons donc le titre, la description ou encore un menu
de navigation.

Affichage du titre du site

1 <hl ><?php bloginfo( 1 name 1 } ; ?></ hl >

Affichage de la description

1 <h2><?php bloginfo( 1 description 1 } ; ?></h2>

Nous aurons également les données meta du site, c'est-à-dire le titre et la


description qui apparaîtront d ans les résultats de Google, ainsi que les dif-
férents liens vers les fichiers CSS utilisés.

Utilisation des données meta

<h ead>
Vl
(!)
<tit le><?php bloginfo( 1 name 1 } ; ?> </t i t l e>
0 <me t a name="descrip t ion " cont ent = " <?php
'--
w
>- bloginfo ( 1 description'} ; ?> " / >
N
..--t <link rel= " styleshee t" h ref= "<?php
0
N bloginfo( 1 stylesheet_url 1 } ; ?> " />
© </ h ead>
.......
..c
O'l
·;::::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Fichier final

<html >
<head >
<t i t l e ><? php blog i nf o( 'na me ' ) ; 7></ ti t l e>
<meta n a me = "de sc r i pt ion" conte n t = " <? php
blo ginfo ( 'desc ripti on ' ) ; ? > 11 / >
<lin k r e l = "s tyl esheet" href= " <? php
b l o ginfo( ' styl es h eet_ u rl' ) ; ?> " / >
</ he a d >
<b o d y>
<hl ><? php blogi n fo( ' name' ) ; ?></h l>
<h 2><? php blo ginfo( ' des cript i on ' ) ; 7></ h 2>

La barre latérale et ses composants


Si vous utilisez une barre latérale sur votre site, le code correspondant se
situera dans le fichier sidebar . php.
Vous pouvez bien sûr écrire ce que vous voulez dans cette barre, mais
WordPress propose plusieurs fonctionnalités très simples que vous utili-
serez probablement dans vos thèmes.
Il est ainsi possible de créer facilement un calendrier où retrouver les arti-
cles publiés à une date précise. Il est aussi très simple de créer un système
d'archives pour votre blog.

Affichage du calendrier

Vl
1 < ?php get_ cal endar() ;? >
(!)

w
'--
>- Affichage des archives
N
..--t
0
N
< ?php //Affichage des archives par mois
© wp_ get_ a r c hives( ' type= mont h ly ' ) ;? >
.......
..c
1
O'l
·;::::
>- Vous pouvez également afficher les archives de votre site par année en uti-
0.

u
0
lisant type =yea rly .
1
2 - COMPRENDRE LE FONCTIONNEMENT D UN THÈME

La barre latérale peut contenir bien d'autres informations, comme la liste


des catégories de votre blog, des liens, les articles récents, etc. Nous expli-
querons cela dans la partie sur les boucles WordPress.

ERGONOMIE Pensez mobile


Pour une version mobile, il est fort possible que le fichier
sidebar. php ne soit pas utilisé pour des raisons d'ergonomie et
d'utilité.
W Luke Wroblewski, Mobile first, coll. A Book Apart, Eyrolles
2012

La page d'accueil
Maintenant que nous avons examiné les fichiers header. php et
sidebar. php, voyons comment ils sont utilisés.
La page d'accueil d'un site fait appel par défaut au fichier index. php pré-
sent à la racine du thème.
C'est dans ce fichier que sont appelés header. php et s idebar. php. Vous
y trouverez aussi du code pour afficher vos articles et d'autres appels vers
des templates, comme footer. php ou bien un que vous aurez vous-
même créé.
Pour appeler ces fichiers souvent utilisés dans les thèmes, WordPress met
des fonctions PHP à votre disposition. li suffit pour cela d'écrire get_ suivi
du nom du fichier. Pour l'en-tête, ce sera donc g e t_he ade r ().

Exemple de fichier index.php


Vl
(!)

0 < ?php
'--
>-
w get_header();
N
..--t //Affichage des articles
0
N get side bar ( );
© get_ footer( ) ;
.......
..c
O'l ?>
·;::::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

As1ucE Créer vos propres templates


Vous pouvez créer des templates qui ne sont pas nativement com-
pris par WordPress, par exemple un template de menu ou de recher-
che. Pour les appeler, il faudra utiliser une autre syntaxe:
<?php include(TEMPLATEPATH . ' / menu .php' ) ; ?>

Les autres fichiers utiles


Tout comme le fichier index. php est utilisé par la page d'accueil du
thème, d'autres fichiers de base sont proposés par WordPress pour les
pages courantes.
Une page contenant un article seul avec ses commentaires est située dans
le fichier s i n gle .php. Vous pouvez également employer le template
f o o t e r. php si votre site possède un pied de page.

Dans WordPress, en plus des articles, vous avez la possibilité de créer des
pages plus classiques. Ces dernières utilisent par défaut le fichier p a ge . php,
mais si vous souhaitez attacher un template personnalisé, il faut modifier les
options dans la barre latérale lors de la création de la page.

IEJ Modifier la page Ajouter


Options de l'écran • Alde •

Page exemple Publier

Permallen : http:/~ocalhostlwordpress2/page-d-exemple/ Modifier Voir la page Prévlsuallser les modifications

Ëtat : Publié ~
Envoyer/Insérer O Visuel HTML
Vlslblllté : Public Modifier

[3 Publié le : 13 octobre 2011 il 9 h 47 m in


~
Voici un exemple de page. Elle est différente d'un anicle de blog, en cela qu'elle
restera à la même place, et s'affichera dans le menu de navigation de votre site (en
Vl fonction de votre thème). La plupan des gens commencent par écri.re une page « À Déplacer dans le Corbeille
QJ
Propos " qui les présente aux visiteurs potentiels du site. Vous pourriez y écrire
0 +1@1#.ii.!l!i
'- quelque chose de ce tenant :
>-
w
Bonjour! J e suis un mécanicien qui aspire à devenir un acteur, et
N
,...... Attributs de la page
ceci est mon blog. J'habite à Bordeaux, j'ai un super chien baptisé
0 Russell, et j'aime la vodka-ananas (ainsi que perdre mon temps à
N Pa rent
regarder la pluie tomber).
@ (pas de parent) :

/

..c ...ou bien quelque chose comme ça :
Ol Modèle
·;:: La société 123 Machin Truc a été créée en 1971, et n'a cessé de
>- Modèle par défaut
a. proposer au public des machins-trucs de qualité depuis cette année.
0 Ordre
u Située à Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson, 123
Machin Truc emploie 2 ooo personnes, et fabrique toutes sortes de 0
bidul.:.s suner oour la communauté bou=ntoise.

F1c;uRE 2- 2 Modifier le thème d'une page


1
2 - COMPRENDRE LE FONCTIONNEMENT D UN THÈME

Les boucles, moteur essentiel


de WordPress
Nous allons ici aborder l'une des fonctionnalités les plus importantes de
WordPress. Nous avons analysé pour le moment le fonctionnement des
différentes pages du site. Il reste donc à voir comment afficher les articles
d'un blog dans notre thème.

Afficher les articles


Il faut donc créer une boucle (loop en anglais) sur les articles. Dans cette
dernière, WordPress met à disposition des fonctions simples pour afficher
le titre, the _ti tl e (), le contenu, the _ content () ,ou l'extrait de l'article,
the_exc e rpt () .

Boucle d'articles

<? php if (h ave_ posts())


Il on vérifie s'il y a des articles ?>
<?php while(have_posts()) the_post();
//Début de la boucle ?>
<a rticle >
<h2>
<a href= " <?php the_permalink(} ;?> " ><?php the title(} ;?>
</ a >
</ h 2 >
<P >
Publ i é le <?php the_time(•j F Y'); ?> <br />
Vl
(!)
Par <?php the_author();?>
0
1....
>- </ p >
w
N <?php the_content();?>
..--t
0
N
</art i c l e>
© <?php e ndwhil e; //Fin de la boucle ? >
.......
..c <? php endi f; ? >
O'l
·;::::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Options de réglage des boucles


Plusieurs paramètres sont définis quand vous utilisez une boucle. Par
exemple, vous pouvez choisir d'afficher les articles d'une catégorie précise
ou bien de limiter l'affichage à 5 articles.

Afficher les 5 derniers articles

<?php query_posts('posts_per_page=S');?>
<? php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
< ! -- Affichage des articles -->
<?php endwhile; ?>
<? php endif; ?>

Combiner les paramètres d'affichage

query_posts( array(
' category_name '= > ' even e me nt',
'posts_p er_page ' =>S
)) ;

ASTUCE Des boucles avancées pour inverser l'ordre


chronologique ou restreindre à une période de publication
Il existe d'autres paramètres pour afficher les articles du plus ancien
au plus récent, ou bien ceux publiés durant une date précise, etc.
~ Plus de détails sur: http://goo.gl/oSJk

Vl
(!)

0
..._
w
>-
N
..-t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
l(ZJ OOoO
:1 a

'
1
' ' ' eASE.
~<HEADER~
. ~( SEC\IQ\/ >
!.
-- ·-
~ 0 (A(\\ï CLE)
Vl
QJ
M<NPt'J >
0
1...
>-
w
N
.-i
0
N
@

.s::
Ol
·c
>-
0.
0
u
Créer les bases
du thème

Notre thème mobile étant réalisé


en HTMLS, nous allons d'abord
présenter les nouveautés liées
à ce langage, puis nous créerons
les bases de notre thème.

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;:::: SOMMAIRE
>-
0.
0 ~ Introduction sur la création du thème
u
~ Utilisation des fichiers de base
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Nous commençons l'un des trois chapitres qui vont nous amener à créer
un thème WordPress pour mobile. Avant de nous lancer dans l'intégration
du thème, nous allons aborder des sujets tels que l'utilisation de HTMLS et
CSS3, les problématiques de compatibilité des navigateurs, puis nous crée-
rons la base de notre thème.

Utilisation de HTMLS et CSS3


Le langage HTMLS est le futur standard W3C du langage HTML. Publié en
2009, ce langage est encore en cours de développement, mais i1peut d'ores
et déjà être utilisé en production.
Le but de ce nouveau standard est de structurer et donner du sens à votre
code. Il permet également, couplé avec du JavaScript, de créer des applica-
tions web. C'est notamment le cas d'applications comme Gmail ou Google
Document.
Plus qu'un langage de structuration de données, HTMLS autorise donc de
nouveaux types d'interactions, grâce aux API HTMLS écrites en JavaScript.
Les API sont un ensemble de fonctionnalités accessibles via le navigateur.
Avec HTMLS, plusieurs nouvelles API ont été créées comme:
· une API de dessin via la balise <ca nvas > ;
· une API vidéo et audio via leurs balises respectives ;
· une API permettant de réaliser du drag and drop.

l,..•\•r.s
Vl
Q)

0
'-
>-
w
N
......
0
N
@
.....,
..c
Ol ':>'7
ï::::
>-
0.
0
0 0.
u

FIGURE 3-1 jeu de coloriage avec canvas - http://bit.ly/bPuVbG


3 - CRÉER LES BASES DU THÈME

Les nouvelles balises


Afin de mieux structurer notre code et pour lui donner du sens, de nou-
velles balises sont apparues telles que <header>, <f oote r >, <sect i on>,
<art ic l e>, <nav>, <video>,etc
li est facile de comprendre qu'une balise <art icle> va servir à contenir
un article. Néanmoins, plus qu'une nouvelle norme de codage, cela va
améliorer dans un futur proche votre référencement naturel dans les
moteurs de recherche, en précisant que tel contenu est un article, ou bien
une vidéo.
Pour mieux comprendre cela, comparons une page écrite en HTMLS avec
une page écrite en XHTML, qui est la norme précédente.

Page en HTMLS

<!DOCTYPE HTML>
<html l ang="fr" >
<head>
<meta charset="UTF- 8">
<tit l e>T i tre du site</titl e>
</head>
<body>
<header>
<hgroup>
<hl>Ti t re principal</hl>
<h2>Ti tre seconda i re</ h2>
</hgroup>
<nav>
Vl
<Ul>
(!)
<l i><a h re f ="accue i l. html" >Accue il </a></ l i>
0
'--
>- <l i><a h re f ="apropos. html" >A propos</a></ l i>
w
N <l i><a h ref= "contact. html" >Contact</a></ l i>
..--t
0
N
</ul >
© </nav>
.......
..c </header>
O'l
·;::::
>-
<section>
0.
0 <article>
u
<header>
<h 3>Tit re de l ' art icle</h 3>
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

</header>
<!-- Contenu de l'article -->
</article>
</section>
<footer>
© Copyright thibaut-baillet.com
</footer>
</body>
</html>

Page en XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//


EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<t itle >Titre du s ite </t itle >
</head>
<body>
<div id="header">
<hl >T itre principal</hl>
<h2>Ti tre secondaire</h2>
<ul id="nav">
<li><a href="accueil.html">Accueil</a></li>
<l i ><a hre f="apropos.html" >A propos </a></ li >
<li><a href="contact.html">Contact</a></li>
Vl
(!) </Ul >
0
'--
</div>
>-
w <div id="content">
N
..--t
0
<div class="news">
N
<h3>Titre de l'artic l e</h3>
©
....... <! -- Contenu de l'article -- >
..c
O'l
·;:::: </div>
>-
0. </div>
0
u <div id="footer">
© Copyright thibau t - baillet.com
3 - CRÉER LES BASES DU THÈME

</div>
</body>
</ html >

Comme vous le remarquez, la syntaxe en XHTML est moins bien organisée.


Elle utilise avec abondance des id ou bien des class pour définir les diffé-
rents contenus. On se retrouve donc avec une succession de balises <div>
qui n'a aucun sens ou qui n'est pas clairement définie, contrairement au
HTMLS.
Quelques éléments sont également plus compliqués à écrire en XHTML,
comme la déclaration du doctype ou bien de l'encodage.

Ledoctype
Il déclare la norme de codage qui va être utilisée, comme le HTMLS ou
bien le XHTML. Son écriture a été grandement simplifiée par rapport au
langage précédent.

Doctype HTMLS

1 <! DOCTYPE HTML >

Doctype XHTML

<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1. 0


Tr ans itional // EN" 11 http ://www . w3 . org/TR /xhtmll / DTD /
xht mll - transi t ional. d td" >

Vl
(!)

1
N
L'encodage de caractères
~ Pour chaque fichier, il faut déclarer une norme de codage dans laquelle va
© être écrit votre fichier. À partir de cela, le navigateur web saura quel enco-
~ dage il doit utiliser pour lire votre site Internet. Nous utiliserons dans ce
·~ livre la norme UTF-8 que je vous recommande. Comme pour le doctype,
8 son écriture a été simplifiée en HTMLS.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Déclaration de l'encodage en HTMLS

1<met a charset= "UTF- 8 11 >

Déclaration de l'encodage en XHTML

<me ta http -equi v= "Content - Type" content=" text/html;


charset=utf-8"/>
1

Les balises header et footer


Ces balises sont des conteneurs qui définissent une zone correspondant res-
pectivement à l'en-tête et au pied de page d'un élément. Elles peuvent aussi
bien être utilisées de manière générique pour définir l'en-tête et le pied de
page de votre site, d'une section ou bien d'un article. Vous pouvez les utiliser
autant de fois que vous voulez tant qu'elles gardent leur rôle sémantique.

Exemple d'utilisation

<header>
<!-- Titre du site -->
</ h eader>
<section>
<header>
<!-- Titre de la section-->
</header>
<article>
<header>
<!-- Titre de l'article -->
Vl
(!)
</ header >
0
'--
>- <!-- Contenu de l'article-->
w
N <footer>
..--t
0
N
<!-- Crédit de l'article-->
© </ footer >
.......
..c </article>
O'l
·;:::: </section>
>-
0.
0 <footer>
u
<!-- Copyright, mentions légales, etc. -->
</foo ter >
3 - CRÉER LES BASES DU THÈME

Les balises section et article


Elles servent à définir et à donner du sens à la zone de contenu. La balise
<article > indique simplement qu'elle va contenir un article. La balise
<section>, quant à elle, indique les zones principales de notre site, par
exemple une zone contenant les derniers articles ou bien une barre latérale.

Exemple d'utilisation

<Sec tion id="news " >


<article >
<!-- contenu de l'article 1 -->
</a rticl e>
<article >
<!-- contenu de l'article 2 -->
</article >
< !-- etc. -->
</sec tion >
<sec tion id=" s idebar" >
<!-- contenu de la barre latérale -->
</sec tion >

La balise nav
Elle définit une zone de navigation, qui va contenir une liste de liens consti-
tuant un menu. Nous la retrouvons donc souvent dans l'en-tête du site,
pour la navigation principale. Nous pouvons aussi l'utiliser dans le pied de
page, pour une navigation secondaire affichant des liens tels que Mentions
Vl
(!)
légales, Crédits, Contact, etc.
0
1....

w
>- Exemple d'utilisation
N
..--t
0
N
<naV>
© <U l >
.......
..c
O'l
<li >< a h ref= "lienl.html" >Lien 1 </ a ></ l i>
·;::::
>- <li ><a h re f = "li en2 .html" >Lie n 2</a></ li >
0.
0 <l i><a href = "lien3 .html" >Lien 3</a></ li >
u
</ Ul >
</ nav >
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

La balise video
Comme son nom l'indique, elle affiche des vidéos. Il faut savoir que les lec-
teurs vidéo utilisés aujourd'hui sur Internet fonctionnent pour la plupart
avec Flash, qui est une technologie propriétaire d'Adobe. HTMLS est une
solution ouverte et gratuite qui commence à être de plus en plus utilisée.
De plus, la balise <vi d e o> est compatible avec la plupart des smartphones
de dernière génération, alors qu'A dobe a décidé d'abandonner l'utilisation
de Flash pour les mobiles.
Son principal inconvénient à l'heure actuelle est son incompatibilité avec
les différents navigateurs, tels que Firefox, Chrome, Safari ou Internet
Explorer. Pour la rendre compatible, il va falloir proposer plusieurs formats
de vidéo (OGG, WebM et MP4) qui seront lus sur les différents naviga-
teurs.
• WebM est reconnu par Firefox 4+, Opera 10.6+ et Chrome 6+.
• OGG est reconnu par Firefox 3.5+, Opera 10.S+ et Chrome 4+.
· MP4 est reconnu par Internet Explorer 9+ et Safari 5+.

Exemple d'utilisation

<vi deo pre l oad= "none " contro l s>


<source src= "v i deo/video.ogv" type= "v i deo/ogg " />
<Source src= "video/video . webm" t ype= "video/webm " />
<sour ce src= "v i deo/video . mp4" type= "v i deo/mp4" />
</video>

L'attribut cont r o l s active le menu de lecture présent dans chaque navi-


Vl
gateur. Il diffère graphiquement selon les navigateurs. Si vous ne souhaitez
(!)

0
pas l'utiliser, il vous faudra développer vous-même un lecteur vidéo avec le
'--
w
>- langage JavaScript.
N
..--t
0
Vous pouvez empêcher les vidéos de se charger automatiquement sur
N
© votre page en ajoutant l'attribut preload= "none ".
.......
..c
O'l
·;::::
>-
0.
0
u
3 - CRÉER LES BASES DU THÈME

FIGURE 3-2 Lecteur vidéo sous Chrome

CSS3
Avec tout ce potentiel créatif et interactif, il ne reste plus qu'à concevoir de
nouvelles interfaces grâce aux feuill es de style CSS3. Cette nouvelle version
offre encore plus de possibilités pour réaliser vos présentations sans utiliser
d'images (dégradés de couleurs, ombres portées, angles arrondis) et créer
des animations.

Angles arrondis

Vl
QJ
hl {
0 border-radi us l Opx ;
'-
w
>- }
N
,......
0
N Ombre portée sur du texte
@

.c
Ol
'i:
p{
>- text-shadow: 4px 4px 2px rgba(255, 0 , 0 , 0.5);
a.
0
u }
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Dans ce dernier code, les deux premiers chiffres inscrits définissent la direc-
tion de l'ombre. Ici, elle est décalée de 4 px sur la droite, puis de 4 px vers le
bas. Le troisième chiffre correspond au réglage du flou de cette ombre.
Pour la couleur de l'ombre, nous utilisons la notation en RGBA, qui com-
bine le système de couleurs RVB avec la couche alpha (opacité). Les trois
premiers chiffres définissent, sur une échelle allant de 0 à 255, la quantité
de rouge, de vert et de bleu. Le quatrième chiffre correspond à l'opacité de
notre ombre. À zéro, celle-ci est invisible et à 1 elle est opaque. Nous la
mettons à 0.5 pour avoir une transparence qui nous convient.

Ombre portée sur un conteneur

art ic le {
b ox -sh a d ow: 2p x 2px 4px #00 0;
}

Le principe est le même que pour la propriété text- s h adow. La seule dif-
férence est que nous utilisons la notation hexadécimale pour définir la
couleur noire.

Dégradé de rouge vers du noir

header{
backgr ound : - webkit - gradien t ( l inear, l e f t top,
lef t bott om , fr om (#FOO) , t o(#OOO)) ;
}

Vl
(!)

0
'--
w
>-
N
..--t
SHADOW
0
N
©
.......
..c
O'l
·;::::
>-
0.
8 FIGURE 3-3 Ombre et dégradé en CSS3
3 - CRÉER LES BASES DU THÈME

ASTUCE Générateurs CSS3


Il existe de nombreux générateurs CSS3 sur Internet, comme
css3generator.com, qui vous permettent de créer rapidement des
ombres, dégradés, etc.

La compatibilité navigateur
La question que se posent de nombreuses personnes aujourd'hui et qui les
empêche d'utiliser HTMLS couramment dans leur site est la probléma-
tique de compatibilité navigateur. En effet, les anciennes versions des navi-
gateurs, les plus utilisées, et particulièrement les versions d'Internet
Explorer 6, 7 et 8 ne connaissent tout simplement pas le HTMLS. Elles ne
sont pas capables d'interpréter des balises telles que <h ead e r >,
<sec ti o n >, etc.

Les scripts de compatibilité


li existe pourtant une solution très simple pour remédier à ce problème. Il
suffit d'insérer dans son site un script nommé htmlSshi v .
Pour cela ajoutez la ligne suivante dans la balise <head> de votre site :

<Scri pt src= " h t tp : / /ht ml5shi v . googlecode. corn/ svn/


trunk/ h tml 5 .j s " ></script>
1
Ce petit script aide les anciens navigateurs à prendre en compte les nou-
Vl
velles balises HTMLS.
(!)

0
'--
Ceci marche si vous réalisez vos intégrations de site en HTMLS. Cependant,
>-
w les API HTMLS, dont nous avons parlé en début de chapitre, ne fonction-
N
..--t
0 nent pas encore sur tous les navigateurs. li n'y a pas de solution magique
N
© pour faire fonctionner ces API. En revanche, il y a un script très connu
.......
..c nommé Modernizr. Ce dernier détecte si l'API fonctionne sur le naviga-
O'l
·;::::
>- teur utilisé et, le cas échéant, vous donne la possibilité d'utiliser une alter-
0.

u
0 native. Vous pouvez le télécharger sur modernizr.com et ensuite, comme
pour html 5sh i v , il vous suffit d'appeler ce script dans votre site pour qu'il
soit fonctionnel.

31 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

ASTUCE Kit de démarrage


Il existe de nombreux templates de base pour développer en
HTMLS tout en restant compatible avec le plus grand nom-
bre de navigateurs. Le plus connu et le plus performant est
Boi l e rpl ate développé par Paul Irish, que j'utilise sur la
plupart de mes sites: http://htmlSboilerplate.com.

Les formats de vidéos


Si vous utilisez la balise <video> dans votre site, il est important que vous
ayez plusieurs formats des vidéos pour rendre ces dernières compatibles
avec tous les navigateurs. li faut donc définir plusieurs sources de vidéos.
Cependant, comme vous l'avez vu précédemment, les vieux navigateurs ne
reconnaissent pas ces nouveaux formats. Vous pouvez donc faire appel au
classique lecteur Flash.

Ajout d'un lecteur vidéo Flash

<vi deo pre l oad= "none " contro l s>


<source src= "video/video.ogv" type= "v i deo/ogg " />
<Source src= "video/video . webm" t ype= "video/webm " />
<source src= "v i deo/video . mp 4" type= "v i deo/mp 4" />
<object type="application/x-shockwave - flash" width="400"
height="222" data="http://www.youtube.com/v/HVMoJqg41Bw">
<param name="movie" value="http://www.youtube.com/v/
HVMoJqg41Bw" />
<param name="wmode" value="transparent" />
Vl Vous n'avez pas de navigateur moderne, ni Flash
(!)

0
installé ...
'--
w
>- </object>
N
..--t
</video>
0
N
©
.......
..c
O'l
·;::::
>-
Les CSS propriétaires
0.
0
u Nous avons précédemment vu les nouvelles propriétés CSS3 permettant
de réaliser des angles arrondis ou encore des ombres. En fait, ces propriétés
ne sont pas compatibles avec tous les navigateurs.
3 - CRÉER LES BASES DU THÈME

En attendant que la norme CSS3 soit complètement finalisée, chaque


moteur de recherche a défini des règles CSS qui lui sont propres. On les
identifie grâce à un préfixe ajouté au nom de la propriété CSS3.

Border radius compatible

hl{
Il Propriété CSS3
border - radius: lüpx;
Il Propriété utilisée par Mozilla
-moz - border-radius: lüpx;
Il Propriété utilisée par webkit
-webkit - borde r-radius: lüpx;
}

La propriété -moz-border-radius sera utilisée sur les navigateurs


Mozilla Firefox. L'écriture - webkit - border - radius sera utilisée par les
navigateurs comme Chrome ou Safari, qui ont pour moteur de rendu
Web Kit.
Ce système est utilisé pour la plupart des nouvelles propriétés CSS3. On
retrouvera donc par exemple -webkit-box-shadow pour réaliser des
ombres portées.

ASTUCE -prefix-free
Pour ne pas alourdir le code avec les préfixes, il suffit d'écrire
la propriété simple en CSS3 et d'utiliser -p r ef ix-free, un
script développé par Lea Verou qui ajoute les préfixes en
Vl
(!)
fonction du navigateur de l'internaute : http://goo.gl/R707J.
0
'--
w
>-
N
..--t
0
N
©
.......
Définition du viewport
..c
O'l
·;::::
>-
Le viewport est une fonctionnalité propre au smartphone qui a été
0.

u
0 inventée par Apple avec le lancement du premier iPhone. Elle détermine
une largeur subjective qui va être utilisée pour afficher un site Internet. Elle
est différente de la largeur réelle de l'écran du smartphone.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Le navigateur Safari utilisé sous iOS a un viewport de 980 px. Le navigateur


par défaut d'Android a, quant à lui, un viewport de 800 px. Il continue de
varier sur les autres systèmes d'exploitation mobiles ou sur les autres navi-
gateurs tels qu'Opéra mobile.
Si vous utilisez un iPhone 4S, ce dernier va donc essayer d'afficher un site
Internet avec une largeur de 980 px. Or, la largeur native (surface réelle de
l'écran) est de 640 px. Le viewport étant supérieur à la largeur réelle de
l'écran, le site web se redimensionne proportionnellement à l'écran.

,......... . ...--..--·------
..---------
wi.
li .._. ___ _
•~-·---
---·-
,
- ..._______-
·-·------·--
-~----·---·· -----
---=-:.:::=--
.....
~-­

:-:===-
=--·~-----

Vl
QJ

0 FIGURE 3-4 Affichage sur un écran de bureau et sur un iPhone 45


'-
>-
w
N
,......
0
Avec le viewport par défaut, le site est illisible et n'est pas adapté à l'écran.
N
@ L'utilisateur sera donc forcé de zoomer et de se déplacer dans tous les sens

.c pour voir le contenu qu'il recherche.
Ol
'i:
>-
a. Il existe une balise < meta > à insérer dans la balise < head >, qui modifie la
0
u valeur du viewport de l'appareil. Dans le cas de l'iPhone 4S, nous allons la
définir à 640 px pour qu'elle soit identique à la largeur réelle de l'écran.
3 - CRÉER LES BASES DU THÈME

Viewport à 640 px

1<met a name= 11 v i ewport 11 conten t = 11 wi d th= 6 4 0 11 >

Maintenant, vous pouvez voir que le site s'adapte parfaitement à notre


mobile et que son utilisation en est simplifiée.

Cuisine kawaï, le livre

Sans viewport Avec viewport

FIGURE 3-5 Cuisinekawaijr avec et sans viewport


Vl
QJ

0
'-
>- Nous sommes à présent confrontés à un nouveau problème. Les smart-
w
N
,......
phones n'ont pas la même taille d'écran. Les téléphones Android, Black-
0
N Berry, etc. ont des largeurs réelles allant de 240 px à 640 px (depuis l'écri-
@

ture de ce livre, les largeurs ont encore dû augmenter et je ne prends pas en
.c
Ol compte les tablettes tactiles).
'i:
>-
a. Il faut donc que le viewport s'adapte à chaque largeur réelle pour avoir un
0
u
affichage optimisé sur tous les mobiles. Pour cela, il existe une propriété
qui récupère la largeur réelle de l'écran.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Réglage automatique du viewport

1 <met a name= 11 viewport 11 content= 11 width=dev ice -width 11 >

La valeur de device-width permet donc d'adapter le viewport pour les


différents mobiles.

Utilisation des fichiers de base


Les thèmes WordPress reposent sur une hiérarchie bien définie de tem-
plates. Chaque template a un rôle bien précis au sein du thème et si l'un
n'existe pas, il y en a toujours un autre pour le remplacer.
Nous retrouvons le template principal de notre site qui est le fichier
index . php, utilisé pour la page d'accueil. Le fichier h eader. php, lui, con-
tiendra les informations de notre site, l'appel aux différents fichiers CSS et
JavaScript, le viewport, etc. Il restera ensuite le fichier footer. php, où nous
trouverons les mentions légales et un menu secondaire (voir figure 3-6).

Vl
(!)

0
1....

w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
3 - CRÉER LES BASES DU THÈME

Error 404
Page

Search
Result Page

Category
Archive

Tag Archive

Archive
Page

Date Archive

Cust om Post-
Type Archive

Attachment
Post

Single Post
Page
Cus tom Post

Blog Pos t
Singular
Page

'
Vl
Satie Page page.php
QJ

0
'-
>-
w Page
N Site Front Shcmn On Front
,...... Page
Posts
0
N
@ Blog Posts
.µ Index Page
.c
Ol
'i:
>-
a. Comments
0 Popup Page
u

FIGURE 3-6 Hiérarchie des templates. Retrouvez cette figure sur le site de l'ouvrage
(www.editions-eyrolles.com).
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Création de l'arborescence
La première chose à faire est de créer le dossier qui contient notre thème.
Pour cela, à partir du dossier contenant votre site WordPress, allez dans le
dossier /wp-content/ themes/ et créez un dossier au nom de votre
thème. Pour ma part, je vais tout simplement l'appeler version - mobile.
Dans ce dossier, créez les fichiers index . php, h e ade r. php, f oo t er . php,
s i ng l e. php et styl e . css, ainsi qu'un dossier images.
Vous devez donc avoir un dossier organisé comme ceci :

~ Images
~ foorer.php
...J header.php
~ index.php
~ single.php
~ style.CSS

FIGURE 3-7 Arborescence du thèm e

Mise en place des fichiers de base


Nous avons découpé les fichiers de sorte qu'on puisse les réutiliser. Notre
fichier header. php sera appelé aussi bien dans index . php que dans
s i ngl e . p h p. Pour l'insérer dans chaque fichier, il faut utiliser la méthode
PHP g e t _ h e ade r (). Pour le pied de page, il suffira d'écrire g e t _ f oo t e r ( ) .
Ces méthodes sont propres à WordPress, dans le cas de l'utilisation de
fichiers header. php et f oot er . p h p . Si vous créez votre propre fichier,
Vl
Q)
par exemple, mo n _ fic hi e r. php, vous ne pourrez pas l'inclure dans
0
'-
>- i nde x . php avec une méthode g e t_mon_ f ich ie r ( ),car cela n'existe pas.
w
N
......
Il faudra utiliser la méthode get_ t e mplate_part ( 'mo n_f i c hi er ' ) .
0
N
@
.....,
..c
Ol
Mise en place du fichier index.php
ï::::
>- Nous pouvons donc commencer à créer le template principal de notre site.
0.
0
u Nous appellerons le fichier h e ade r . p h p , ensuite nous listerons les derniers
articles, puis nous fermerons la page avec f ooter . php.
3 - CRÉER LES BASES DU THÈME

Fichier index.php

<? p h p ge t_header() ; ?>


<sec ti on>
<!-- Derniers articles -->
</sec ti o n >
<?php g e t_foo t er(); ?>

Configuration de l'en-tête
Nous allons ici écrire les différentes balises <meta> de notre site, comme
l'encodage UTF-8 et le viewport. Nous appellerons notre fichier CSS, ainsi
que le script html 5shi v pour la compatibilité avec Internet Explorer. Puis,
nous afficherons le titre de notre site.

Fichier header.php

< !DOCTYPE HTML>


<html lang = " fr " >
<head>
<me t a charset=" UTF-8 " >
<t i t l e><?ph p b l og i n f o( ' name ' ) ;? >< /tit l e>
<meta name= 11 viewport 11 content= 11 width=device-width 11 >
<li nk r e l = " styl esheet " href="<?php bloginfo (
'stylesheet_ url' ); ?> 11 />
<script src= 11 http://htmlSshiv.googlecode.com/svn/trunk/
htmlS.js"></script>
</ h ead>
<b o d y>
Vl
(!)
<heade r >
0 <hl><a href = " <?php echo bloginfo( ' url ' ) ; ? > " >< ?php
'--
w
>- b l og info( ' name ' ) ;?></a></h l >
N
..--t
</ h eade r>
0
N
© Comme vous pouvez le voir, nous avons utilisé une fonction de WordPress
.......
..c
O'l
·;:::: très pratique, blogin fo () . Grâce à elle, nous pouvons obtenir de nom-
>-
0.
0
breuses informations comme le titre du site qui a été défini lors de l'instal-
u lation, ainsi que le fichier CSS de base. Par défaut, WordPress utilise le nom
de fichier styl e. css.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

ASTUCE Propriété de bloginfo{)


Vous pouvez retrouver l'ensemble des paramètres de bloginf o ()
sur http://goo.gl/F44Hz.

Nous allons rapidement écrire notre fichier f ooter. php (vide) pour avoir
une page complète.

Fichier footer.php

</body>
</ html >
1
Maintenant, nous avons donc réalisé un thème fonctionnel, qui affiche
uniquement le titre du site. Avant d'aller plus loin dans le chapitre suivant,
nous allons activer le thème que nous venons de créer.

Activation du thème
Avant toute chose, nous allons écrire les informations relatives à notre
thème dans des commentaires au début de notre fichier styl e . css.

Informations du thème

/*
Theme Name: Version mobile
Author: Thibaut Baillet
Author URI: http://thibaut-baillet.com
Description: Version mobile réalisée dans le cadre
des chapitres 3, 4 et 5
Vl
(!) Version: 1
0
'--
>-
*/
w
N
..--t
0
N
Il faut se rendre dans la rubrique Apparence puis Thème et cliquer sur le lien
© Activer.
.......
..c
O'l
·;:::: Votre site doit maintenant ressembler à ceci:
>-
0.
0
u
3 - CRÉER LES BASES DU THÈME

,carrier 9 11 :24 AM
Uvre Eyrolles
·-~~~-
localhosVeyrolles/

Livre Eyrolles
f1c;uRE 3-8 Aperçu du site

INFORMATION Le fichier style.CSS


De base, WordPress utilise le nom style . css, donc si vous avez
nommé votre fichier autrement, il est fort possible que votre thème
n'apparaisse pas dans la liste des thèmes.

Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u

41 1
Vl
QJ

e>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Intégration

Nous allons maintenant commencer


à afficher du contenu sur le site
et à le mettre en forme à l'aide
de feuilles de style CSS.

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;:::: SOMMAIRE
>-
0.
0 ~ Affichage du contenu
u
~ Réaliser une feuille de style CSS
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Affichage du contenu
Maintenant que nous avons un thème fonctionnel et activé, il est temps
d'afficher le contenu de notre site.

Création du menu
Nous voulons deux menus de navigation : un principal dans l'en-tête, avec
les liens des différentes rubriques de notre site, et un secondaire dans le
pied de page.

Activation de la gestion de menu


Pour gérer cela, nous voulons utiliser directement l'administration de
WordPress. Cependant, la gestion des menus n'est pas activée par défaut.
Pour ce faire, nous allons créer à la racine de notre thème un fichier
function . p h p, à partir duquel nous pourrons activer différentes fonc-
tionnalités de WordPress.

Création de function.php

<?php
add_theme_su pport ( ' menus ' );
1
Maintenant, si vous rafraîchissez la page d'administration de WordPress, vous
remarquerez que l'onglet Menus est apparu dans la rubrique Apparence.
Nous pouvons déjà créer un menu qui s'affichera comme notre menu
Vl
(!) principal. Pourtant, ce que nous voulons, c'est définir deux emplacements
0
'-- précis de menu pour notre thème. Pour cela, nous utiliserons, dans le
w
>-
N
fichier funct i on . php, la fonction register_ nav_ menus (). Nous allons
..--t
0 créer un emplacement pour l'en-tête et le pied de page.
N
©
.......
..c Création des emplacements du thème
O'l
·;::::
>-
0.
0
f unc ti on reg i s t er_my_menus() {
u register_nav_menus (
array (
4 - INTÉGRATION

' header menu ' = > 'Header' ),


' footer menu ' => 'Foote r' )

) ;
}
add action{ 1
init 1 , 1
register_my_menus 1 );

Grâce à add_action, la fonction register_my_menus () est appelée à


l'initialisation du site. Vous pouvez utiliser cette fonction comme bon vous
semble. Elle va appeler une seconde fonction, register_nav_menus (),
qui est propre à Worpdress. Nous définissons ici les différents menus à créer.
Nous avons donc deux menus nommés Header et Footer qui ont respec-
tivement pour identifiants 'head e r_menu' et 'footer_menu ' .
C'est à partir de l'identifiant que nous afficherons ensuite le menu dans
l'en-tête et le pied de page.

Affichage des menus


Maintenant, un nouvel encart est apparu dans la rubrique Apparence>
Menus. Il s'agit des emplacements que nous venons de créer.

Emplacements du thème

Votre thème peut utiliser 2 menus. Sélectionnez


le menu que vous voudriez utiliser pour chaque
emplacement.

En-t~te

Vl
..•
QJ

w
0
'--
>-
Pied de page
...
N
,......
0
N
@

_c:
Ol
'i: FIGURE 4-1 Emplacement des menus
>-
a.
0
u
Vous pouvez maintenant créer les deux menus. N'oubliez pas de leur
affecter un emplacement.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Le menu nommé Header a pour liens:


· la page d'accueil;
· la page À propos ;
· la page Contact.
et le menu Footer renvoie à:
· la page Mentions légales ;
· la page Contact.
j'ai préalablement créé des pages simples grâce au système propre à Word-
Press.
Il ne nous reste plus qu'à afficher nos menus dans le site grâce à la fonction
wp_ nav_me nu ().

Affichage du menu principal dans header.php

<?php
wp_nav_menu ( array(
' theme location' => ' header menu ' ) )

Livre Eyrolles
• Accueil
• A propos
• Contact

FIGURE 4-2 Affichage du menu principal


Vl
Q)

0
'-
>-
Notre menu s'affiche correctement. En revanche, en inspectant le code
w
N source qui a été créé, un petit détail me chagrine : c'est une balise <div>
......
0
N
qui contient notre liste de liens. Étant en HTMLS, il serait plus judicieux
@
.....,
d'utiliser une balise <nav >.
..c
Ol
ï:::: Un paramètre de la fonction wp_ nav_ menu ( ) permet de changer la balise
>-
0.
0
conteneur, utilisons-le.
u
4 - INTÉGRATION

Modification du conteneur de menu

wp_nav_ me nu( a r ray(


'theme l ocation ' => 'heade r_me nu',
' container ' => ' nav ' ) ) ;

Maintenant que nous utilisons correctement HTMLS, il nous reste à affi-


cher le menu du pied de page. C'est le même code sauf qu'il faut changer
l'identifiant du menu.

Affichage du menu dans footer.php

<f oote r >


<? php
wp_nav_ menu( a rra y(
't heme l oca tion' => ' footer_menu ',
'co n ta ine r' => ' nav ' ) ) ;
?>
</ f oo ter >

À présent que tout cela fonctionne bien, affichons nos différents articles.
En attendant, n'hésitez pas à créer d'autres emplacements avec différents
menus.

Affichage des articles et pagination


Nous allons afficher les cinq derniers articles sur notre page d'accueil et
nous ajouterons une pagination. Si vous n'avez pas encore de contenu sur
Vl
votre site, je vous conseille de créer au minimum six faux articles, pour
(!)

0
visualiser le travail que nous allons faire.
'--
w
>-
N
..--t
0
N
Utilisation de la boucle WordPress
©
.......
..c
Pour lister les articles, il faut utiliser les boucles WordPress que nous avons
O'l
·;:::: présentées dans le chapitre 2. Nous afficherons uniquement un extrait de
>-
0..
0 l'article avec la fonction the excerpt () , son titre et un lien vers l'article
u
complet.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Nous ajoutons donc la boucle d'articles dans le fichier ind ex . php, entre
les appels à l'en-tête et au pied de page.

Fichier index.php

<sec t i on>
<? php while ( have_posts(} } : the_post(}; ?>
<artic l e>
<h 2><?php the_title(} ; ?></h 2>
<P><?p h p the_excerpt(} ; ?></p>
<a href = " < ?php the_permalink (} ; ? >"
c l ass= "mo r e " >Li r e l a sui te</a>
</arti c l e>
<? p hp endwhile ; ?>
</se ction >

Nous avons maintenant les derniers articles qui s'affichent.

,carrier 9' 11:29 AM

Livre Eyrolles
Lancement du livre !
Morbi leo risus, porta ac consectetur ac,
vestibulwn at eros. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet. Duis
mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec sed odio dui. Donec id
Vl
Q)
elit non mi porta gravida [...]
0
'-
>- Lire la suite
w
N
......
0
N Chapitre 3
@
.....,
..c Morbi leo risus, porta ac consectetur ac,
Ol
ï:::: vestibulum at eros. lnteger posuere erat a ante
>-
0.
0
u

FIGURE 4-3 Affichage des derniers articles


4 - INTÉGRATION

Affichage d'informations supplémentaires


Si plusieurs auteurs participent à l'écriture des articles sur votre site, vous
voudrez sûrement afficher leurs noms. Pour cela, il suffit d'utiliser dans
notre boucle la fonction t he author ().

Affichage de l'auteur

1 <p >Ar t i c l e écr i t par <?php the_author() ; ? ></p>

Vous pouvez également ajouter la date de publication de l'article, et ceci


dans différentes formes, avec la fonction the_date <).
Si vous souhaitez modifier la manière dont est écrite la date, il suffit de
vous rendre dans l'onglet Réglages>Général et d'aller dans la rubrique
Format de date. Vous choisissez ensuite le format que vous souhaitez, ou
bien vous en créez un vous-même.

Format de date 0 27 décembre 2011


Ü 2011/12/27
!.) 12127/'2011
Ù 27/12/2011
0 Personnalisé : j F Y 27 décembre 2011

F1c;URE 4-4 Sélection du fo rmat de date

Une autre information peut être utile : elle concerne le nombre de com-
mentaires postés sur vos articles. Plus complexe, elle permet d'afficher au
singulier ou au pluriel, selon si vous avez zéro, un ou plus de commentaires.
Vl
Q) Pour cela, on utilise la fonction comment s_popup_ link () .
0
'-
>- Affichage du nombre de commentaires
w
N
......
0
N <?php comments_popup_link ( ' Aucun comme n ta i re ' , '1
@
....., commentaire ', ' %commentaires ' ) ; ? >
..c
Ol
1
ï::::
>- Les trois possibilités d'affichage sont séparées par une virgule. Dans le troi-
0.
0
u sième paramètre, nous utilisons la variable % pour afficher le nombre
précis de commentaires.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Utilisation d'une image miniature {thumbnail)


Pour rendre notre site plus agréable visuellement, nous allons ajouter une
image miniature représentative de l'article, appelée thumbnai/, plus com-
munément « image à la une ».
C'est une fonction native de WordPress, mais pour l'utiliser, il faut l'activer
dans notre thème, exactement comme pour la gestion des menus. Nous
allons donc ajouter une ligne dans le fichier f unc ti on . p h p .

Activation des images à la une

1add_theme _supp ort( 'pos t - thumbnail s ' ) ;

Ensuite, nous allons modifier les dimensions de l'image miniature créée.


Pour cela, allez dans Réglages>Médias et modifiez la taille des miniatures à
1OO x 1OO et cochez la case de recadrage des images.

Taille des miniatures Largeur 100 Hauteur 100


~ Recadrer les images pour parvenir aux
dimensions exactes (normalement, les miniatures
sont proportionnées)

F1c;URE 4 - 5 Modification de la taille des vignettes

Performance
La modification des dimensions prend effet uniquement sur les nouvelles
Vl
Q)
images. Pour créer de nouvelles miniatures de vos anciennes images, uti-
0
'-
lisez le plug-in WordPress Regenerate Thumbnails.
>-
w
N Maintenant, l'encart Images à la une est disponible dans la barre latérale
......
0
N
lors de la création d'un article.
@
....., Vous pouvez donc charger une image qui va servir de miniature sur la page
..c
Ol
ï:::: d'accueil du site.
>-
0.
u
0 Il ne resteplus qu'à l'afficher sur le site avec la fonction
the _post_thumbnai l () ,si l'article possède une image à la une.

150
4 - INTÉGRATION

Affichage du thumbnail

<P >
<? p h p
i f ( h as_post_ t h umbnai l () ) {
t he_ pos t _ thu mbnail ( 'thu mbna i l ' );
}
?>
</p>

La fonction t he_pos t _thumbnail () prend entre parenthèses le format


de miniatures que vous souhaitez. Elle correspond au réglage vu précé-
demment. Vous pouvez également utiliser medi um, large ou f ull dans
les paramètres.
Notre site est bien plus complet avec toutes ces informations supplémen-
taires.

12:24 PM

Livre Eyrolles

Lancement du livre!
Article écrit par Thibaut, le 27 décembre 20 11,
Vl
Q)
Aucun commentaire
0
'-
>- Morbi leo risus, porta ac consectetur ac,
w
N vestibulurn at eros. Integer posuere erat a ante
......
0 venenatis dapibus posuere ve lit aliquet. Duis
N
@ mollis, est non commodo luctus, nisi erat
....., porttitor ligula, eget lacinia odio sem nec elit.
..c
Ol
ï:::: Lorem ipsum dolor sit amet, consectetur
>-
0.
0
u

FIGURE 4-6 Affichage de l'image à la une

51 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

La pagination
Ajoutons une pagination très simple, avec des liens vers les pages suivante
et précédente. Pour cela, WordPress inclut deux fonctions de base:
previous_p os ts_link () et next_posts_link ().Nous allons donc en
insérer le code dans le fichier index. php, juste après la boucle qui liste les
articles.

Affichage de la pagination

<u l id="pagination 11 >


<li ><? php previous_posts_link('Page précédente'); ?></
li>
<li><? php next_posts_link('Page suivante'); ?></li>
</U l >

Entre parenthèses, vous devez définir l'ancre qu'aura votre lien. Si vous
actualisez votre site et si rien n'a changé, c'est tout simplement parce que le
nombre d'articles affichés par page est par défaut de 10. Pour le changer,
allez dans la rubrique Réglages>Lecture et modifiez le champ Les pages du
site doivent afficher au plus à 5 articles.
Vous devez maintenant voir apparaître le lien vers la page suivante.


• Page suivante

F1c;uRE 4-7 Pagination de l'affichage

a'.l Le code complet de index.php


0
'--
w
>- <? php get_header(); ? >
N
..--t <section>
0
N <? php whil e ( have_posts() the_pos t() ; ?>
© <a rticle >
.......
..c
O'l
·;::::
<P >
>-
0.
<? php
0
u if ( h as_post_ thurnbnail() ) {
the_pos t _ thu mbnail ( 'thurnbna i l ' ) ;
4 - INTÉGRATION

<P>
<h2><? php t he ti tl e() ; ?></h 2>
<p >Art ic l e écrit p a r <? php the _author(); ?> , l e
<?php t he_da t e() ; ?> , <? php
commen ts_popup_li nk( 'Aucun comment a ire ', '1
comment a ire' , ' % c o mment a ires ' ) ; ?></p >
<P ><? p h p the _ excerpt (); ? ></p >
<a hre f = " <?php the_p e rmalink( ) ; ? > "
c l ass ="mo r e " >Li re l a s uit e</a>
</art icl e>
<? php end wh i l e ; // Fi n d e l a b oucle ?>
<Ul id="pag ina ti on " >
<l i>< ?php previous_po s ts_l i nk ( 'Pa ge précéde n t e ' );
?></ li >
<li ><? php n e x t _pos t s _ link ( 'Page su i v ante' ); ?></ li >
</ Ul >
</ sect i on >
<? php get foote r () ; ? >

Affichage d'un article complet et de ses



commentaires
Si vous avez cliqué sur le lien Lire la suite pour afficher l'article complet,
vous aurez remarqué que nous arrivons sur une page blanche.
C'est tout simplement parce que nous avons créé le fichier singl e . php,
Vl
mais que nous n'avons encore rien écrit dedans.
(!)

0
'--
w
>- INFORMATION Et si single.php n'existe pas ?
N
..--t Si nous n'avions pas créé de fichier s i ngl e . php, WordPress aurait
0
N utilisé par défaut le fichier index . php pour afficher le contenu.
© Ceci est décrit dans le schéma de hiérarchie des templates.
.......
..c
O'l
·;::::
>-
0.
0 La grande différence entre nos templates index . php et singl e. php est
u
que nous afficherons l'article complet au lieu d'un simple extrait. Nous
allons donc copier-coller le code de index. php vers s i ng l e . php. Pour
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

afficher l'article, nous utiliserons la fonction the content () au lieu de


the_excerpt () qui affiche uniquement l'extrait.

Fichier single.php

<?php get_header(); ?>


<section>
<?php while ( have_posts( ) : the_post(); ?>
<a rticle >
<h2><?php the title () ; ?></h2>
<p>Article écrit par <? php the_author(); ?>, le
<?php the_date(); ?></p>
<P><?php the content() ; ?></p>
</a rticle>
<? php endwhile; ?>
</section>
<?php get_ footer( ); ?>

Maintenant que nous pouvons afficher un article entièrement, il ne reste


plus qu'à ajouter les commentaires liés à l'article.
Pour cela, il faut créer un fichier nommé comments. php. Nous allons uti-
liser des fonctions de WordPress pour afficher le contenu, comme pour un
article: comment_author_link () , pour indiquer le nom de l'auteur du
commentaire avec un lien vers son site personnel, ou comment_text (),
pour publier le commentaire en question.

Affichage des commentaires

<?php if ($comments ) : ?>


Vl
(!)
<h 3><?php comments_number('Pas de commentaire',
0 'Commentaire : ', 'Commentaires' ) ;?></h3>
'--
w
>- <Ol>
N
..--t <?php foreach ($comments as $comment) : ?>
0
N <l i >
© <St rong ><?php comment_author_ link(); ?>
.......
..c
O'l </strong><br/>
·;::::
>-
0.
0
u
4 - INTÉGRATION

Le <? php comment_date('j MY'); ?> à <? php


comment time(); ?>
<? php comment_text(); ?>
</ li>
<? php endforeach; ?>
</ Ol >
<?php endif; ?>

Nous vérifions d'abord s'il existe des commentaires sur l'article avec la con-
dition if ( $comments). S'il y en a, nous en publions le contenu. Nous affi-
chons, en premier, un titre à cette section, avec la fonction
comments_number (). Son fonctionnement est le même que pour
comments_popup_ link () que nous avons utilisée quand nous avons listé
les différents articles sur la page d'accueil.
Puis, grâce à la boucle f oreach, nous listons les différents commentaires.
Si vous allez sur un article avec des commentaires, vous voyez que ceux-ci
ne sont toujours pas affichés. C'est parce que nous n'avons pas appelé le
fichier comments. p hp. Nous allons écrire le code suivant dans le fichier
s i ngl e .php, juste avant la fermeture de la balise <sect i on>.

Utilisation du template comments.php

<sec tion >


<?php comments template(); ?>
</sect i on>

Comme pour get _ header () ou get footer () , la fonction


comments_ t empla te () sait qu'elle doit utiliser le fichier comment s .php.
a'.l Ceci fait partie de la manière dont WordPress a été développé par ses créa-
2>- teurs.
w
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u

SS 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Carrier 9 6:04 PM

Bonjour tout le monde !


Article écrit par Thibaut, le 23 décembre 2011

Bienvenue dans WordPress. Ceci est votre


premier article. Modifiez-le ou supprimez-le,
puis lancez-vous !

Commentaire :

1. Monsieur WordPress
Le 23 déc 2011 à 13 h 07 min

Bonjour, ceci est un conunentaire.


Pour supprimer un conunentaire,
connectez-vous, et affichez les
commentaires de cet article. Vous
pourrez alors les modifier ou les
supprimer.

FIGURE 4-8 Affichage des commentaires

Le formulaire de commentaire
À présent, nous pouvons afficher les commentaires. Il reste à créer le for-
mulaire qui permettra aux internautes de commenter vos articles. On
aurait pu ajouter les instructions dans le fichier comments. php, mais pour
Vl
mieux séparer et clarifier notre code, nous allons créer un fichier
Q)

0
form_c o mme nt . php.
'-
>-
w Avant de commencer à écrire notre code, nous allons appeler notre for-
N
...... mulaire à la fin du fichier comments. php .
0
N
@
.....,
..c
Appel du formulaire de commentaire
Ol
ï::::
>-
0.
0
1 < ?php inc l ude(TEMPLATEPATH . ' /form_comment.php ' ); ? >
u
Maintenant que nos fichiers sont liés, nous pouvons commencer à écrire
notre formulaire.
4 - INTÉGRATION

WordPress propose différentes fonctionnalités. Par exemple, il est possible


d'obliger l'utilisateur à avoir un compte sur notre site pour laisser un com-
mentaire. En tant qu'administrateur du site, quand vous voulez laisser un
commentaire, on ne vous demande pas votre pseudo ou votre adresse
électronique, car WordPress utilise directement les informations de votre
compte. Nous allons donc devoir gérer ces différents états grâce aux con-
ditions PHP.

Structure du formulaire de commentaire

<7 p hp //Si les commentaires sont activés, on affiche


le formulaire
if ('open' == $post->comment_status) : 7>
<h 3 id="respond " >La i sse z u n commenta i re</ h 3>
<7 php //S'il est obligé d'avoir un compte et si
vous n'êtes pas connecté, on affiche un lien vers le
formulaire de connexion
if ( get_option('comment_registration') && !$user_ID) :

<p>Vous devez ê t re <a href= " <7php ech o


get o p tion ( ' s i teur l' ) ; 7>/wp-
l ogin.php7redirect _ t o =<7ph p the_perma li n k ();
7> " >connecté</a> pour l aisser un commentai re . </p>
<7ph p e l se : 7 >
<!-- Affichage du formulaire -->
<7ph p endif; //Fin de la seconde condition 7>
<7php endi f; //Fin de la première condition 7>

Avec la première condition, nous nous assurons donc que vous autorisez
Vl
les commentaires sur votre site.
(!)

0
'-- Ensuite, nous vérifions s'il faut avoir un compte pour laisser un commen-
w
>-
N
taire et, si vous n'êtes pas connecté, alors on affiche un lien vers le formu-
..--t
0 laire de connexion .
N
© Sinon, nous affichons le formulaire de commentaire.
.......
..c
O'l
·;::::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Affichage du formulaire de commentaire

<form action=" <?php echo get_option('siteurl'}; ?>/wp-


conunents-post.php " method=" post ">
<?php //Si vous êtes connecté
if ( $user_ ID } : ?>
<p>Connecté en tant que <a href=" <? php echo
get_option ( 'siteurl'); ?>/wp-admin/profile .php" ><?php
echo $user_identity; ?></a>. <a href = " <?php echo
get_option('siteurl'); ?>/wp-
login .php?action=logout">Déconnection</a></p >
<?php //Sinon , on affiche les champs
d'identification
else : ?>
<P>
<input type="text" name=" author " id="author"
value="<?php echo $comment author; ?>" size="40"
tabindex="l" placeholder="Votre nom" />
<l abe l for="author" ><smal l >Nom <?php if ($req)
echo "(requis ) "; ?></smal l ></label>
</p>
<P>
<input type="text" name=" email " id="email"
value="<?php echo $comment_author_ema il; ?>"
size="40" tabindex="2" placeholder="exemple@mail.com"
/>
< labe l for=" email " ><sma ll >E-mail <?php if ($req)
echo "(requis ) "; ?></small></label>
</p >
<p>
Vl <input type="text" name=" url " id="url"
(!)

0
value="<?php echo $comment_author_ url; ?> " size="40"
'--
w
>- tabindex="3" placeholder="http://" />
N
..--t
<label for = "url'' ><small >Site Web</small></label>
0
N </p>
© <?php endif; ?>
.......
..c <P>
O'l
·;::::
>- <tex tarea name = "conunent " id= "comment" cols = "60"
0.

u
0 rows="lO" tabindex="4">
</ text area>
</p >

158
4 - INTÉGRATION

<P>
<input name="submit" type="submit" id="submit"
tabindex="5" value="Envoyer" />
<i nput type="hidden" name=" comment_post_ ID "
va lue= " <?php echo $id; ?>" />
</p>
</form>

Nous obtenons un formulaire HTML classique. Ce que vous ne devez surtout


pas modifier, ce sont les attributs name dans les balises <input>. Leur nom est
défini par WordPress, qui se base dessus pour définir que tel champ corres-
pond à l'auteur et qu'un autre correspond à l'adresse électronique. Il y a aussi à
la fin un champ de type hidden à ne surtout pas supprimer. li permet de récu-
pérer l'identifiant de l'article où vous postez le commentaire.
Nous utilisons également l'attribut HTMLS placeholder, qui affiche un
contenu indicatif à l'intérieur de nos champs. Pas d'inquiétude, celui-ci dis-
paraît immédiatement une fois le champ sélectionné.

,Carrier 9 10:31 AM
Laissez un commentaire

~-'- r_ 'Yl_ _ _ _ _ _ _ _ _~) Nom


(requis)

(requis)

Site
Web

Vl
Q)

0
'-
>-
w
N
......
0
N
@
.....,
..c
Ol
ï::::
>- ( Envoyer )
0.
0
u

FIGURE 4-9 Formulaire de commentaire


CRÉER SON PREMIER THÈME WORDPRESS MOBILE

li y a également, cause expliquée précédemment, une condition qui vérifie


si vous êtes connecté. Si c'est le cas, alors on n'affiche pas les champs
auteur, email et url.

Intégration du pied de page


Dans le pied de page, nous avons déjà affiché le menu secondaire. Le plus
intéressant maintenant est de vous donner le choix de publier ce que vous
voulez. Pour cela il y a les widgets, souvent utilisés pour afficher les articles
récents ou un nuage de tags dans la barre latérale.
Vous trouverez les différents widgets de base dans le menu Apparence>
Widget, mais pour le moment nous ne pouvons pas les utiliser. li faut les
activer de la même manière que pour les menus.
Pour cela, rendez-vous dans le fichier f u nct ions. php.

Activation des widgets

if ( fun ction_e xi sts( 're gi s t e r_s ide b a r' ) ){


register_ sideb ar() ;
}

Désormais, vous voyez les différents widgets, ainsi que la zone Colonne
latérale 1, qui correspond à ce que nous allons annoncer dans le pied de
page. Nous ajouterons ensuite le widget de recherche.
li reste donc à afficher les widgets grâce à la fonction
dynami c sidebar ( ).

Vl
(!) Fichier footer.php
0
'--
w
>-
<f oo t e r >
N
..--t
0
<U l id= " widg et" >
N
<?php dynamic_sidebar() ; ?>
©
....... </Ul >
..c
O'l
·;:::: <? php
>-
0. wp_nav_menu ( array (
0
u
4 - INTÉGRATION

'theme_locat i on ' => ' footer_menu ',


'container ' => 'nav' ) ) ;
?>
<p>Copyright 20 1 2</p>
</footer>
</body>
</ html >

• Recherche pour: (
~----~

( Recherche )

• Mention légale
• Contact

Copyright 20 12

FIGURE 4-10 Affichage du pied de page avec widget

Réaliser une feuille de style CSS


Après avoir créé nos fichiers et publié tous nos contenus, il est temps de
mettre en place notre CSS pour obtenir un joli site qui s'affiche sur mobile.

Utiliser un reset CSS


Vl
Q)

0
Pour vous expliquer simplement à quoi sert un reset CSS, nous allons ana-
'-
w
>- lyser l'affichage actuel de notre site sur différents navigateurs.
N
...... Celui-ci est déjà mis en page alors que nous n'avons écrit aucune ligne de
0
N
@ CSS. Cela est dû à ce qu'on appelle le user agent, c'est-à-dire le navigateur
.....,
..c que vous utilisez. Par défaut, chaque navigateur possède sa propre feuille
Ol
ï::::
>- de style CSS qu'il applique au site que vous visitez.
0.
0
u

61 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Carrier 9 3:53 PM
Uvre Eyrolles

localhosVeyrolles/

Livre Eyrolles
Livre Eyrolles
• Accueil
• Accuei l • A propos
• A propos • Contact
• Contact

Lancement du livre!
Lancement du livre !
Article écrit par Thibaut, le 27 décembre
2011, Aucun commentaire

FIGURE 4-11 Affichage actuel sous Safari et Opera mobile

Comme vous le remarquez, l'affichage est légèrement différent sur chaque


navigateur. Il applique des marges à nos éléments, définit les titres avec les
balises Hl, H2 et une taille de police plus importante, la typographie n'est pas
la même partout et tous nos éléments 1 i ont une puce sur leur gauche.
Avant de commencer notre CSS, il vaut mieux partir d'une base commune,
Vl ce qui garantira la compatibilité et le même affichage de notre site sur
QJ

0 chaque navigateur. Pour cela, nous allons donc utiliser un reset CSS. Il en
'-
>- existe beaucoup sur Internet. Le plus connu est le reset de Meyer, que nous
w
N
,......
0
ajoutons dans notre fichier style. css.
N
@
.µ Reset de Meyer
.c
Ol
'i:
>- html, body , div, span, applet, object, i frame,
a.
0
u h l, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr , acronym , address, big, c it e , code ,
4 - INTÉGRATION

del, dfn, em, img, ins, kbd, q, s, samp,


small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: O;
padding: O;
border: O;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu , nav, section {
d isplay : bl ack;
}
body {
l ine- height: l;
}
o l, ul {
list-styl e : none;
}
blockquote, q {
quotes: none;
}
Vl
(!) blockquote:before, blockquote:after,
0
'--
q:before, q:after {
>-
w content: 1 1 •
N '
..--t content: none;
0
N }
© table {
.......
..c
O'l
·;:::: border - collapse: collapse;
>-
0. border-spacing: O;
0
u }
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

OUTIL Reset de Meyer


Retrouvez ce code sur le site de Eric Meyer :
~ http://goo.gl/E3Sk

L'affichage de notre site est maintenant homogène entre les différents


navigateurs.

Carrier 9 11 :58 AM
Uvre Eyrolles

localhosUeyrolles/ ·-----
Livre Eyrolles
Accueil
A propos
Contact

Lancement du livre !
Lancement du livre ! Article écrit par Thibaut, le 27 décembre
Article écrit par Thibaut, le 27 décembre 20 11, 2011, Aucun commentaire
Aucun commentaire Morbi leo risus, porta ac consectetur ac,
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a
vestibulum at eros. lnteger posuere erat a ante ante venenatis dapibus posuere velit
venenatis dapibus posuere velit aliquet. Du is aliquet. Duis mollis, est non commodo
mollis, est non commodo luctus, nisi erat porttitor luctus, nisi erat porttitor ligula, eget lacinia
ligula, eget lacinia odio sem nec elit. Lorem odio sem nec eht. Lorem ipsum doler sit
ipsum dolor sit amet, consectetur adipiscing elit. a met, consectetur adipiscmg elit. Donec
Donec sed odio dui. Donec id el it non mi porta sed odio dui. Donec id elit non mi porta
gravida [...] ravida [ ....]
1 ire la suite

Vl FIGURE 4-12 Affichage avec le reset


QJ

0
'-
>-
w
N
,.....
ASTUCE HTMLS Boilerplate
0
N
@
HTMLS Boilerplate est une base de développement très

..c
utile, incluant un reset CSS et de bonnes pratiques pour le
Ol
'i: développement en HTMLS. Elle inclut également de nom-
>-
a. breux outils pour améliorer la compatibilité et la perfor-
0
u
mance de votre site.
~ http://htmlSboilerplate.com
4 - INTÉGRATION

Les bases de notre feuille de style


Avant de vraiment nous attaquer à la présentation de notre site et
d'adapter notre CSS au mobile, nous allons défini r une charte globale,
c'est-à-dire que nous allons décider de manière assez générique quelle
typographie sera utilisée, quelle couleur auront les liens, les titres, etc.

Définition de la typographie utilisée

body {
f ont :96% Ar ial, Helve t ica, Gene va , sans-se rif;
}

Cette ligne est simple; nous définissons plusieurs typographies. Ainsi, si


l'utilisateur n'a pas la police de caractères Arial sur son ordinateur, il utili-
sera Helvetica, sinon Geneva et ainsi de suite.
Maintenant, nous personnalisons les liens de notre site. Par défaut, ils sont
violets; nous les définissons en noir. Puis, nous indiquerons qu'au survol du
lien sa couleur deviendra blanche sur fond noir et sans le soulignage, grâce
à la propriété text - decoration.
Sur un écran mobile, il n'existe pas vraiment d'état de survol, mais cela
apparaîtra au moment où l'utilisateur mettra son doigt sur un lien. Ce
changement d 'état signifiera à l'utilisateur qu'il y a bien une action quand il
clique sur le lien.

CSS des liens

a{
Vl
(!)
color: #000 ;
0
'--
}
>-
w a:hover{
N
..--t back g r ound - col or: #000;
0
N col or: #FFF ;
© text-decoration : n one ;
.......
..c
O'l
·;::::
}
>-
0.
0
u Pour donner un peu plus de style à notre site, nous allons modifier l'appa-
rence du titre de notre site, donc de la balise h l.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

CSS du titre principal

hl{
background - color: #000;
h eight: 30px;
line - height: 30px;
padding - left: lOpx;
text - transform: uppercase;
font-weight: bold;
}
hl a{
color: #FFF;
text-decoration: none;
}

li faut maintenant aérer un peu notre site, grâce à des marges sur les bords
de l'écran, ainsi qu'entre les différents articles et le pied de page.

Espacement des différents blocs

section{
padding: lOpx;
}
article{
margin-bottom: 20px;
}
footer {
text-align : center;
margin-bottom: lOpx;
}
Vl
(!)

0
'-
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
4 - INTÉGRATION

Accueil
A propos
Contact

Lancement du livre !
Article écrit par Thibaut, le 27 décembre
2011 , Aucun commentaire
Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. lnteger posuere erat a
ante venenatis dapibus posuere velit aliquet.
Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec
elit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec sed odio dui. Donec id
elit non mi porta gravida [...]

FIGURE 4-13 Base CSS

Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
ontact-

Vl
QJ

0
'-
>-
w
N
,......
0
N
0
@

.c
Ol
'i:
>-
a.
0
u
Création d'une CSS
pour mobile

Il est maintenant temps de réaliser


la feuille de style de notre site mobile
et de comprendre les différents enjeux
liés à la conception mobile.

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;:::: SOMMAIRE
>-
0.
0 ~ Les contraintes du mobile
u
~ Mise en place d'une présentation adaptative
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Les contraintes du Web mobile

La nouveauté des fonctions mobiles


Le Web mobile est fondamentalement différent du Web traditionnel der-
rière un bureau. Une nouvelle approche doit être adoptée car les fonction-
nalités du mobile autorisent de nouveaux usages comme la géolocalisation
ou la réalité augmentée.
Nous devons penser mobile, avant même de penser aux autres versions.
Les contraintes concernant la présentation et l'ergonomie sont plus
importantes; nous devrons donc définir précisément quel contenu nous
al Ions afficher.
N'oublions pas que sur mobile, la connexion à Internet est beaucoup plus
lente. Il faut optimiser le temps de chargement de notre site, donc opti-
miser notre code et les images affichées.
Ceci implique de se débarrasser de toute chose inutile sur mobile, qui donne
de la plus-value à votre version bureau: exit la belle bannière avec des images
lourdes, la barre latérale avec des dizaines de liens ou un pied de page de
500 px de hauteur. Il faut penser simple et faciliter le parcours de l'utilisateur
pour qu'il accède rapidement à l'information qu'il recherche.

La diversité des appareils


Une version mobile a pour but d'être utilisée sur tous les smartphones
actuels. Cependant, chaque smartphone possède ses propres
Vl
(!)
caractéristiques:
0
'--
w
>- • un système d'exploitation (iOS pour Apple, Android, BlackBerry OS ... );
N
..--t
0
une taille et une résolution d'écran;
N
© • un navigateur web.
.......
..c
O'l
Il faut donc s'adapter à la segmentation du marché du mobile pour pro-
·;::::
>-
0.
poser un site dont l'affichage soit identique sur chaque smartphone et
0
u s'adapte à chaque écran en étant compatible avec les différents naviga-
teurs web.
5 - CRÉATION D'UNE CSS POUR MOBILE

ASTUCE Tester son site


Nous verrons au chapitre 7 comment tester son site sous chacun de
ces environnements.

La compatibilité des navigateurs


Avant de parler compatibilité, il faut savoir qu'il existe de nombreuses
méthodes pour créer un site adapté aux mobiles. Le responsive design con-
siste à créer une feuille de style en fonction de la taille de l'écran à l'aide des
media queries. Or, ces dernières ne sont pas compatibles avec tous les navi-
gateurs mobiles, notamment avec celui de Windows Phone.
li existe également desframeworks d'interface comme jQuery Mobile. Son
utilisation est vraiment très simple et les possibilités offertes sont intéres-
santes. Je l'utilise depuis bientôt un an sur mon site personnel (http://thi-
baut-baillet.com). Son inconvénient est que, de base, l'interface n'est pas for-
cement très personnalisable et on reconnaît facilement un site qui a été
conçu avec ce framework. Sinon, il couvre de nombreux navigateurs
mobiles, à part certaines versions de Opera Mini et d'anciens BlackBerry.
Dans notre cas, nous avons un avantage important en termes de compati-
bilité. Nous pensons mobile! Notre thème est dédié au mobile et il est
pensé pour fonctionner uniquement sur mobile (même s'il fonctionne très
bien sur un ordinateur de bureau). Nous n'utilisons donc ni framework, ni
propriété CSS3 trop récente pour être compatible. Nous faisons du CSS,
simple et efficace. Le site ne sera évidement pas compatible avec 1OO% des
téléphones mobiles du marché. Leur nombre et leur diversité en termes de
caractéristiques rendent l'opération impossible. Cependant, les derniers
Vl
(!)
smartphones pourront facilement afficher notre site.
0
'--
>-
Nous présenterons dans un prochain chapitre tous les outils pour tester
w
N
l'affichage de son site sur mobile.
..--t
0
N
©
.......
..c
O'l
Une ergonomie adaptée
·;::::
>-
0.
0
L'ergonomie a pour but de rendre simple et efficace l'utilisation d'un sys-
u
tème par un utilisateur. La réflexion sur l'ergonomie vient en amont dans la
conception d'un site web.

71 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Dans le mobile, l'ergonomie est très importante et se confronte à de nom-


breuses spécificités, telles que les différentes tailles d'écran et les gestuelles
liées aux écrans tactiles des appareils.
Il faut donc étudier avec soin comment mettre en avant le message qui
doit être transmis par un site ou une application et aider l'internaute à
trouver rapidement l'information qu'il est venu chercher.

ALLER PLUS LOIN Ergonomie


Il existe de nombreux outils et méthodologies pour travailler l'ergo-
nomie de son site. Pour plus d'informations sur ce sujet, consultez :
~ ergophile.com
W Amélie Boucher, Ergonomie web, Eyrolles 2012

Mise en place d'une présentation


adaptative
Comme nous l'avons expliqué précédemment, il existe de nombreuses
tailles d'écran différentes. Notre thème devra donc s'adapter à chaque
écran. Pour cela, nous allons réaliser une présentation capable de s'adapter
aux différents supports.

Un menu extensible
Créons un menu avec des liens les uns en dessous des autres. Pour faciliter son
Vl
(!) utilisation, nous allons faire en sorte que chaque lien occupe la largeur de
0
'--
>- l'écran. Nous définirons donc des largeurs en pourcentages et non en pixels.
w
N
..--t
0 Mise en place du menu
N
©
.......
..c nav{
O'l
·;:::: text-a l ign : center;
>-
0.
0
}
u nav a{
d isplay : b l ock;
5 - CRÉATION D'UNE CSS POUR MOBILE

height: 30px;
line-height: 30px;
color: #000;
text - decoration: none;
border - bottom : lpx solid #333;
}

Comme vous pouvez le remarquer, je n'ai pas défini de width : 100%. En


revanche, j'ai utilisé la propriété display: block car lorsque l'on définit un
type block, l'objet ciblé hérite automatiquement d'une largeur de 100 %.
Maintenant, nous devons définir un état au survol du lien et un état actif.
L'état actif correspond à la page courante. Si nous sommes sur la page Con-
tact, WordPress va ajouter une classe current_page_item sur le conte-
neur du lien de contact dans le menu.

Carrier 9 9:05 PM
LIVRE EYROLLES

Accueil

A propos

Contact

Lancement du livre !
Article écrit par Thibaut, le 27 décembre
Vl
2011 , Aucun commentaire
Q)
Morbi leo risus, porta ac consectetur ac,
0
'- vestibulum at eros. lnteger posuere erat a
>-
w ante venenatis dapibus posuere vetit a liquet.
N Duis mollis, est non commodo luctus, nisi
......
0 erat porttitor liguta, eget lacinia odio sem nec
N
@ elit. Lorem ipsum dolor sit amet, consectetur
....., . . .
..c
Ol
ï::::
>-
0.
0
u FIGURE 5-1 Menu du site
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Menu au survol

nav a:hover, .current_page item a{


background - color: #EEE;
color: #000;
}

Organisation des articles


Continuons la conception de notre site avec les articles. Nous allons
mettre le contenu de l'article sur le côté droit du thumbnail, mettre en évi-
dence le titre et améliorer un peu le bouton Lire la suite. Nous allons égale-
ment aérer un peu l'espace entre chaque article avec une bordure.

REMARQUE «Lire la suite» et référencement


Le bouton Lire la suite n'est pas un intitulé optimal pour le référen-
cement. Néanmoins, il est important de le garder pour simplifier
l'expérience utilisateur et garder la cohérence du design. On peut
donc ajouter en plus un lien sur le titre.

Présentation du contenu
Modifions d'abord les propriétés de la balise article que nous avons
créée dans le chapitre précédent. Ajoutons une bordure en bas de l'article,
ainsi qu'une marge interne pour éviter que la bordure ne colle à l'article.

Espacement des articles


Vl
(!)
article{
0
'-
>- margin - bottom: 2 0px;
w
N padding-bottom: lOpx;
..--t
0
N
border - bottom: lpx dotted #333;
© }
.......
..c
O'l
·;::::
>- Nous allons ensuite mettre en évidence le titre de l'article en graissant sa
0.

u
0
police.
5 - CRÉATION D'UNE CSS POUR MOBILE

Modification du titre des articles

article h2{
font-weight: bold;
}

Il ne reste plus qu'à s'occuper du thumbnail. Par défaut, WordPress ajoute


la classe attachment-thumbnail à chaque image. Nous allons lui appli-
quer un f loat : l e f t et une marge sur la droite pour que le texte ne
soit pas collé à l'image.

Placement du thumbnail

article .attachment-thumbnail{
float: left;
margin-right: lOpx;
}

Un bouton « Lire la suite »


Pour continuer dans le style de notre en-tête et de notre menu, nous allons
créer un gros bouton Lire la suite, blanc sur fond noir, qui va occuper la
moitié de la largeur de notre écran. De plus, nous l'alignerons sur la droite.
Nous avons préalablement ajouté une classe nommée more sur chaque
lien Lire la suite. Nous allons donc cibler cette classe pour définir notre lien.

Lien Lire la suite

Vl
.more, #pagination a{
(!)

0
background-color: #000;
'-
w
>- color: #FFF;
N
..--t
text-align: center;
0
N text -decoration: none;
© display: block;
.......
..c
O'l
width: 50 %;
·;::::
>- h e ight: 25px;
0.

u
0 l ine- height: 25px ;
margin: lOpx 5px 0 50%;
}
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

La petite astuce utilisée ici pour aligner le bouton à droite est que nous
avons appliqué une marge sur la gauche de 50 % de la largeur de l'écran.

Pagination
Dans l'exemple précédent, nous avons appliqué la même présentation au
lien de pagination qu'au lien Lire la suite car une grande partie va nous être
utile. Cependant, nous ne voulons pas exactement le même rendu. Nous
allons faire en sorte que, s'il y a un lien Page précédente et un lien Page sui-
vante, ceux-ci soient côte à côte. Pour cela, nous allons leur appliquer un
f loat : left comme pour le thumbnail.

Lien de pagination

#pagination{
height : 25px;
}
#pagination li{
f l oat: lef t;
width: 5 0%;
}
#pagination li a{
margin: O;
width: 100%;
}

Il y a deux détails intéressants dans ce code. Le margin : o réinitialise les


marges à 0, car celles-ci avaient été définies pour le lien Lire la suite ; or,
nous ne voulons pas de marges entre les liens de pagination.
Vl
(!)

0
Par rapport au lien Lire la suite, nous avons également modifié la largeur
'--
w
>- des liens de pagination à 100 %, car nous avons défini une largeur de 50 %
N
..--t
0
au conteneur du lien. Donc, quand nous définissons la largeur du lien à
N
100 %, celui-ci ne se base pas sur la largeur de l'écran mais sur la largeur de
©
.......
..c
son conteneur, la balise <li >.
O'l
·;::::
>-
0.
0
u
5 - CRÉATION D'UNE CSS POUR MOBILE

Carrier ~ 10:09 PM

Lire la suite

Article test
Article écrit par Thibaut, le ,
~la-~ Aucun commentaire
Morbi leo risus, porta ac
consectetur ac, vestibulum
at eros. lnteger posuere erat
a ante venenatis dapibus posuere velit
aliquet. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia
odio sem nec elit. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Donec sed
odio dui. Donec id elit non mi porta gravida
[... ]

Lire la suite

Page précédente Page suivante

FIGURE s-2 Affichage d'un article et de la pagination

Des formulaires adaptés


Il est maintenant temps d'optimiser l'affichage des formulaires de notre
site. Le but est de faire un gabarit générique pour le formulaire d'ajout de
commentaire et le formulaire de contact.
Vl
QJ
Les formulaires sont un point à ne surtout pas négliger sur mobile. Ils doi-
0
1....
vent être ergonomiques et simples d'utilisation. Il ne faut surtout pas que
>-
w les champs de texte soient trop petits pour les doigts de nos utilisateurs,
N
,......
0
donc nous augmenterons la hauteur et la largeur des champs. Il en est de
N
@ même pour le bouton de validation du formulaire.

..c
Ol
Comme nous avons utilisé l'attribut placeholder sur nos champs, les
·;::
>-
a. labels deviennent inutiles et encombrants. Nous allons donc tout simple-
0
u ment les faire disparaître de l'affichage.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Faire disparaître les labels des champs

form label {
d i splay: none;
}

Maintenant, adaptons nos champs de formulaire à la largeur de l'écran et


augmentons leur hauteur.

Style des champs de formulaire

form input, textarea {


width : 100%;
height: 2em ;
margin: lOpx auto;
padding : O ;
border-radius : O ;
}

Nous ajoutons une marge pour centrer nos champs sur le site et pour les
espacer les uns des autres.
Nous avons appliqué le même style au champ de texte et au textarea,
car ils ont de nombreuses caractéristiques communes. Toutefois, nous
allons ensuite cibler uniquement le textarea pour lui donner une hau-
teur plus importante que celle des autres champs.

Hauteur du textarea

textarea{
Vl
(!)
hei ght: 4em;
0 }
'--
>-
w
N
..--t
0
Pour finir, il nous reste le bouton de soumission du formulaire. Nous allons
N
appliquer un style proche de celui des liens Lire la suite, pour respecter
©
.......
..c notre charte graphique.
O'l
·;::::
>-
0.
0
u
5 - CRÉATION D'U N E CSS POUR MOBILE

Bouton de soumission

inpu t[type=s u bmit] {


bac kground - c o l o r : #000;
c o l o r : #FFF;
b o rder : none;
height: 2 5px ;
}

Comme vous pouvez le constater, il est possible de cibler une balise qui a
un attribut précis. Ici, nous ciblons les champs qui ont un type s ubmi t.
De base, notre code est correct. Pourtant, si vous testez le site sous Safari
mobile, la présentation ne correspond pas. Il y a un dégradé en arrière-plan
et les angles du bouton sont arrondis.

Envoyer

FIGURE 5-3 Bouton de soumission sous Safari mobile

Ce style est appliqué par défaut avec Safari. Heureusement, il y a un moyen


de le désactiver grâce à la propriété CSS - webki t - a p pear a n ce.
Ajoutez donc le code suivant au style du champ de soumission.

Suppression du style sous Safari mobile

1- webkit- a ppea r a n c e : n on e;
Vl
(!)

0
Nous avons maintenant une présentation pour tous nos types de formu-
w
'-
>- laires.
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Carrier 9 9:29 PM
in, egestas eget quam. Aenean lacinia
bibendum nulla sed consectetur. Nullam id
dolor id nibh ultricies vehicula ut id elit.
Donec ullamcorper nulla non metus auctor
fringilla.

Laissez un commentaire

nom

npe m:: l com

FIGURE 5-4 Formulaire de commentaire

Présentation du pied de page


Notre pied de page est actuellement composé d'un formulaire de
recherche, de divers liens de navigation et d'un paragraphe de copyright.
Pour le formulaire, nous allons faire en sorte que le champ de recherche et
Vl
Q)
le bouton de validation soient côte à côte. Pour le menu, nous allons
0
'-
changer de style par rapport au menu principal. Les liens vont être côte à
>-
w côte de manière à ce que l'on puisse en ajouter à l'avenir sans poser de pro-
N
......
0 blème à l'affichage.
N
@
.....,
Commençons par notre formulaire. il suffit de diminuer la largeur des
..c champs de texte.
Ol
ï::::
>-
0.
0
u

l so
5 - CRÉATION D'UNE CSS POUR MOBILE

Formulaire de recherche

f ooter input{
widt h : 40%;
}

Créons le style de notre menu de navigation secondaire. Par défaut, il hérite


du style de la navigation principale. Nous allons donc réinitialiser certaines
valeurs comme display pour que les liens soient sur la même ligne. Nous
allons également ajouter une marge entre le menu et le copyright.

La navigation secondaire

f ooter nav{
margin-bottom: lOpx;
}
foo ter nav li {
d isp lay: inline;
}
footer nav a{
display: inline - block;
background-color: #000 ;
color: #FFF ;
padding: O lOpx ;
}

li n'y a rien de spécial dans notre code, mis à part que l'on annule le style
display: block pour aligner nos liens.

.•,.
Vl
Q)

0
'-
>-
w
N
......
Mention légale
0
N
Copyright 2012
@
.....,
..c
Ol
ï::::
>-
0.
0
u
FIGURE s-s Le pied de page du site

81 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Optimisation en mode paysage


Après avoir affiché le site sur un iPhone, vous remarquerez que si vous
passez en mode paysage, un zoom est créé par le navigateur et rend notre
version mobile inutile.

Carrier 9 2:12 PM

LIVRE EYROLLES

Accueil

A propos

Contact

Lancement du livre
A rticle écrit oar I hibé
•• 2

FIGURE 5-6 Mode paysage sous iOS

Pour corriger cela, il suffit de modifier la balise viewport et de limiter le


zoom maximum à 1, donc à la taille initiale du site.

Réglage du viewport pour le mode paysage

<me t a name= "viewport " content = "widt h=device-widt h,


Vl ini tial - scal e=l . O, user - scalabl e=O, maximum-
Q)

0
scale=l.0 " >
'-
>-
w
N
...... Tout est presque parfait. li y a juste un dernier bémol comme vous le voyez
0
N sur l'image précédente. En effet, la taille de police est plus importante en
@
....., mode paysage. Encore une fois, Safari mobile a un comportement qui lui
..c
Ol
ï:::: est propre. Nous allons empêcher cela grâce à une propriété spécifique
>-
0.
0
que nous allons appliquer sur la balise body.
u
5 - CRÉATION D ' U N E CSS POUR MOBILE

Accueil

A propos

Contact

Lancement du livre !
Article écrit par Thibaut, le 27
décembre 2011 , Aucun
commentaire
Morbi leo risus, porta ac consectetur ac,
•• 2

FIGURE 5-7 Mode paysage avec viewport configuré

Ajustement de la taille de police en mode paysage

body {
-webkit - t ext -s i ze-ad j us t: 1 00% ;
}

Nous en avons maintenant fini avec notre feuille de style mobile. N'hésitez
pas à vous approprier la présentation et à faire des tests par vous-même.
Vous avez maintenant toutes les compétences pour éviter les pièges liés au
mobile.

Vl
Q)

0
'-
>-
w
N
......
0
N
@
.....,
..c
Ol
ï::::
>-
0.
0
u
Vl
QJ
o e o
0
'- (MAf'Gf M€NT
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Optimiser
les performances

Le chargement rapide des pages et des


images d'un site est un enjeu crucial
quand on fait du Web mobile. Nous
allons maintenant mesurer cette
performance et l'améliorer.

Vl
(!)

0
..__
w
>-
N
..--t
0
N
© SOMMAIRE
.......
..c
O'l
·;:::: ~ Mesure de la vitesse du site
>-
0.
0
~ Gestion des tailles d'images
u
~ Outils de compression
~ Mise en cache
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Mesurer la vitesse du site


Le but de ce chapitre est de comprendre et de savoir améliorer les perfor-
mances de son site mobile. Ceci est un enjeu assez important car les con-
nexions 3G restent encore assez lentes. Donc si les performances de votre
site sont médiocres, l'internaute risque de quitter rapidement votre site.
Il existe deux outils très utilisés pour mesurer la performance de votre site:
Page Speed et YSlow.

PageSpeed
OUTIL Page Speed
Cet utilitaire développé par Google est disponible via le lien suivant :
~ https://developers.google.com/pagespeed/

Vous pouvez utiliser cet outil directement sur le site de Google ou télé-
charger le plug-in qui est disponible pour Chrome et Firefox.
Lançons une analyse de notre site actuel pour voir la note qu'il obtient et
identifier les réglages à apporter pour améliorer la performance.

Page Speed Score: 74/ 100 "'


O Exploiter la mise en cache du navigateur
fl Diffuser des images mises à l'échelle
f} Optimiser les images

A Autoriser la compression
Vl
Q) O Réduire la taille des ressources CSS
0
'- A Spécifier un en- tête "Vary: Accept- Encoding"
>-
w
N
......
0 FIGURE 6-1 Rapport Page Speed de notre site
N
@
.....,
..c
Ol
Après ce premier test, nous obtenons une note très correcte de 74. Cette
ï::::
>-
0.
note est réduite principalement à cause de l'exploitation du cache naviga-
0
u teur. Nous retrouvons également des alertes sur la compression des fichiers
et la taille du fichier CSS.
6 - OPTIMISER LES PERFORMANCES

Ensuite, nous avons des problèmes concernant la taille de nos images et l'opti-
misation de leur poids. Nous reviendrons plus loin sur la façon d'améliorer cela.

YSlow
Our1L YSlow
Développé par Yahoo, ce plug-in est disponible sur la plupart des
navigateurs. Vous pouvez le télécharger sur le site :
~ http://developer.yahoo.com/yslow /

Cet outil est un peu plus complet que Page Speed et possède de nom-
breuses ressources pour vous aider à améliorer vos performances.
Effectuons donc un test sur notre site.

Grade a OV•r•ll performance score 8S Ruleset appliod: YSlow(V2) URL:

A!J...!lli FILTIR BY: CONTINT C6l 1 COOKIE !2l 1 CSS C6l 1 IMAGES !2l
1 !AVASCRIPT (4 ) 1 SERVER !6l » Twut IJ Share

A Mak• fowu HTTP roquosts


Grade A on Make fewer
F Use a Contont Dolivery Notwork (CON)
HTTP requests
A Avoid ompty src or hror

F Add Expires hoadors


De.cre.a.sing the
c Compress components with gzlp number or
components on ~
A Put CSS at top pag• roducos the
numbor of HTTP
A f>ut JavaScript at bouom requests re.quired
to rondu th•
A Avoïd CSS expressions pag•, resulUng in
faster page loads.
n / a Mak• JavaScript and CSS e.xtunal Sorne ways to
redu ce the
A Roduco ONS lookups number of
components
A Minify JavaScript and CSS include: combine
files, combine
A Avoid URL rodirocts multiple scripts
into one script,
Vl A Remov• duplicate Ja vaS<ript and CSS co mbino multiplo
Q) CSS files lnto on•
F Configure entity tags (ETa gs) style sheet, and
0 us• CSS Spritos
'- ~nd image mAps.
>- A Make AJAX u chuble
w
N A Use GET for AJAX roquosts • Read More
......
0 A Reduce th• numbor of DOM olemonts
N Copynght C) 2012 Y.ahoo! lnc. Ali rlghts
A Avood HTTP 404 (Not Fou nd) e rror rest.rvtd.
@
....., A Reduce cookie s ize
..c
Ol c Use cookie- free domains
ï::::
>- A Avoid AlphalmageLoador filtor
0.
0
u 8 Do not scale images ln HTML

A Mak• favicon s m all and cachubl•

FIGURE 6-2 Rapport YS/ow de notre site


CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Comme vous le constatez, le rapport est beaucoup plus détaillé. Ici, nous obte-
nons deux très mauvaises notes pour Expires headers et pour les Etags, qui
sont en fait deux systèmes de mise en cache. Nous allons les activer par la suite.
Concernant la mauvaise note pour le CON, je ne reviendrai pas dessus, car
cela n'est pas le sujet de ce livre. Il s'agit de mettre en place une architecture
serveur pour notre site, qui serait composée d'un second serveur, le CON, et
qui stockerait dessus tous nos fichiers dits statiques (images, fichiers CSS... ).

Gestion des tailles d'images


Une première chose toute simple pour éviter les problèmes de performance
est de diffuser les images à la bonne échelle et d'optimiser leur poids.

La taille des images


Souvenez-vous, quand nous avons mis en place les thumbnails, nous avons
défini que ces images auraient des dimensions de 100 px par 100 px. Or, il
se trouve qu'avant d'effectuer ces paramétrages, j'avais déjà chargé des
images de 150 px par 150 px. Donc, finalement, nous forçons l'affichage
des images à des dimensions qui leur sont inférieures.
Page Speed vous détaille précisément les images qui sont concernées.

n Diffuser des images mises à l'échelle


Les images suivantes sont redimensionnées dans le code HTML ou CSS. La
diffusion d'images mises à l'échelle pourrait libérer l S.2 Ko (réduction de 55%).

Vl • htto: //dev2.thibaut-baillet.com/wp -
Q)
content/uploads /2011/ 12 /cineshow-ISOxISO.jpg est redimensionné
0 dans le code HTML ou CSS et passe du format ISO x ISO au format 100 x
'-
>- 100. La diffus ion d'une i mage mise à l'échelle pourrait libérer 6.S Ko
w
(réduction de SS%).
N
...... • http://dev2.thibaut-baillet.com/wp-
0 content/uploads /2011/12/loqo wordpress-ISOxlSO.pnq est
N
redimensionné dans le code HTML ou CSS et passe du format ISO x ISO
@
....., au format 100 x 100. La diffusi on d'une image mise à l'échelle pourrait
..c libérer S.7 Ko (réduction de SS%) .
Ol
ï:::: • http://dev2.thibaut-baillet.com/wp-
>- content/uploads/2011/12/livre cuisine kawaii-lSOxlSO.jpq est
0.
0 redimensionné dans le code HTML ou CSS et passe du format lSO x ISO
u au format 100 x 100. La diffusion d'une image mise à l'échelle pourrait
libérer 3.0 Ko (réduction de SS%).

FIGURE 6-3 Rapport Page Speed pour l'affichage des images

88
6 - OPTIMISER LES PERFORMANCES

Nous devons recréer les images aux bonnes dimensions. Pour éviter de les
recharger une par une, nous allons utiliser le plug-in Regenerate Thumbnails.
Une fois que le plug-in est installé et activé, allez dans le menu
Outils>Regen. Thumbnails. Cliquez ensuite sur le bouton pour régénérer les
images.

Le poids des images


Les noms des fichiers d'images présentent des extensions différentes:
.png, . j pg, .gi f, etc. Chacune de ces extensions correspond à un algo-
rithme de compression, qui fait varier la qualité de rendu de l'image, mais
aussi son poids.
Il est possible que certaines de vos images puissent encore perdre du poids
sans que leur qualité visible soit altérée. Page Speed détecte ces images et
vous propose de télécharger une version améliorée.

Cl Optimiser les images

Si vous optimisez les images suivantes, vous pourriez réduire leur taille de
2.9 Ko (réduaion de 46%).

• Si vous compressez hnp:l/dev2.thibaut- baillet.com/wp-


content/uploads/2011/12/logo wordpress- lOOxlOO.png sans perte,
vous pourriez libérer 2.9 Ko (réduction de 46%). See optimized version.

F1cuRE 6- 4 Rapport Page Speed pour le poids des images

Je vais donc cliquer sur le lien optimized version et enregistrer la nouvelle


image. Pour la mise à jour sur notre site, je vais utiliser un logiciel FTP (File-
Vl
Q) Zila, Transmit, etc.), me connecter sur le serveur de mon site et remplacer
0
'-
>-
manuellement l'image qui se trouve dans le dossier / wp -cont e nt /
w
N u p load /2 011 / 1 2/.
.......
0
N Nous pouvons maintenant refaire un test avec Page Speed et ainsi, mesurer
@
....., l'impact des images dans la performance de notre site. Celui-ci a mainte-
..c
Ol
ï:::: nant un bon score de 82.
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Page Speed Score: 82/100 n


f) Exploiter la mise en cache du navigateur
A Autoriser la compression
A Réduire la taille des ressources CSS
O Spécifier un en- tête "Vary: Accept- Encoding"

FIGURE 6-s Rapport Page Speed après optimisation des images

Outils de compression
Pour optimiser notre site, l'un des moyens les plus efficaces est l'outil de
compression. Son but est de compresser les différents fichiers de notre
thème pour supprimer les caractères superflus de nos fichiers et ainsi
alléger leur poids.
Nous allons utiliser W3 Total Cache, que je vous ai fait installer dans le
chapitre 1. Cette extension est à la base utilisée pour gérer la mise en cache
des fichiers, mais comme nous allons le voir, elle possède aussi de nom-
breuses fonctionnalités comme la compression de fichier.
Commençons par activer le plug-in dans la rubrique Extensions de l'inter-
face d'administration de WordPress. Une fois activé, vous remarquez qu'un
onglet Performance a été ajouté dans la colonne de droite. Allez-y, puis
sélectionnez General Settings. Allez ensuite dans la section Minify et cochez
la case Enable pour activer la compression des fichiers. Vous pouvez laisser
le reste de la configuration par défaut, puis sauvegardez. Si vous obtenez
un message d'alerte sur fond jaune avec un bouton Empty the page cache,
Vl
QJ
alors cliquez sur ce bouton. Cela videra le cache actuel du site pour régé-
0
'-
w
>- nérer la page avec les fichiers modifiés.
N
,......
0
Actualisez votre site et regardez votre code source; vous pouvez voir que
N
@
le nom de votre fichier CSS a changé. Pour ma part, il se nomme:

.c 3b46cbf f. 0409f2 . CSS •
Ol
'i:
>-
a.
Si nous comparons l'ancien fichier au nouveau, nous sommes passés d'un
0
u poids de 3 Ko à 2 Ko. La réduction peut paraître minime, mais pour un site
plus important avec une feuille de style plus conséquente, le gain de poids
sera nettement plus considérable.
6 - OPTIMISER LES PERFORMANCES

Minify

Reduce load time by decreasing the size and number of C..?..?.. and~.~ files. Automatically
remove unncessary data from 9.~.. ~.~ . feed , page and post .t:f.T..~~..

Minify: g Enable
M1nificatJon can decrease file s1ze ol/::!..T.!!1.~.. .9.§§..
.~$.and feeds respective/y by-10°0 on average.

Minify mode: 0 Auto 0 Manual


Select manual mode co use fields on Che mm1fy
serongs cab to spec1fy files co be mmified,
otherw1se files w111 be mm1fied aucomat1cally. bue
w1ll not use the CON.

Minify Cache Method: Disk ..•


HTML minifier: Default ..•
JS minifier: JSMin (default) ..•
CSS minifier: Default .

Save all settings Empty cache

FIGURE 6-6 Réglages généraux pour la compression

Si vous avez regardé le code source, vous avez pu constater que le code
HTML de notre site n'est pas compressé alors que nous avons bien activé la
compression. Pour corriger cela, cliquez sur le lien Minify présent dans la
barre latérale en dessous de l'onglet Performance.
Vl
QJ

0
Nous avons maintenant accès à toute la configuration avancée de la com-
'-
w
>- pression de fichier. Allez dans la rubrique HTML & XML puis cochez les
N
,...... cases Enab/e et Une break remova/. Maintenant, tout le code de notre site a
0
N été compressé.
@

.c
Ol
'i:
>-
a.
0
u

91 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

HTML&XML

.~.~.~. minify settings: ~ Enable


0 lnline CSS minilication
l J lnline JS minillcation
0 Don~ minify leeds
~ Une break removal

FIGURE 6-7 Réglages avancés pour la compression

Mise en cache
L'une des techniques les plus importantes pour optimiser les performances
de notre site est la mise en cache. Son but est de stocker dans la mémoire
cache du navigateur ou du serveur, les fichiers qui composent notre site,
c'est-à-dire les fichiers HTML, CSS, les images et le contenu des articles pré-
sents dans notre base de données. Cela évite de faire des requêtes à notre
base de données à chaque fois qu'un internaute visite notre site. Donc,
l'utilisation de notre serveur est allégée.
Allez dans les réglages généraux du plug-in W3 Total cache. Cochez la case
Enable dans les sections Page Cache, Database Cache, Object Cache et
Browser Cache. Ensuite, sauvegardez les changements.
Allez ensuite dans la rubrique Browser Cache sous l'onglet Performance. Dans
la section générale, cochez les cases comme dans la capture ci-dessous.
Nous pouvons maintenant analyser les performances de notre site avec
nos deux outils.
Vl
Q)

0 Le site réussit les tests avec succès. La note n'est pas maximale car nous uti-
'-
w
>- 1isons un script externe hébergé chez Google. Nous n'avons pas la main sur
N
...... le fichier pour pouvoir l'optimiser, mais cela reste une bonne solution de
0
N
@
cibler un fichier présent sur un autre serveur.
.....,
..c
Ol
Vous retrouvez également ce problème avec tous les scripts pour les par-
ï::::
>- tages sur les réseaux sociaux. Le bouton like de Facebook ou bien celui de
0.
u
0
Twitter font très souvent chuter votre note sur les outils de test.
6 - OPTIMISER LES PERFORMANCES

General

Specify global browser cache policy.

g Set expires header


Set the expires header to encourage browser cachtng of files.

g Set cache control header


Set pragma and cache-contrai headers 10 encourage browser cachmg of files.

g Set entity tag (eîag)


Set the Etag header 10 encourage browser cachtng of files.

g Set W3 Total Cache header


Set th1s header to ass1st tn identJfytng optJm1zed files.

g Enable ~-TT~ (gz.ip) compression


Reduce the download time for text-based fifes.

FIGURE 6-8 Réglage du cache navigateur

Page Speed Page Speed Score: 96/100 9

YSlow Grade f.t.) Overall performance score 93

FIGURE 6-9 Résultat des tests de performance après la configuration

Les pratiques que nous venons de voir sont de bons réflexes à adopter,
mais il ne faut pas croire que cela constitue une solution miracle. Il existe
de nombreux autres facteurs qui influent sur les performances de votre
site, comme la puissance de votre serveur d'hébergement ou plus simple-
ment la qualité des connexions de l'internaute.
Vl
QJ

0
'--
>- AsrucE Fichier de configuration Boilerplate
w
N
,...... Si vous souhaitez pousser plus avant vos connaissances dans la confi-
0
N guration même de votre serveur, Boilerplate HTMLS met à disposi-
@ tion un fichier de configuration prêt à l'emploi avec de nombreuses

_c:
Ol explications pour optimiser vos performances:
'i:
>- ~ htmlSboilerplate.com
a.
0
u
Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Tester l'affichage
du site

L'une des tâches les plus ardues


avec le Web mobile consiste à tester
la qualité du rendu de son site sur
les différents smartphones. Divers
outils sont à disposition pour
nous aider dans ce travail.

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;:::: SOMMAIRE
>-
0.
0 ~ Simulateur en ligne
u
~ Les outils officiels
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Les simulateurs en ligne


li existe de nombreux simulateurs en ligne permettant de tester l'affichage
de son site comme quirktools.com ou resizemybrowser.com. Cela est très utile
pour jeter un rapide coup d'œil sur l'apparence de votre site, vérifier que le
viewport est bien réglé et qu'aucun élément ne dépasse. Cependant, le
rendu est loin d'être fidèle à la réalité. Généralement, les simulateurs se
contentent de créer un canvas avec une taille définie imitant les dimen-
sions d'un écran mobile. Or, la plus grande différence entre chaque mobile
est le moteur de rendu du navigateur qui diffère sur chaque appareil.
Comme nous l'avons expliqué pendant la création de notre feuille de style,
il y a des rendus propres à iOS qui modifient l'apparence des boutons de
soumission de formulaire ou bien de la taille du texte en mode paysage.
Tous ces petits détails ne sont pas pris en compte sur des simulateurs en
1igne, car le moteur de rendu est celui de votre navigateur de bureau.
La meilleure solution est donc d 'utiliser les logiciels de simulation fournis
par les différents fabricants de systèmes d'exploitation pour mobile ou,
bien évidemment, de tester sur chaque appareil physique.

Les outils officiels

LeSDK iOS
Le SDK iOS, gratuit, est disponible uniquement pour les utilisateurs de
Vl
(!)
Mac. li faut installer, via le Mac Store, l'application Xcode, qui est le logiciel
0
'--
>- de développement officiel d'Apple pour développer sous Mac OS ou iOS.
w
N
..--t Une fois le logiciel Xcode installé avec tous ses composants additionnels, vous
0
N
avez à votre disposition le simulateur iOS. Celui-ci se trouve dans le dossier
©
.......
..c
Deve l oper / Plate f orms / iPhoneS i mu l ator . p l a t eform/ Developer /
O'l
·;:::: Applicat i ons .
>-
0.

u
0 Vous pouvez également le trouver en tapant « Simulateur IOS » dans le
moteur de recherche Spotlight de Mac OS.
7 - TESTER L'AFFICHAGE DU SITE

Une fois lancé, vous avez la possibilité de modifier les préférences du simu-
lateur dans le menu Matériel et de définir si vous voulez un iPad, un iPhone
ou un iPhone avec écran Retina. Ensuite, ouvrez l'application Safari et
tapez l'URL de votre site pour tester le rendu.

L'émulateur Android
Pour obtenir l'émulateur Android, il faut d'abord télécharger le SDK
Android sur le site officiel developer.android.com/sdk. Téléchargez la version
du SDK correspondant à votre ordinateur (Windows, Mac OS ou Linux).
Ensuite, dézippez l'archive téléchargée dans le dossier que vous souhaitez.

[9 0 Edit Android Virtual Device (AVD)

Name: Androld-test

Target: [ Android 4.0.3 - API Level 15 :1

CPU/ABI: ARM (armeab1-v7al .


SD Card:
0 Size: ( MiB ! j
Q File: Browse ...

Snapshot:
0 Enabled

Skin:
0 Built-in: ( WVGA800 :1
Q Resolutlon: X

Hardware:
Propeny Value
I New... 1
Abstracted LCD density 240
Vl
QJ Max VM application heë 48 Ot!letl!
0 Device ram size 512
'-
>-
w
N
,......
0 Ovemde the ex1stlng AVD with the same name
N
@

.c
Ol
'i:
>-
a.
0
u EditAVD Cancel

FIGURE 7-1 Création d'un émulateur Android


CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Vous devez maintenant avoir trois dossiers : add- o n, platfo r ms et t oo ls.


Ouvrez ce dernier et double-cliquez sur le fichier nommé Android (sur
Windows, cliquez directement sur SDK Manager). L'application Android SDK
Manager va alors se lancer. Elle vous permet de télécharger les différents
composants du SDK Android en fonction de la version que vous souhaitez.
Je vous conseille de télécharger au minimum les versions 3 et 4 de Android,
pour tester votre site avec plusieurs versions possibles d'Android.
Allez ensuite dans le menu tools et cliquez sur Manage AVDs. À partir de
cette fenêtre, vous allez construire votre propre simulateur. Cliquez sur
New puis, dans la fenêtre suivante, donnez un nom à votre simulateur et
choisissez la version d'Android que vous souhaitez utiliser.

Opera Mini
Opera mobile est un navigateur indépendant que nous pouvons utiliser
sur différents systèmes d'exploitation comme iOS, Android, BlackBerry ou
Windows Mobile.
li existe donc bon nombre de versions différentes du navigateur suscepti-
bles d'être testées. Opera propose un ém ulateur de son navigateur.

OUTIL Émulateur d'Opera


Vous pouvez télécharger l'émulateur à l'adresse suivante:
~ http://goo.gl/2ujUS

L'un des grands points forts de ce simulateur est qu'il permet de choisir le
type de modèle de smartphone que vous souhaitez utiliser. Vous retrou-
Vl
(!)
verez donc la plupart des téléphones sous Android. Attention toutefois :
0

w
1....
>- l'émulateur ne prend pas en compte le système d'exploitation du mobile,
N
..--t
mais juste la taille de son écran. Cela est plus utile pour vérifier que votre
0
N site s'adapte bien à toutes les tailles d'écran qui existent.
©
.......
..c
O'l
·;:::: REMARQUE Simulateur BlackBerry
>-
0.
0
Il existe des simulateurs pour BlackBerry disponibles sur le site
u http://goo.gl/TiHNL.
7 - TESTER L'AFFICHAGE DU SITE

() () Opera Mobile Emulator


Profile

Custom
Samsung Galaxy S
Resolution 1 360x640 Portrait ! l
Samsung Galaxy S Il Add J l.____
Re_m
_o_v_e_...J
HTC Wildfire
LG Optimus One
Motorola Droid X Pixel Density 1 229 ! J
SEMC Xperia Xl O
SEMC Xperia Ray Add J [ Remove J
HTC Desire
HTC Tattoo
Input [ Touch
HTC Hero
Arguments
Update Remove

Launch Help

FIGURE 7-2 Création d'un simulateur Opera Mobile

Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Les spécificités iOS

Le système d'exploitation mobile


de Apple est l'un des plus avancés
qui existe et possède de nombreuses
fonctionnalités qui lui sont propres.
Nous allons étudier comment exploiter
au maximum ses possibilités.

Vl
(!)

0
..__
w
>-
N
..--t
0
N
© SOMMAIRE
.......
..c
O'l
·;:::: ~ Créer son icône de bureau
>-
0.
0
~ L'écran de démarrage
u
~ Faire disparaître la barre d'adresse
~ Le mode web application
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Créer son icône de bureau


Comme pour une application iOS, il est possible d'ajouter un raccourci
vers votre site web sur le Dash board de votre iPhone ou iPad.
Pour cela, il existe une balise à insérer dans la balise <h ead> de votre site.
Nous allons l'utiliser plusieurs fois, car il existe plusieurs icônes différentes:
un raccourci pour le iPhone avec écran Retina, un pour iPad et un pour les
anciens iPhone, les iPod touch et téléphones Android.

iPhone 4 iPhone iPad


(1 4px) (57px) (7~px)

FIGURE 8-1 Les différentsf ormats d'icône

Ajout des icônes

<link rel = "apple-touch-icon-precomposed "


sizes= " 1 14x114 " href= "images/ i con-retin a . png " >
<l i nk re l=" apple- t ouch-icon-precomposed "
sizes= " 72x72 " href =" images/icon-ipad.pn g " >
<link rel = "app l e-touch-icon-precomposed "
href= "images/icon . png">
Vl
Q)

0
'-
>- AsrucE Tooltips
w
N Il existe des bibliothèques qui affichent une tooltip insistant pour
......
0
N
ajouter un site sur son écran d'accueil et donc activer le mode wep
@ app. Une des bibliothèques les plus connues est celle de cubiq:
.....,
..c ~ http://goo.gl/OOBcL
Ol
ï::::
>-
0.
0
u

l 102
8 - LES SPÉCIFICITÉS 10S

Faire disparaÎtre la barre d'adresse


À l'affichage du site, une bonne partie de l'écran est occupée par la barre
d'adresse du navigateur Safari, obligeant notre internaute à faire défiler
rapidement ses pages.
li existe une technique en JavaScript qui force le défilement (scroll) au char-
gement de la page et donc fait disparaître la barre d'adresse.
li faut ajouter le code JavaScript en attribut de la balise <b o d y>.

Défilement (scroll) en JavaScript

1 <b o d y on l oad = " wi n d ow . scrol l To ( O, 1) 11


>

Le code ci-dessus est très simple. La méthode o n load permet d'exécuter le


code une fois que la page du site est chargée. Ensuite, nous appliquons la
méthode s c ro 1 1 To sur notre document, en 1ui demandant de faire un
déplacement vertical de 1 pixel. Le simple fait de simuler le défilement,
même pour un seul pixel, force Safari à faire disparaît re sa barre d'adresse.

Le mode web application


Dans l'univers du Web, il y a ce qu'on appelle les applications web, ou
web app. Elles sont équivalentes aux applications dites natives, mais vous
les trouvez sur les différents magasins en ligne (stores) des éditeurs de logi-
ciels. La grande différence est que l'application web est développée avec
Vl
des langages tels que HTMLS, CSS3 et JavaScript.
(!)

0
'-- Je vous le précise tout de suite, il est inutile d'utiliser le mode web applica-
w
>-
N
tion sur votre site WordPress. C'est un site web et non une application web.
..--t
0
N Pourtant, je vous le présente quand même, car cela peut vous être un jour
© très utile.
.......
..c
O'l
·;:::: li y a deux choses importantes à savoir sur l'intérêt de ce mode.
>-
0.

u
0 • 11 fait disparaître le navigateur Safari.
· L'utilisateur doit ajouter le site sur son Dashboard pour l'activer.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Carrier 9 3:43 PM
Uvre Eyrolles

Accueil

A propos

Accueil Contact
A propos Lancement du livre !
Contact Article écrit par Thibaut, le
27 décembre 201 1, Aucun
Lancement du livre! commentaire
Article écrit par Thibaut, le Morbi leo risus, porta ac
27 décembre 2011 , Aucun consectetur ac, vestibulum
commentaire at eros. lnteger posuere erat a ante
Morbi leo risus, porta ac venenatis dapibus posuere velit aliquet. Duis
consectetur ac, vestibulum mollis, est non commodo luctus, nisi erat
at eros. lnteger posuere erat a ante porttitor ligula, eget lacinia odio sem nec elit.
venenatis dapibus posuere velit aliquet. Duis Lorem ipsum doler sit amet, consectetur
mollis, est non commodo luctus, nisi erat adipiscing elit. Donec sed odio dui. Donec id
porttitor ligula, eget lacinia odio sem nec elit. elit non mi porta gravida [... ]
Lorem ipsum dolor sit amet, consectetur
Lire la suite

Chaoitre 3
Mode web app off Mode web app on

FIGURE 8-2 Comparaison avec ou sans le mode web app

Le problème que nous allons rencontrer en activant ce mode sur notre site est
que dès qu'on va cliquer sur un lien, cela va ouvrir le site sur Safari. Pour remé-
dier à ce problème, il faudrait développer tout le site avec la technologie Ajax.

Vl
AsrucE jQuery mobile
QJ

0 Le fram ewo rk jQuery mo bile fon ctio nne e nti èrement en Ajax, il
'-
>- peut do nc être très pratique de l'utiliser po ur créer une web app.
w
N
,......
0
N
@ Pour activer ce mode, il suffit d'ajouter une petite ligne dans la balise
<h ead> du site.

.c
Ol
'i:
>-
a.
0
u

l 104
8 - LES SPÉCIFICITÉS 10S

Modewebapp

<met a name= 11 apple-mobile -web-app-capable 11


content="yes">
1

L'écran de démarrage
Si vous utilisez le mode web app, il y a une fonctionnalité très sympathique à
utiliser: l'écran de démarrage. C'est l'image qui va être affichée pendant le
chargement du site, quand vous allez le lancer via le raccourci du Dashboard.
Pour l'utiliser, il suffit d'ajouter une balise <link> dans le <head>.

Utilisation d'un écran de démarrage

<link rel= "apple-touch-s tartup-image" href= "images /


s tartup.png" >
1
Le seul inconvénient à cela est que Apple n'indique pas dans sa documen-
tation comment définir une image pour l'iPhone Retina ou bien le mode
portrait.

ALLER PLUS LOIN Écran de démarrage et media queries


Il existe une méthode permettant de contourner ce problème en
utilisant les media queries. Si cela vous intéresse, tout est expliqué à
l'adresse suivante :
~ http://goo.gl/J48ga
Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u
Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u
Cas pratique: adapter
facilement un thème

existant

Si vous avez déjà un site WordPress


avec un thème qui n'est pas adapté
au mobile, vous pouvez toujours
en modifier le code pour rendre
extensible votre présentation. C'est ce
que nous allons mettre en pratique.

Vl
(!)

0
..__
w
>-
N
..--t
0
N
© SOMMAIRE
.......
..c
O'l ~ Utilisation du thème par défaut
·;::::
>-
0. ~ Étude de la structure
0
u
~ Adaptation du thème

~ Utiliser plusieurs thèmes


CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Utilisation du thème par défaut


Nous allons travailler ici sur un cas pratique. Partons du principe que vous
avez déjà un site WordPress utilisant un thème qui n'a pas été pensé pour
mobile. Nous allons voir comment rapidement adapter ce thème en utili~
sant la technique des media queries en CSS3.
Nous allons utiliser pour l'exemple le thème Twenty Ten qui est installé par
défaut avec WordPress. Allez donc dans la rubrique Apparence> Thèmes et
activez Twenty Ten.

Carrier ":;;- 11 :00 AM


l ivre Eyroles

Lancement du llvre 1

Morin lto RSU$, porta .ac cuaic~tur- ac. \'t'Shbulum al ..,....'*"


·~·
..
f:'.rlllll. lnleg.r.r pl*urtt cr.tt a tmtr '~nal1!C da:pibull
_..,,.., •dh 11.hqud. OW. moDb. C>t non Lvmmuclo
luL1m~ nu.i rrat port l1tor Lgub_ ~d lacinia odJo Rm
nrc cliL l.ort'.m 1prom dolur .ut miel, c:uns«tetur
adipbd ng ebl. O..n.. .cd ud.. duL O..nec id dit non m 1
J>Orta gni\·id..t Al rg_d mt!lw.. Nutbm Cfl'-IS n1ui r~ ._..... _.-.
·w-..........
urn:s mob• omatt\-d t.u lm Cura.b.tu:r bl:a.ndit trmpui1

_
pürtutut. NuJl:un qws .,.,.. ~t'I u nu m..tbs omlu" ,.,1
ou leo. Crus ju•to odiu, d~pabus o1< (ilOlasu m. <g..U.
.....--
tgcl qu.am. Anmn l:u:mut bibendwn nullu ..d
......
.. ................
cun>«1<1ur. Sull;am Ml dolur 1d mbh uhrioes ' "liicula
ut id rhL DuDr.c: ulWnmrptt nulLa oon mcl\1$ .auct.ur
fnni;l lb.
·--
Morb1 ln> nsus. puru.. K nml«"trtu.r ac. \·cstibufum Jill
~. f nlc~u po1ru~ ~r.11 a :mtr ..~nati11 d.ap1bui
J>U"l.l«!n! nilit a.bqurt... Ows mollU:. et nun wmmodu
1uL1UJ. llW t!'r:tl purt.titor lagul:t.. ~d. IJOni.a ud.H> smi
nte d i L luft'm i~-um dolor al umrt, to.Mt<ldur
achpi1ci~ rbl. ~Hl« M!d otho dua. Dullft: 1d dit noo m1
Vl
QJ

0
1....
>-
w
N
,......
0 FIGURE 9-1 Thème Twenty Ten sur iPhone
N
@

..c
Ol
Comme vous pouvez le constater, ce thème n'est pas du tout conçu pour
·;::
>-
a.
les terminaux mobiles. Nous allons donc rapidement et simplement
0
u l'adapter.

l 108
9 - CAS PRATIQUE ADAPTER FACILEMENT UN THÈME EXISTANT

,
Etude de la structure
Le thème est très complet. On retrouve plus d'une vingtaine de templates,
plusieurs fichiers CSS, ainsi qu'un dossier de traduction du thème.
Le fichier qui nous intéresse est le styl e . c ss. Avant de le modifier pour
adapter notre thème, nous devons analyser la structure du site et com-
prendre quels éléments possèdent des largeurs statiques à rendre dyna-
mique.
Nous n'allons pas nous plonger bêtement dans les milliers de lignes de
code. Utilisons des outils de développement tels que l'inspecteur d'élé-
ment sous Chrome ou bien Firebug sous Firefox.
Grâce à ces outils, nous allons survoler le site et détecter les conteneurs
que nous devons changer.

Livre Eyrolles

Lancement du livre !

Vl
QJ

0 r. 1 EJements t ~ Resource.s 0 Necwork ~ Scripts (! Timeline Console


'- M .1tched CS..~ Ru "'>
>-
w T <ht11l d1r• "ltr" lang •" fr- FR" > • ed1a "all"
.tw rapper {
http · ll dev2 th1bayt - bai tt ct. c g11/
stv t c çss ·l?l
• <head>- </heaid>
N
,...... T <bod y class • " home blog l ogged-in ad•in-bar"> • background : whit e;
• a r gin-top : 20p x ;
0 <!- ""'rappe r - > .. padding : e 29px;
N <sc r ipt type=-" text/javascript " s r c•" htto; //dev2. th1baut-baittct. CO!/wp- 1nc\udcs/f s/ad11in- }
bar i s?ver-..:21111138">< /scr ipt>
@ <script type•" text/javascript" src•" bttp· //dcyZ thibayt-ba Hlct co•/)!'p-contcnttpluqins/
contact- for•- 1/iqucry. for•. h1yer•2. 52"></script >

<scnpt type• "te-x t /J•h•ascript" src• " t'lttp : //dcv2. tt'libau t -ba1 t ltt. co•lwp-contt:n t tplugins/
.c contact- fgrJ1- 7tscriots. i slyer•l . B. 2.1 "></script>
Ol .,. <div id•"wpad11inbar" ctass r ote•" navigation">-</ diY>
'i: .. <div id•"wi ndow-rc5izc:r-too\tio" stv\c:•"d.uohv: none: ">. </ div>
>-
a.
u
0
FIGURE 9-2 Analyse du CSS actuel
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Dans la colonne de droite, le débogueur de Chrome nous affiche de nom-


breux éléments ayant une taille fixe à 940 px. 11 en existe sûrement
d'autres ; il faut donc faire un vrai travail de chercheur et trouver les autres
éléments bloquants au fur et à mesure de l'adaptation du thème.

Adaptation du thème
Maintenant que nous avons repéré les éléments gênants de notre thème, il
nous faut les modifier. Cependant, nous voulons limiter nos modifications
aux seuls internautes utilisant un mobile ; pour les autres, le code doit
rester inchangé. Nous allons donc utiliser les media queries.
Cette technique CSS3 permet d 'ajouter une couche de CSS uniquement
pour des tailles d'écran que nous aurons définies.
Nous allons donc cibler tous les navigateurs dont la taille d'écran est infé-
rieure à 960 px, soit la largeur du thème par défaut.

Media queries

@med i a (max-widt h : 960px) {


//Code CSS pour les mobiles
}

Nous allons ajouter dans notre me d i a q u er i es, les codes CSS pour modi-
fier les blocs ayant une largeur fixe et ainsi avoir un site aux éléments
extensibles.
Vl En plus de ceux que nous avons déjà repérés, il existe de nombreux élé-
(!)

0 ments qui risquent de poser problème, comme les images ou les formu-
'--
w
>- laires. Nous allons donc utiliser un reset CSS spécialement conçu pour
N
..--t
0
mobile créé par Raphaël Goetter.
N
© Toutefois, avant de mettre en place ce reset, il faut régler le viewport du
.......
..c
O'l
site. Nous allons ajouter le code suivant dans la balise <head> .
·;::::
>-
0.
0 Réglage du viewport
u

1 <me t a name= 11 viewport 11 c ont ent= 11 wi d th=d e v i ce-wi d t h 11 >

l 110
9 - CAS PRATIQUE ADAPTER FACILEMENT UN THÈME EXISTANT

Maintenant, nous pouvons commencer notre CSS avec le reset mobile.

Reset CSS pour mobile

/* fixer une largeur maximale de 100% aux éléments


potentiellement problématiques */
img, table, td, blockquote, code, pre, textarea,
input, iframe, abject, ernbed, video {
max -width: 100%;
}
/* conserver le ratio des images et empêcher les
débordements de boîtes dus aux border ou padding */
img {
height: auto;
width: auto;
-webkit - box -s izing: border - box;
- moz - box - sizing: border - box;
}
/* gestion des mots longs */
textarea, table, td, th, code, pre, samp {
/* passage à la ligne forcé */
word - wrap: break-wo rd;
/* césure propre */
-webkit-hyphens: auto;
-moz-hyphens: auto ;
hyphens: auto;
}
/* passage à la ligne spécifique pour les éléments à
châsse fixe */
code, pre, samp {
Vl
white - space: pre -wrap ;
(!)

0
}
'--
w
>- .hide mobile {
N
..--t
display: none !important;
0
N }
©
.......
..c Le reset est commenté et facile à comprendre. Nous allons donc nous atta-
O'l
·;::::
>-
0. quer au bloc ayant des largeurs fixes.
0
u

111 1
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Mises en place de largeur automatique

body, #access, #access .menu-header, div.menu,


#colophon, #branding, #main, #wrapper, #container,
#content, #site-info, #site-title {
width: auto;
margin: auto;
padding: auto;
}

Comme vous pouvez le voir, le site s'adapte très bien. En revanche, nous
rencontrons un problème au niveau du fond du menu. Il suffit de changer
sa largeur à 100 % au lieu de Auto.

,Carrier 9 11 :56 AM

Livre Eyrolles
Un site utilisant Wordl'ress

Lancement du livre !
Publie le 27 décembre 2011 par Thibaut

Morbi leo risus, porta ac consectetur


ac, vestibulum at eros. Integer posuere
erat a ante venenatis dapibus posuere
Vl
Q)
velit aliquet. Duis mollis, est non
0
'-
>-
w
N
......
0
N
@ FIGURE 9-3 Affichage avec le reset
.....,
..c
Ol
ï::::
>- Largeur du menu
0.
0
u
# a cce ss{
width: 100%;
}

l 112
9 - CAS PRATIQUE ADAPTER FACILEMENT UN THÈME EXISTANT

Nous avons presque fini d'adapter notre site. Dans le reset CSS, vous avez pu
remarquer la présence d'une classe nommée . hide_mobile ; elle est très
utile pour faire disparaître des éléments non indispensables ou gênant l'utili-
sation sur mobile. Vous pouvez donc l'appliquer à tout élément que vous
voulez faire disparaître. Pour ma part, je vais l'appliquer à la barre latérale.
Je vais donc modifier le fichier sidebar. php et ajouter cette classe.

Faire disparaitre la barre latérale

//Ligne 11
<div id="primary" class="widget-area hide mobile"
role="complementary" >
//Ligne 50
<div id="secondary" class="widget-area hide mobile"
role="complementary" >

Carrfer 9 12:11 PM

Livre Eyrol les


Un site utilisant Wordl'ress

Lancement du livre !
Vl Publie le 27 decembre 2011 par Thibaut
Q)

0
'- Morbi leo risus, porta ac consectetur
>-
w ac, vestibulum at eros. Integer posuere
N
...... erat a ante venenatis dapibus posuere
0
N
velit aliquet. Duis mollis, est non
@
.....,
..c
Ol
ï::::
>-
0.
u
0
FIGURE 9-4 Affichage de Twenty Ten adapté au mobile
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Le code final

®media (max-width: 960px ) {


img, tab le, td, blockquote, code, pre, textarea,
input, iframe, abject, embed , video {
max -width : 100 %;
}
img {
height: auto; width: auto;
-webkit-box-sizing: border-box;
-moz-box-si zi ng: border-box;
}
textarea, table, td, th, code, pre, samp {
word-wrap: break -wo rd;
-webkit -hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
code, pre, samp {
white-space: pre-wrap;
}
. hide_mobile {
disp l ay: none !important;
}
body, #access, #access .menu -header, d i v .menu,
#colophon, #branding, #main, #wrapper, #container,
#content, #s i te-info, #site-t i t l e
{
width: auto;
margin: auto;
Vl padding: auto;
(!)

0
}
'--
w
>- #access{
N
..--t
width : 100%;
0
N }
© }
.......
..c
O'l
·;::::
>-
0.
0
u

l 114
9 - CAS PRATIQUE ADAPTER FACILEMENT UN THÈME EXISTANT

Utiliser plusieurs thèmes


Nous avons donc utilisé un thème existant pour l'adapter rapidement avec
les media queries. Cela n'est pas forcément la solution la plus simple et la
plus rapide. De plus, ce n'est pas nous qui avons conçu le thème à la base,
donc celui-ci n'est pas forcement pensé et optimisé pour le mobile.
Il existe une autre solution pour gérer ces thèmes sous WordPress. Elle con-
siste à définir un thème classique pour les ordinateurs de bureau et un
thème pour mobile ou tablette. Cette solution a le mérite de pouvoir
mettre facilement en place des thèmes uniquement pour mobile sans
perdre en performance ni toucher à votre thème classique.
Pour cela, il suffit d'installer et activer le plug-in Mobile Theme Switcher. Il
vous permettra de définir un thème en fonction du périphérique de votre
visiteur. Vous ciblerez l'i Phone et l'iPod touch, les téléphones Android, ainsi
que l'iPad.

Mobile Theme Switcher Plugin


Llke this plugin? Help support it bv donatinq to the developer. Donations help cover the cost of
mafntafnfng and developfng new ptugln fearures. Every donation ls apprecfatedl

IPhone/IPod Touch Theme : Mobile ....


IPadTheme TwentyTen ....
Android Theme Mobile ...

Enregistrer les modifications


Vl
Q)

e FIGURE 9-s Le plug-in Mobile Theme Switcher


>-
w
N
.......
0
N
@
.....,
..c
Ol
ï::::
>-
0.
0
u
(/)
Q)

0
L.
>-
w
N
r-l
0
N
@
......
..c
Ol
'ï::
>-
0..
0
u
Conclusion

La création d'un site mobile avec WordPress met en perspective les nom-
breuses problématiques du Web mobile: la performance, l'ergonomie et la
compatibilité.
À travers ce livre, vous avez pu à la fois maîtriser l'intégration mobile et la
création de thèmes WordPress. Vous pouvez désormais dissocier ces deux
compétences puisque vous avez les connaissances pour faire votre propre
site avec WordPress ou bien faire un site mobile avec un autre CMS.
Le site que nous avons conçu tout au long de ce livre est dédié à l'usage
mobile, mais comme vous l'avez vu dans le chapitre précédent, la présenta-
tion adaptative (responsive design) est une solution qui gagne à être
connue. L'usage d'un site dédié au mobile peut bien sûr être une bonne
solution, cependant je la préconise plus pour une solution sur mesure, où
l'expérience utilisateur recherchée est profondément différente entre le
mobile et l'ordinateur de bureau.
Vl
(!)
li existe encore d'autres techniques pour faire du Web mobile avec l'aide de
0
'--
>- framework tels que jQuery mobile ou Sencha Touch. Il faut différencier un
w
N
..--t
site mobile classique d'une application web mobile, dont le but est pure-
0
N ment applicatif. Ces deux frameworks sont dans leur nature orientés applica-
© tion. Ils permettent de mettre en place une interface et une conception pro-
.......
..c
O'l
·;::::
ches des applications que vous pouvez retrouver sur l'Apple Store. Vous
>-
0. pouvez bien sûr choisir cette solution. Néanmoins, je préconise de garder
0
u une continuité graphique entre la version mobile et la version classique.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Maintenant, c'est à vous de penser mobile sur vos projets. Le mobile est le
Web de demain et, par conséquent, il doit être pris en compte dès la phase
de réflexion d'un projet web.

Ouverture sur le design adaptatif


Le design adaptatif (responsive design) est une méthode qui consiste à créer
une présentation qui s'adapte à l'écran du périphérique utilisé à partir
d'une URL unique.
Ainsi, vous pouvez réaliser une présentation unique qui va s'adapter aux
télévisions, ordinateurs, tablettes et smartphones. Le concepteur doit bien
sûr penser comment les éléments doivent être disposés en fonction du
périphérique.

Cuisine Kawai, un site au design adaptatif

l{l Ensuite, au niveau technique, il va falloir utiliser les media queries. Cette
e>- propriété CSS3 modifie la CSS en fonction de nombreux paramètres
w
N
comme la taille de l'écran ou la résolution.
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u

l 11s
CONCLUSION

Cette technique présente deux grands avantages:


• une URL unique donc un référencement optimisé;
• un seul site et une seule feuille CSS à maintenir pour votre site.

POUR ALLER PLUS LOIN


W Ethan Marcotte, Responsive web design, A Book Apart,
Eyrolles 2011

Le framework jQuery mobile


jQuery mobile (http://jquerymobile.com/) est un framework d'interface
mobile à suivre pour ceux qui veulent continuer à se perfectionner. Celui-ci a
été créé par l'équipe créatrice de la célèbre bibliothèque JavaScript jQuery.
Ce framework que j'ai utilisé pour faire mon propre site mobile (http://thi-
baut-baillet.com), propose une interface proche des applications iPhone,
avec des thèmes de couleurs fournies par défaut.
Il propose depuis peu une application qui s'appelle ThemeRoller (http://
jquerymobile.com/themeroller/) pour créer son propre thème jQuery mobile.
L'un des grands avantages de ce framework est qu'il est compatible avec de
très nombreux mobiles comme iOS, Android, Windows Phone et BlackBerry.
Autre point très intéressant, il fonctionne entièrement en Ajax, les pages déjà
visitées sont mises en cache et donc les performances sont améliorées.

POUR ALLER PLUS LOIN


Vl
(!)
W Éric Sarrion, jQuery mobile, Eyrolles 2012
0
'--
w
>-
N
..--t C'est une bonne alternative qui a le mérite d'être très simple à mettre en place.
0
N
©
.......
..c
O'l
·;:::
>-
0.
0
u
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Carrier ';;::' 11 :33 AM

Accueil P,__o rtf... Freel... Blog Contact

Thibaut Baillet
Développeur web et mobile
HTMLS

C'est mon site personnel sur lequel vous


êtes actuellement.
Sortie en novembre 201 O, c'est la 3e
version que j'ai réalisée.
Un tel projet fût pour moi de nature
pédagogique, le but étant de m'auto-
former dans le développement web. le
design ou encore l'optimisation du
référencement naturel.

http://thibaut-baillet.com avec jQuery mobile

Vl
QJ

0
'-
>-
w
N
,......
0
N
@

.c
Ol
'i:
>-
a.
0
u

l 120
Installation rapide de
WordPress

La première chose à faire est de télécharger l'archive du site WordPress. Elle


est disponible en anglais sur le site officiel http://wordpress.org/ ou bien en
français sur le site de la communauté française de WordPress http://
www.wordpress-fr.net/.
Une fois téléchargée, vous pouvez la dézipper et placer les fichiers sur votre
serveur web.
Maintenant, accédez à l'URL de votre site via le navigateur. Vous devez
obtenir une pop-in WordPress qui vous demande de Créer le fichier de con-
figuration.

Je ne 1rouve pas vot re f ichier wp - conf i. g. php. J'en al besoin avant de lancer l' lnstallallon .
Besoin d'aide ? En voici.

Vous pouvez créer un fichier wp-confi.g. php à l 'aide de noire Interface Web, mals ça ne marche pas pour routes les
Vl
configu ralions de serveur. La mélhode la plus sûre reste de créer le fichier à la main.
QJ

0
'- Créer le fichier de configuration
>-
w
N
,......
0
N
@ Début de /'installation de WordPress

..c
Ol
'i:
>-
a. Cliquez sur le bouton de création, puis sur le bouton Allons-y. Nous arri-
0
u vons maintenant à l'étape la plus importante de l'installation : la configu-
ration.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

Les informations demandées vous sont fournies par votre hébergeur, lors
de l'achat de votre hébergement. Le seul champ où vous êtes libre d'écrire
ce que vous voulez est le préfixe de table. Par défaut, ce champ est rempli
par wp_. Je vous conseille de le changer par nomdusite_wp_, ce qui évitera
d'éventuels conflits si vous installez plusieurs WordPress sur votre serveur,
ou bien si vous migrez un jour vers un autre hébergement.

œJlwoRDPRESS
Entru cl-dessous les détails de connexion à votre base de données. SI vous ne les connaissez pas avec certitude,
contactez votre hébergeur.

Nom d e la base de Le nom de la base dans laquelle vous voulu


wordpress Installer WP.
données

Identifiant username Votre Identifiant MySQL.

Mot de passe password ... et votre mot de passe MySQL.

Hôte de la base de SI localhost ne marche pas, vous devrez


loca lhost demander cette Information + votre ~bergeur.
données

SI vous voulez Installer plusieurs blogs WordPress


Préfi xe d e t able
sitetest_wp_ dans une même base de données, modifiez ce
champ.

Valider

Vl
QJ
Configuration de WordPress
0
1....
>-
w Une fois validé, si tout s'est bien passé, vous arrivez sur une page de bien-
N
,......
0 venue, qui vous demande le nom de votre site, votre adresse électronique
N
@ et vos identifiants pour créer votre compte d'administrateur.

..c
Ol
·;::
>-
a.
0
u

l 122
INSTALLATION RAPIDE DE WORDPRESS

Titre du site Sit e mobile

Identifiant t hibaut
Les Identifiants doivent contenir uniquement des caractères alphanumérique, espaces, tiret bas,
tiret, points et le symbole @.

Mot de passe, deux ••••


fols
Un mot de passe vous
••••
sera automatiquement
généré si vous laissez Faible
ce champ vide.
Conseil : votre mot de passe devrait faire au moins 7 caractères de long. Pour le rendre plus sûr,
utilisez un mélange de majuscules, de minuscules, de chiffres e t de symboles comme 1• 7 S
"1\ & ).

Votre adresse de mail@exemple.com


messagerie
Vérifiez bien cette adresse de messagerie avant de continuer.

Informations de votre site

Il ne vous reste plus qu'à cliquer sur Installer WordPress et le processus est
fini. Vous pouvez maintenant vous connecter au back-office avec vos iden-
tifiants ou bien accéder au site par défaut.

Vl
Q)

0
'-
>-
w
N
.......
0
N
@
.....,
..c
Ol
ï::::
>-
0.
0
u
(/)
Q)

0
L.
>-
w
N
r-l
0
N
@
......
..c
Ol
'ï::
>-
0..
0
u
Ressources

Liens francophones
· Site officiel du livre (http://thibaut-baillet.com/livre/)
Il regroupe les informations essentielles liées au livre afin de prolonger
l'expérience de la lecture. Vous y trouverez des extraits, des informa-
tions complémentaires et vous pourrez y laisser votre avis.
· Le Site du Zéro (http://www.siteduzero.com/)
Ce site m'a fait découvrir ma vocation. Vous y trouverez des tutoriels
complets sur HTMLS et CSS3, PHP ou encore sur le développement
iPhone et iPad.
· Alsacréations (http://www.alsacreations.com/)
C'est un site communautaire dédié à l'apprentissage des standards du
Web. Vous y trouverez une mine d'informations à travers le blog et le
Vl
(!)
forum.
0
'--
Ergophile (http://www.ergophile.com /)
w
>-
N
Ce blog riche d'informations est dédié à l'ergonomie web et mobile. Il
..--t
0
N
est écrit par Jacinthe Busson, ancienne directrice artistique de Deezer.
©
.......
· Bonnes pratiques du Web mobile (http://goo.gl/fYJZ1 )
..c
O'l
·;::::
j'ai eu la chance d'avoir ce pense-bête entre mes mains. Il est tout
>-
0. simplement indispensable pour se rappeler les bonnes pratiques à
0
u mettre en place dans le Web mobile.
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

· Fran6art, le blog (http://www.fran6art.com/)


Ce site propose un tutoriel complet pour créer un thème WordPress de
AàZ.

Liens anglophones
· Mobile Boilerplate (http://htmlSboilerplate.com/mobile)
Je suis un grand fan de HTMLS Boilerplate, que j'utilise dans tous mes
projets web. Il faut savoir qu'il existe une seconde version dédiée au
mobile, qui vous donne une base solide pour commencer le dévelop-
pement de votre site.
· jQuery Mobile (http://jquerymobile.com/)
Ce framework permet de déployer rapidement et efficacement un site
mobile avec une interface proche des applications iOS. Il a le grand
avantage d'être compatible avec de très nombreux smartphones.
· Sencha Touch (http://www.sencha.com/products/touch)
Le framework de Sencha est assez compliqué à aborder, car il est entiè-
rement codé en JavaScript. Cependant, le rendu est superbe et proche
d'une application native.
· Cubiq (http://cubiq.org/)
C'est le site de Matteo Spinelli, un développeur qui a mis au point de
nombreux projets pour le mobile susceptibles de vous rendre de
grands services.
· Media Queries (http://mediaqueri.es)
Étant favorable à une conception adaptative de tous les projets web, je
Vl
(!)
ne peux que vous recommander ce site pour vous inspirer. Il regroupe
0
'--
des centaines de sites créés selon ce modèle.
w
>-
N
· jQuery Mobile Gallery (http://www.jqmgallery.com/)
..--t
0
N
C'est une galerie regroupant les plus beaux sites réalisés avec le
© framework jQuery Mobile.
.......
..c
O'l
·;::::
Prefix free (http://leaverou.github.com/prefixfree/)
>-
0.
0
Ce plug-in JavaScript est très utile, il rend de nombreuses propriétés
u
CSS3 compatibles avec les anciens navigateurs.

l 126
RESSOURCES

· CSS Tricks (http://css-tricks.com)


Ce blog propose de très nombreuses astuces sur CSS3, ainsi que des
tutoriels très intéressants.
· HTMLS Rocks (http://www.htmlSrocks.com/)
Il s'agit certainement de la plus grande ressource autour de HTMLS, un
site indispensable.
· Page Speed (https://developers.google.com/pagespeed/)
L'outil online de Google vous permet de tester les performances de
votre site web et vous propose des ressources pour les optimiser.
· When can 1use (http://caniuse.com/)
Ce site liste toutes les propriétés CSS3 et vous indique précisément les
navigateurs et versions du navigateur qui sont compatibles.
· Selectivizr (http://selectivizr.com/)
Si vous utilisez les sélecteurs CSS3 très récents, ce script les rendra
compatibles avec Internet Explorer 6, 7 et 8.

Livres
• Liza Danger Gardner et Jason Grigsby, Head First Mobile Web, O'Reilly
Media, 2011
• Raphaël Goetter, CSS avancées: Vers HTML5 et CSS3, Eyrolles, 2011
• François Daoust, Dominique Hazaël-Massieux, Relever le défi du Web
mobile, Eyrolles, 2011
• Éric Sarrion, XHTMLJCSS etjavaScript pour le Web mobile, Eyrolles, 2010
• Mobile Design for iPhone and iPad, Smashing Magazine, 2010
Vl
(!)

0
Amélie Boucher, Ergonomie web: Pour des sites web efficaces, Eyrolles,
'--
w
>- 2010
N
..--t
0
N
©
.......
Comptes Twitter
..c
O'l
·;::::
>- @ergophile «Ergonomie web & mobile»
0.

u
0
· @alsacreations «Communauté d'apprentissage web»
· @goetter « Créateur d'Alsacréations »
CRÉER SON PREMIER THÈME WORDPRESS MOBILE

· @jquerymobile « Touch -Optimize Web Framework for Smartphone


and Tablets »
· @hSbp «A rock sol id base for your web project »
· @paul_irish « HTMLS and CSS3 aficionado, Google Chrome dev
relations »
· @leaverou « Frontend code pirate. Passionate open web standars »
· @hakimel « Creative JavaScript coder and CSS tweaker »
· @bailletthibaut «Développeur HTMLS et mobile»

Vl
(!)

0
'--
w
>-
N
..--t
0
N
©
.......
..c
O'l
·;::::
>-
0.
0
u

l 12s
Index

Symboles émulateur Opera 98


<article> 23, 27 quirktools 96
<canvas> 22 resizemybrowser 96
<footer> 23 SDK Android 97
<header> 23, 31 simulateur BlackBerry 98
<nav> 23, 46 simulateur iOS 96
<section> 23, 27, 31 ergonomie 15, 70, 117, 125
<video > 23, 28, 32 F
A Facebook 92
affichage 96 fil d'Ariane 7
Android 34, 70, 97, 102, 115, 119 Firebug 109
application web 103 Firefox 28, 33, 86, 109
article 2, 17, 38, 47, 74 formulaire de contact 6, 77
framework 71, 117
B
back-office 2, 5, 123
H
BlackBerry 35, 70, 98, 119 hébergeur 93, 122
Boilerplate 64, 93 hidden 59
breadcrumbs 7 htmlSboilerplate 64, 93
htmlSshiv 31, 39
Vl
(!) c
0
'-- Chrome 28, 33, 86, 109
w
>- CMS2 installation 121
N
..--t commentaire 4, 49 Internet Explorer 12, 28, 39, 127
0
N formulaire 56, 77 iOS34,70,96, 98, 102
© réglage 5 iPad 97, 102, 115, 125, 127
.......
..c compression 2 iPhone 33, 82, 97, 102, 115, 119
O'l
·;:::: contact 6, 77
>-
0.
J
0
u D jQuery mobile 71, 104, 117
drag and drop 22
M
E media queries 71, 105, 108, 115, 118
émulateur menu 5, 6, 13, 27, 36, 44, 45, 72, 80, 112
CRfER SON PREMIER THtME WORDPRESS MOBILE

meta 13, 34 référencement 7, 23, 74, 119


miniature 50 réseau social 5, 92
Modernizr 31 reset 61, 110
responsive design 72, 117
N ressource serveur 2
navigateur RGBA30
Chrome 28, 33, 86, 109
Firefox 28, 33, 86, 109 s
Internet Explorer 12, 28, 39, 127 Safari 28, 33, 79, 97, 103
Opera 28, 71, 98 sidebar 2
Safari 28, 33, 79, 97, 103 simulateur
émulateur Opera 98
0 quirktools 96
Opera 28, 71, 98 resizemybrowser 96
p SDK Android 97
simulateur BlackBerry 98
pagination 7, 47, 52, 76 simulateur iOS 96
performance
compression 2 T
Page Speed 86, 88 template 13, 16, 36, 53, 109
serveur (ressource) 2 thumbnail 50, 74, 88
YSlow 86 Twitter 92
placeholder 59, 77
plug-in 2, 5, 6 u
Ali in one SEO 7 user agent 61
Contact form 7 6 UTF-8 25, 39
mobile theme switcher 115
Page Speed 86 V
Regenerate Thumbnails 89 vitesse de chargement 2
W3 Total Cache 6, 90
WP pagenavi 7 w
Yoast Breadcrumbs 7 WebKit 33
présentation adaptative 72, 117 widget 4, 60
Windows Phone 71, 119
R
recherche 4, 80

1 130