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

1WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Conception de thèmes : construire
et optimiser son espace de travail
@FrederiqueGame

2
@frederiquegame
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
« 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
@frederiquegame

4
C’est quoi Grunt ? Script ?
Bower, Foundation, Skelton...

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 ?
@frederiquegame

…en remettant
un peu d’ordre dans tout ça
@frederiquegame

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...
@frederiquegame

à partir de :
Un thème from scratch
Un framework
@frederiquegame
*from scratch : à partir de rien, depuis le début

Identifier les éléments importants
Organiser son espace de travail
Définir de bons outils

Présentation
en quelques
lignes...
@frederiquegame

15
www.underscores.me
C’est surtout :
Tous les fichiers de base PHP
un fichier CSS (+ SASS) totalement vierge
fichier
style.css

16
AUCUN STYLE
www.underscores.me

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

< 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' );

« 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/
@frederiquegame

Identifier
les éléments principaux,
les récurrences
@frederiquegame

23
Constituer une MAP
des différentes classes (css)
@frederiquegame

@frederiquegame
Les zones se distinguent...

@frederiquegame

ISOLER LES ZONES MAJEURES
HEADER
CONTENU PRINCIPAL
FOOTER
WIDGETS ET SIDEBAR
Granularité
2
7
@frederiquegame

.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
@frederiquegame

Hiérarchiser
Regrouper
Structuer
@frederiquegame
CONSTATS : les deux solutions bénéficient
d’une syntaxe sémantique cohérente,
certaines classes CSS sont communes.

Flux et outils...
@frederiquegame

31
Versioning...1
@frederiquegame

@frederiquegame

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…
@frederiquegame

@frederiquegame

@frederiquegame
La possibilité de constuire ses librairies et de les
partager/ stocker en tant que “gist”...

@frederiquegame

@frederiquegame
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
http:/sass-lang.com/
@frederiquegame

41
Compass, Codekit, Koala...
@frederiquegame

42
Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems
@frederiquegame

43
Redistribution des fichiers
et des @imports - simplification
@frederiquegame

44
$couleur-principale : #E64671
body {$couleur-principale;}
et/ou
.box : lighten ($couleur-principale, 10%)
h1 {
font-family:$main-font,
color:$couleur-principale;
}

Et le responsive design ?
Géré également grâce à Susy + Breakpoint (et…)
@frederiquegame

@frederiquegame
Éditeurs de texte...3

47
Brackets :
raccourci
traitement des
couleurs
+ gestion HSL
@frederiquegame

48
Illustrator...5
@frederiquegame

SCRIPT GRILLE
DANS
ILLUSTATOR
@frederiquegame

50
Illustrator
Photoshop
@frederiquegame
45 calques…
juste pour la
maquette mobile
:)

52
Tri séléctif et rangement...
Before the end...7
@frederiquegame

53
Constituer ses dossiers
snippets
librairies couleurs
dossiers de policces de caractère
snippets thématiques (menu, background…)
@frederiquegame

54
… et ses propres frameworks
@frederiquegame

@frederiquegame

56
Un doute sur la validation
Html ou Css ?
Verifications finales…
The end...8
@frederiquegame

@frederiquegame

59
en résumé…
Versionning > Git / Github Desktop
Préprocesseur > Sass
Compiler > Codekit
Éditeur > Brackets
*** Illustrator ***
* Photoshop *

60
Concevoir pour les autres…
Afin de faciliter leur lecture,
leur recherche, leur navigation.
Let’s do Quality
Enjoy :)
@frederiquegame

Merci !
@frederiquegame

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

Contenu connexe

Tendances

En vedette

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

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