Conception de thèmes WordPress : construire et optimiser son espace de travail

2,674 views

Published on

-- Conférence WordPress Camp 2016 --
À partir d’un framework comme Genesis et d’un starter theme comme Underscores : apprendre à identifier les éléments importants et organiser ses outils, librairies afin de créer son propre flux de travail. Gagner en productivité pour se concentrer sur l'essentiel et offrir un design efficace et orienté utilisateurs.
Côté front-end : (re) découverte de SASS (et outils dédiés)
Côté développement : utilisation des snippets, mise-en-place de versionning comme Git.
Utiliser un maximum de ressources disponibles depuis WordPress : exemples, les body class, les librairies Jquery présentes etc...
Présentation qui navigue entre l’atelier et le partage d’expérience et d’astuces plutôt à destination des (web)graphistes ou personnes désireuses d’approfondir des notions front-end, cette proposition balaiera les grandes lignes pour nous aider à créer un environnement de travail plus efficace et plus confortable.
Audience ciblée : Designers, Chefs de Projets, Clients

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,674
On SlideShare
0
From Embeds
0
Number of Embeds
171
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Conception de thèmes WordPress : construire et optimiser son espace de travail

  1. 1. 1WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Conception de thèmes : construire et optimiser son espace de travail @FrederiqueGame
  2. 2. 2 22WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Bonjour je suis Frédérique Game, Consultante en stratégie éditoriale, web et design + Designer Mes passions ? Typographie - Design - Art - Innovation - Expérience utilisateur WordPress et le Web ! Mon aspiration ? Contribuer à rendre le Web agréable, simple et efficace. Mes réalisations ? Conseil, audits de communication, conception de contenus, identité graphique (logo, charte), réalisation de sites internet.
  3. 3. 3 « Le Web est un environnement de développement particulièrement hostile et il est impossible que l'intégrateur parvienne à faire face à l'intégralité des possibilités de contribution ni à l'intégralité des configurations côté client. Son rôle est justement de tenter de minimiser les problèmes, pour un maximum de cas réels. » J.Patonnier et R.Rigo Projet responsive design 3WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  4. 4. 4 C’est quoi Grunt ? Script ? Bower, Foundation, Skelton...
  5. 5. Configurations multiples, disparité des serveurs et des machines, offre grandissante de devices codes, languages, règles… Dans ce contexte, concevoir un thème graphique demande de multiples ressources & compétences. Mais comment fait-on ? 55WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  6. 6. …en remettant un peu d’ordre dans tout ça 66WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  7. 7. 7
  8. 8. L’objectif ? Savoir nager dans l’océan d’outils, d’astuces et ressources qui nous sont proposées sur le Web… Optimiser son espace de production (front-end) Conséquences... Gagner en productivité et laisser émerger plus de créativité pour concevoir le design de nos thèmes. Jouer à Batman Arkham car plus de temps... 88WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  9. 9. à partir de : Un thème from scratch Un framework 9WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr *from scratch : à partir de rien, depuis le début
  10. 10. Identifier les éléments importants Organiser son espace de travail Définir de bons outils
  11. 11. 11 SASS ! www.underscores.me
  12. 12. 12 www.studiopress.com
  13. 13. 13
  14. 14. Présentation en quelques lignes... 14WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  15. 15. 15 www.underscores.me C’est surtout : Tous les fichiers de base PHP un fichier CSS (+ SASS) totalement vierge fichier style.css
  16. 16. 16 AUCUN STYLE www.underscores.me
  17. 17. 17 www.underscores.me
  18. 18. 18 Genesis C’est surtout : la configuration d’un theme enfant, un cadre de travail et des Hooks (PHP), une base simple CSS pré-stylisée child_theme
  19. 19. < header >LOGO MENU PRINCIPAL Secondaire, RESEAUX SOCIAUX < sidebar > widgets < content > CONTENU PRINCIPAL Le coeur du site Articles Images Vidéos < footer > PIED DE PAGE : mentions, infos, zones répétitives ©frederiquegame - 2015 remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_before_header', 'genesis_do_nav' );
  20. 20. « Un framework sert à simplifier un cadre de travail (traduction littérale). Une structure de base qui sert à installer ou concevoir des thèmes WordPress. Conséquences : le HTML et les classes sont toujours les mêmes; le framework est audité régulièrement; quand le coeur (le framework) se met à jour votre thème continue de fonctionner. Genesis s’accorde toujours au plus près des fonctions par défaut de WordPress. Les fonctions ajoutées dans le back-office sont très minimalistes. Tous les thèmes qui repose sur Genesis sont des thèmes enfants et ont besoin d’avoir le framework installé pour fonctionner. » d’après GREGOIRE NOYELLE, Expert Genesis 20 https://www.gregoirenoyelle.com/genesis-introduction- framework-theme-wordpress/ 20WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  21. 21. 21 Genesis
  22. 22. Identifier les éléments principaux, les récurrences 22WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  23. 23. 23 Constituer une MAP des différentes classes (css) 23WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  24. 24. 2424WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Les zones se distinguent...
  25. 25. 252525WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  26. 26. 262626WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  27. 27. ISOLER LES ZONES MAJEURES HEADER CONTENU PRINCIPAL FOOTER WIDGETS ET SIDEBAR Granularité 2 7 27WORDPRESS CAMP PARIS 2016 @frederiquegame
  28. 28. .site-container <header> .site-header <nav> .nav-primary, .nav-secondary .site-inner .content-sidebar-wrap <main> . content <aside> .sidebar- primary .footer-widgets <footer> .site-footer (.wrap) genesis-before-footer 2 8 28WORDPRESS CAMP PARIS 2016 @frederiquegame
  29. 29. Hiérarchiser Regrouper Structuer 2929WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr CONSTATS : les deux solutions bénéficient d’une syntaxe sémantique cohérente, certaines classes CSS sont communes.
  30. 30. Flux et outils... 30WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  31. 31. 31 Versioning...1 31WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  32. 32. 323232WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  33. 33. 33 Appliqué au webdesign, le versioning, c’est la mémoire de tous les changements de style, couleurs, apports effectués… Qu’est-ce qu’un contrôle de version ? C’est un processus permettant de conserver une trace des modifications successives apportées à un fichier numérique (documentation, code source, base de données), à travers un logiciel spécialisé. Il est ainsi possible de retrouver des données effacées, mais aussi d'effectuer de nombreuses manipulations, comme la comparaison de sous parties… 33WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  34. 34. 343434WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  35. 35. 35353535WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  36. 36. 36363636WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr La possibilité de constuire ses librairies et de les partager/ stocker en tant que “gist”...
  37. 37. 373737WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  38. 38. 383838WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  39. 39. 39WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Préprocesseurs...2 Sass est une extension de CSS3 qui ajoute des règles imbriquées, des variables, mixins, un sélecteur d'héritage… Sass génère CSS bien formaté et rend vos feuilles de style plus facile à organiser et à maintenir.
  40. 40. 40 http:/sass-lang.com/ 4040WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  41. 41. 41 Compass, Codekit, Koala... 4141WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  42. 42. 42 Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems 4242WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  43. 43. 43 Redistribution des fichiers et des @imports - simplification 43WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  44. 44. 44 $couleur-principale : #E64671 body {$couleur-principale;} et/ou .box : lighten ($couleur-principale, 10%) h1 { font-family:$main-font, color:$couleur-principale; }
  45. 45. Et le responsive design ? Géré également grâce à Susy + Breakpoint (et…) 45WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  46. 46. 464646WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Éditeurs de texte...3
  47. 47. 47 Brackets : raccourci traitement des couleurs + gestion HSL 47WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  48. 48. 48 Illustrator...5 484848WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  49. 49. SCRIPT GRILLE DANS ILLUSTATOR 4949494949WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  50. 50. 50 Illustrator Photoshop 505050WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr 45 calques… juste pour la maquette mobile :)
  51. 51. 51 Extensions...6
  52. 52. 52 Tri séléctif et rangement... Before the end...7 525252WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  53. 53. 53 Constituer ses dossiers snippets librairies couleurs dossiers de policces de caractère snippets thématiques (menu, background…) 53535353WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  54. 54. 54 … et ses propres frameworks 5454545454WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  55. 55. 5555555555WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  56. 56. 56 Un doute sur la validation Html ou Css ? Verifications finales… The end...8 565656WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  57. 57. 57575757WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  58. 58. 585858WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  59. 59. 59 en résumé… Versionning > Git / Github Desktop Préprocesseur > Sass Compiler > Codekit Éditeur > Brackets *** Illustrator *** * Photoshop *
  60. 60. 60 Concevoir pour les autres… Afin de faciliter leur lecture, leur recherche, leur navigation. Let’s do Quality Enjoy :) 60WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  61. 61. Merci ! 61WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr

×