personnaliser un thème sous wordpress
Post on 05-Dec-2014
16.377 Views
Preview:
DESCRIPTION
TRANSCRIPT
WORKSHOP
organiser et promouvoir les métiers du design numérique
Personnaliser un thèmesous WordPressDans les coulisses de la refonte des sitesdesignersinteractifs.org et flashxpress.net
Personnaliser un thème sous WordPressWORKSHOP
À propos des intervenants
webdesigner / intégrateur HTML
responsable technique du site de l’association
1er projet sous WordPress :-)
GB NG
Nicolas Gansformateur chez regart.net formation
Guillaume Brachonsecrétaire général de *designers interactifs*
webdesigner / développeur ActionScript
formateur Flash/ActionScript
pareil ;-)
Personnaliser un thème sous WordPressWORKSHOP
Contexte
GB
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 »)
Le site existant1ère expérience de personnalisation
Personnaliser un thème sous WordPressWORKSHOP
Contexte
GB
Les attentesDisposer 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
Personnaliser un thème sous WordPressWORKSHOP
Contexte
GB
Le choix de WordPressUne 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
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Le site existantPortail 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
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Un peu d’archéologie...2000
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Un peu d’archéologie...2002
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Un peu d’archéologie...2006 (essai charte)
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Le site existantProblè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
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Les attentesPé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
Personnaliser un thème sous WordPressWORKSHOP
Contexte
NG
Le choix de WordPressUn 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é
Personnaliser un thème sous WordPressWORKSHOP
Conception et production
GB
Le mode de développementOn 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
Personnaliser un thème sous WordPressWORKSHOP
Conception et production
GB
La conception et le design d’interfaceFaire 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
Personnaliser un thème sous WordPressWORKSHOP
Conception et production
GB
Le développement sous WordPressS’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
Personnaliser un thème sous WordPressWORKSHOP
Conception et production
NG
Le mode de développementAller 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
Personnaliser un thème sous WordPressWORKSHOP
Conception et production
NG
Le développement sous WordPressAdapter 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”
Personnaliser un thème sous WordPressWORKSHOP
Conception et production
GB
Les ressources et outilsQuelques bons liens, du temps et de la curiosité !
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
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é :-)
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
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
L’API de WordPress“Deux ou trois choses que je sais d’elle”
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
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
Templates tagsVos meilleurs amis
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
permet de parcourir tous les posts récupérés dans une requête et de leur appliquer le traitement voulu
ZE LoopSimple et puissant
exemple : static.php
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
permettent d'intégrer des fichiers du thèmes dans une page, équivalents à un copier/coller
Sous forme de fonctions :
Include tagsIndispensables pour l’optimisation
exemple : archive.php
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
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
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
Conditional tagsIndispensables pour introduire de la variété
exemple : header.php
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
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 ...
Quelques problèmes...Tout n’est pas rose au royaume de WordPress (hélas !)
Personnaliser un thème sous WordPressWORKSHOP
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. 5 sous-cat. 3 sous-cat.7 sous-cat.
Personnaliser un thème sous WordPressWORKSHOP
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
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
category-4.php
cat. 4
cat. 17 cat. 15 cat. 50 cat. 53
category-17.php
redirection automatique
archive-15.php archive-50.php archive-53.php
single-15.php
redirectionautomatique
single-50.php
Architecture de la rubrique « L’emploi »
redirectionautomatique
single-53.php
redirectionautomatique
archive-17.php
navigationpar tags
Liste des dernières offres
Offrespar métiers
Formulairedépôt offre
Détail charte emploi
Détail NetworkingInteractif
single-17.php Détail d’uneoffre d’emploi
accèsdirect
Personnaliser un thème sous WordPressWORKSHOP
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
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
Le formulaire de dépôt d’une offre d’emploi
chaque étape du formulaire est un article de la sous-catégorie (5 articles)
Partie communeau gabarit
Partie gérée parchamp personnalisé
un champ personnalisé est utilisé pour insérer le code HTML propre à chaque étape
Personnaliser un thème sous WordPressWORKSHOP
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)
Personnaliser un thème sous WordPressWORKSHOP
Dans le détail
En vrac !
navigationle 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
Préfixe des catégoriesRépertoire hébergement
CSSen 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)
Personnaliser un thème sous WordPressWORKSHOP
C’est fini !
GB NG
organiser et promouvoir les métiers du design numérique
Merci !
top related