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

1WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr

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

@FrederiqueGame

222WORDPRESS CAMP PARIS 2016

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

« 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.RigoProjet responsive design

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

Configurations multiples,disparité des serveurs et des machines,

offre grandissante de devicescodes, languages, règles…

Dans ce contexte, concevoir un thème graphiquedemande de multiples ressources & compétences.

Mais comment fait-on ?

…en remettantun peu d’ordre dans tout ça

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

à partir de :

Un thème from scratchUn framework

*from scratch : à partir de rien, depuis le début

Identifier les éléments importantsOrganiser son espace de travail

Définir de bons outils

SASS !

www.underscores.me

www.studiopress.com

Présentationen quelques

lignes...

www.underscores.me

C’est surtout :Tous les fichiers de base PHP

un fichier CSS (+ SASS) totalement vierge

fichierstyle.css

AUCUN STYLE

www.underscores.me

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 PRINCIPALLe coeur du site

ArticlesImagesVidé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

https://www.gregoirenoyelle.com/genesis-introduction-framework-theme-wordpress/

Genesis

Identifierles éléments principaux,

les récurrences

Constituer une MAPdes différentes classes (css)

Les zones se distinguent...

ISOLER LES ZONES MAJEURES

HEADERCONTENU PRINCIPALFOOTERWIDGETS ET SIDEBAR

Granularité

27WORDPRESS CAMP PARIS 2016 @frederiquegame

www.frederiquegame.fr

.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

28WORDPRESS CAMP PARIS 2016 @frederiquegame

HiérarchiserRegrouperStructuer

CONSTATS : les deux solutions bénéficientd’une syntaxe sémantique cohérente,

certaines classes CSS sont communes.

Flux et outils...

Versioning...1

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…

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

Préprocesseurs...2Sass 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.

http:/sass-lang.com/

Compass, Codekit, Koala...

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

Redistribution des fichierset des @imports - simplification

$couleur-principale : #E64671

body {$couleur-principale;}

.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…)

Éditeurs de texte...3

Brackets : raccourci

traitement des couleurs

+ gestion HSL

Illustrator...5

484848WORDPRESS CAMP PARIS 2016@frederiquegame

SCRIPT GRILLEDANS

ILLUSTATOR

IllustratorPhotoshop

45 calques…juste pour la maquette mobile :)

Extensions...6

Tri séléctif et rangement...

Before the end...7

Constituer ses dossiers

snippetslibrairies couleursdossiers de policces de caractère

snippets thématiques (menu, background…)

… et ses propres frameworks

Un doute sur la validationHtml ou Css ?

Verifications finales…

The end...8

en résumé…

Versionning > Git / Github DesktopPréprocesseur > SassCompiler > CodekitÉditeur > Brackets

*** Illustrator **** Photoshop *

Concevoir pour les autres…

Afin de faciliter leur lecture,leur recherche, leur navigation.

Let’s do Quality

Enjoy :)

Merci !

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

Design

Découvrir WordPress

Wordpress Dsaat

Formation WordPress Volume1

Publier Avec Wordpress

Guide Wordpress

WORDPRESS · LIMITES DE WORDPRESS Performances parfois médiocres notamment avec des thèmes premium et/ou mal codés et un excès d'extension Sécurité : nécessité de faire régulièrement

FORMATION Créer son site Internet sous WordPress...Les éléments à optimiser sur son site internet (maillage interne, structure en silo, optimisation fichiers robots.txt et .htaess,

WordPress Conception et personnalisation des thèmes

Wordpress Meetup Toulouse 1 - Quel Futur pour WordPress ?

Comprendre et optimiser la base de données WordPress · 2017-06-25 · WordPress utilise le moteur de stockage par défaut MyISAM vs InnoDB – Attention avec le plugin « YARPP

WordPress 3.5 pour des sites web efficacesmultimedia.fnac.com/multimedia/editorial/pdf/9782212138016.pdf · widgets ou des thèmes. Enfin, un petit lexique permet de rappeler les

Formation WordPress

POURQUOI UTILISER WORDPRESS - Ethos Digital · WORDPRESS QUAND ET OÙ PRÉSENTATEURS MEETUP WORDPRESS FRIBOURG UTILISER POUR CRÉER VOTRE SITE WEB Nous lançons un groupe Meetup WordPress

CMS et Wordpress

Adw #16 : WordPress

WordPress Jurassique

C'est quoi WordPress ?

Initiation à WordPress

Diaporama afea wordpress

Optimiser le référencement naturel d'un site ou blog Wordpress