1. W
OR
KS
HO
P
Personnaliser un thème
sous WordPress
Dans les coulisses de la refonte des sites
designersinteractifs.org et flashxpress.net
organiser et promouvoir les métiers du design numérique

2. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
À propos des intervenants
Guillaume Brachon Nicolas Gans
secrétaire général de *designers interactifs* formateur chez regart.net formation
webdesigner / intégrateur HTML webdesigner / développeur
ActionScript
responsable technique du site
de l’association formateur Flash/ActionScript
1er projet sous WordPress :-) pareil ;-)
GB NG

3. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Le site existant
1ère expérience de personnalisation
créé en novembre 2006 pour
accompagner le lancement de
l’association
développé sous Dotclear
associé à plusieurs services en
ligne
...mais trop limité (contenu
réduit à de « l’actu »)
GB

4. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Les attentes
Disposer d’un relais de communication efficace et complet
mieux valoriser les missions et
les actions de l’association
développer les contenus
intégrer les services
faciliter la mise à jour du site
(CMS, multi-utilisateurs, etc.)
lancement septembre 2008
GB

5. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Le choix de WordPress
Une alternative valable à la solution du « sur-mesure »
moteur de blog populaire et
plébiscité (communauté active)
richesse des fonctionnalités et
potentiel d’évolution (plugin)
personnalisation simple
(principe appliqué au 1er site)
adapté au modèle économique
de l’association
GB

6. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Le site existant
Portail de ressources pour la création et les technologies du web
créé en 1998
sept (!) versions : texte > html >
flash > php maison > Mambo >
Joomla
site type “portail” avec contenu
diversifié : actu, ressources, wiki,
webTV en flash, magazine,
tchat, forums
NG

7. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Un peu d’archéologie...
2000
NG

8. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Un peu d’archéologie...
2002
NG

9. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Un peu d’archéologie...
2006 (essai charte)
NG

10. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Le site existant
Problèmes liés à Joomla
soucis n° 1 : la sécurité
Architecture défaillante = MAJ
impossible = hack du serveur !
admin peu intuitive
« usine à gaz », code source
difficile à modifier, manque de
souplesse
NG

11. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Les attentes
Pérenniser le site et lui donner une nouvelle jeunesse
upgrade facile par soucis de
sécurité
customisation aisée : esthétique
et fonctionnelle
CMS convivial en utilisation
partagée
recherche d’un “standard”
pérenne
NG

12. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Contexte
Le choix de WordPress
Un moteur de blog simple, puissant et facilement adaptable
mise à jour fréquente (sécurité !)
communauté énorme, socle de
ressources inégalé
simplicité et convivialité des
outils d’admin
bonne architecture : logique et
graphisme bien cloisonnés >
évolution et pérennité
NG

13. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Conception et production
Le mode de développement
On n’est jamais mieux servi que par soi-même
comprendre le principe de
fonctionnement d’un thème et
en créer un nouveau en partant
de « zéro » (ou presque)
compléter les fonctionnalités
manquantes avec des plugins
GB

14. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Conception et production
La conception et le design d’interface
Faire un portail à partir d’un blog
benchmark des possibilités
offertes par WordPress et ses
plugins
définition de l’arborescence et
des différents gabarits en les
optimisant pour WordPress
durée totale : 27 jours/homme
GB

15. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Conception et production
Le développement sous WordPress
S’approprier l’outil et pousser très loin la customisation
création des catégories pour
traduire l’arborescence
gestion des pages de catégorie
et des pages d’article grâce aux
marqueurs conditionnels
personnalisation par l’utilisation
de champs personnalisés
durée totale : 45 jours/homme
GB

16. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Conception et production
Le mode de développement
Aller vite et bien
peu de temps et pas d’expertise
css/xhtml + WordPress
idée de partir d’un template
gratuit et de le customiser
gratuits pas satisfaisants > achat
d’un template, puis
customisation
deadline : sortie CS4
NG

17. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Conception et production
Le développement sous WordPress
Adapter la logique de WP à celle d’un portail
création des catégories pour
traduire l’ancienne arborescence
décision de réduire le nombre de
sous-catégories au profit des
tags
favoriser une navigation
transversale par tags et
extensions type “similar posts”
NG

18. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Conception et production
Les ressources et outils
Quelques bons liens, du temps et de la curiosité !
les indispensables
le Codex (http://codex.wordpress.org)
les forums de WordPress Francophone (http://www.wordpress-fr.net)
ceux qui m’ont bien dépanné :-)
WebDesignerWall (http://www.webdesignerwall.com)
Fran6art (http://www.fran6art.com)
css4design (http://www.css4design.com)
...et bien sûr Google, notamment pour trouver des plugins
GB

19. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
L’API de WordPress
“Deux ou trois choses que je sais d’elle”
la plupart du temps, on fera appel à de simples fonctions php au
nom plus ou moins explicite, qui fonctionnent comme des raccourcis
grosso modo, API divisée en 3 grandes catégories principales :
- Template Tags : pour créer un thème, elles vont générer du html
dans vos pages
- les “core functions” : pour gérer de la logique, créer des
requêtes personnalisées, faire du traitement de données...
- Plugin API : pour créer ses propres extensions
La plupart des fonctions prennent des paramètres, qui décuplent
leur puissance

20. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
Templates tags
Vos meilleurs amis
noms intuitifs : the_title(), the_author(), the_excerpt()...
Permettent d’écrire du html, équivalents d’un “echo” en php
la plupart du temps s’utilisent au sein de “la Boucle” ou “the Loop”
exemple : archive.php

21. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
ZE Loop
Simple et puissant
permet de parcourir tous les posts récupérés dans une requête et de
leur appliquer le traitement voulu
exemple : static.php

22. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
Include tags
Indispensables pour l’optimisation
permettent d'intégrer des fichiers du thèmes dans une page,
équivalents à un copier/coller
Sous forme de fonctions :
ou personnalisés :
intérêt : modularité du thème, réutilisation d'éléments redondants,
centralisation de code ou d'éléments graphiques, MAJ
exemple : archive.php

23. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
Conditional tags
Indispensables pour introduire de la variété
permettent d'effectuer des tests dans des structures conditionnelles
de type if ... elseif … else
renvoient true ou false
exemple :
is_home() > si je suis sur la home alors, j'affiche tel module avec un
include
exemple : header.php

24. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
Quelques problèmes...
Tout n’est pas rose au royaume de WordPress (hélas !)
conflit entre extensions utilisant librairies AJAX (JQuery,
Scriptaculous...) > problèmes de versioning ou d'incompatibilité
entre librairies rendent inutilisables certaines extensions
personnalisation des urls > soucis pour ajouter ses propres variables
d'url, urlrewriting de WP un peu contraignant
exemple : nécessité de pouvoir passer une id au swf du module
webTV pour l’ouvrir sur une émission donnée
+ the_permalink() pas customisable
solution trouvée (un peu boiteuse) : une fonction
custom_permalink(pId) qui va récupérer un champ personnalisé
archiveId
autre piste : overrider la fonction the_permalink() de WP ...

25. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
L’architecture du site
recomposition de l’arborescence du site à
l’aide des catégories
chaque rubrique du site correspond à une
catégorie mère
chaque sous-partie d’une rubrique
correspond à une sous-catégorie
utilisation de gabarits personnalisés grâce
au marqueur de modèle in_category
4 variantes de category.php, 6 variantes de
archive.php et 20 variantes de single.php
cat. 7 cat. 8 cat. 5 cat. 4 cat. 6 cat. 3 cat. 9
7 sous-cat. 5 sous-cat. 7 sous-cat. 4 sous-cat. 7 sous-cat. 5 sous-cat. 3 sous-cat.

26. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
La rubrique « L’emploi »
4 sous-parties
redirection par défaut vers la sous-partie
« Toutes les offres » qui liste les dernières
offres d’emploi (grâce à la Boucle)
chaque offre d’emploi est taguée pour
permettre une navigation alternative par
métier (nuage de mots-clés)
détail d’une offre d’emploi = un exemple
concret d’une utilisation poussée des
champs personnalisés
originalité : chaque étape du process de
dépôt d’une offre d’emploi correspond à un
article d’une même catégorie

27. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
Architecture de la rubrique « L’emploi »
cat. 4
tique
ion automa category-4.php
redirect
cat. 17 cat. 15 cat. 50 cat. 53
category-17.php Liste des archive-15.php archive-50.php archive-53.php
dernières offres
navigation redirection redirection redirection
par tags automatique automatique automatique
Détail
archive-17.php Offres single-15.php Formulaire single-50.php Détail single-53.php Networking
par métiers dépôt offre charte emploi
Interactif
accès
direct
single-17.php Détail d’une
offre d’emploi

28. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
L’article « Offre d’emploi »
besoin d’une mise forme très spécifique,
très différente d’un article classique
utilisation d’une variante de single.php
la plupart des informations sont associées
à des champs personnalisés (14 champs)
avantages = grande souplesse d’utilisation
de l’information dans la page + possibilité
de réutiliser une petite partie (très ciblée)
de l’information ailleurs dans le site
inconvénients = le corps de l’article est
vide (problématique pour le moteur de
recherche) + saisie fastidieuse de chaque
nouvelle offre d’emploi

29. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
Le formulaire de dépôt d’une offre d’emploi
chaque étape du formulaire est un article un champ personnalisé est utilisé pour
de la sous-catégorie (5 articles) insérer le code HTML propre à chaque
étape
Partie commune
au gabarit
Partie gérée par
champ personnalisé

30. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
La page d’accueil
index.php
utilisation de la fonction WP_Query pour
récupérer les derniers articles (modules « À
la Une », « Emploi », « Membres et
partenaires », « Actualité », « Publications »)
boucle incrémentée pour trier les articles
(module « Actualité »)
utilisation des champs personnalisés pour
faire remonter les infos les plus pertinentes
(et permettre une mise en forme spécifique)

31. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
Dans le détail
En vrac !
navigation
le menu et le sous menu ne sont pas généré dynamiquement mais leur apparence (couleur,
graisse) est géré grâce à des marqueurs conditionnels
construction des URLs
Répertoire hébergement Préfixe des catégories
CSS
en plus des CSS de base, chaque rubrique du site possède sa propre CSS qui appelée grâce à
un marqueur conditionnel (permet de ne charger que les styles des rubriques que l’on visite)

32. W
Personnaliser un thème sous WordPress
OR
KS
HO
P
C’est fini !
Merci !
organiser et promouvoir les métiers du design numérique
GB NG