Personnaliser un thème sous Wordpress

15 784 vues

Publié le

Publié dans : Technologie
1 commentaire
17 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
15 784
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 716
Actions
Partages
0
Téléchargements
702
Commentaires
1
J’aime
17
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Personnaliser un thème sous Wordpress

  1. 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. 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. 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. 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. 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. 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. 7. W Personnaliser un thème sous WordPress OR KS HO P Contexte Un peu d’archéologie... 2000 NG
  8. 8. W Personnaliser un thème sous WordPress OR KS HO P Contexte Un peu d’archéologie... 2002 NG
  9. 9. W Personnaliser un thème sous WordPress OR KS HO P Contexte Un peu d’archéologie... 2006 (essai charte) NG
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×