Comment changer la couleur d’un bouton sans anéantir l’univers

Qui?

Michal Bluma

http://isotrope.net

@isotrope

https://www.facebook.com/isotrope.net

(Un tiers de) http://wearepresskit.com

Bonjour! Je m'appelle Michal Bluma

J’œuvre en périphérie du développement web depuis environ une décennie. Pendant ce temps-là, j’ai surtout travaillé dans l’ombre, pour d’autres.

En décembre, j’ai quitté mon emploi de près de dix ans en bureautique et en support informatique.

Depuis janvier, je suis développeur web à mon compte à temps plein.

Détruire l’univers à grands coups de petits changements de code

C'est tellement facile de créer un site avec WordPress

La fameuse installation en 5 minutes

Les scripts d'installation automatisés tels que Fantastico

Il n’a jamais été aussi facile de prendre de mauvais plis.

Dur, dur d’être un novice WordPress

Les nouveaux usagers ont souvent la même approche :

  1. Installer et configurer WordPress
  2. Se familiariser avec le tableau de bord
  3. Choisir un thème
  4. Vouloir modifier le thème
« Vraiment, j’adore!
Si seulement les menus pouvaient être bleus. »
« J’aimerais tellement que l’encadré soit plus large. »

Les premières modifications

  1. Recherche Google pour « Comment puis-je changer XXXXX dans WordPress? »
  2. Parfois, le nouvel utilisateur va poser une question sur les forums de soutien*
    * Ne manquez pas la présentation de Kathryn Presner sur les bonnes façons de demander du soutien intitulée « Help Me Help You: The Art and Science of Getting Good WordPress Support »
  3. Souvent, la réponse est
    • Vous devez modifier le CSS
    • D’accord. Comment je fais ça?
    • Vous n’avez qu’à faire vos changements dans style.css
  4. L’usager découvre le dossier \wp-content\themes\ et fait ses modifications directement dans le fichier style.css

Non! Arrêtez! Je vous en prie.

Les nouveaux usagers dans le monde de WordPress ont souvent tendance à modifier le fichier style.css du thème.

Yes! J’ai réussi. WordPress, t’es le meilleur!

Le temps passe...

« Oh. Une mise à jour du thème! On m’a dit de toujours tout mettre à jour pour WordPress. »

Zut! Qu’est-ce qui vient de se passer?
WordPress, qu’est-ce que t’as fait??

Les mises à jour de thèmes

Lorsqu’un thème est mis à jour, tous ses fichiers sont écrasés par ceux contenus dans la mise à jour.

Attendez-vous à ce que tous les fichiers dans le dossier du thème soient écrasés.

Toutes vos modifications seront donc perdues.

Est-ce qu’on ne pourrait pas choisir quels fichiers devraient être écrasés et quels fichiers devraient être conservés?

Les mises à jour améliorent le thème sur le plan de la sécurité, ainsi que la fonctionnalité.

Vous devriez toujours utiliser la version la plus récente du thème. Vous profiterez de ses améliorations.

Je veux seulement changer un ou deux styles.
Puis-je faire mes modifications, puis les refaire après une mise à jour?

Bien sûr!
... mais....

Tant qu’à faire des modifications, partons du bon pied.

La règle de CSS que vous avez changée dans style.css?

Disparue!

La petite modification dans functions.php que vous avez recherchée pendant des heures?

Bonsoir, elle est partie!

Les changements que vous avez faits dans le modèle de page?

Sayonara!

Partons du bon pied, une fois pour toutes.

Lorsque vous voudrez faire des modifications supplémentaires, vous aurez déjà une méthode de fonctionnement d’instaurée. Vous pourrez faire autant d’ajouts que vous voudrez et vous serez à l’abri des problèmes de mises à jour des thèmes*

* Bien sûr, votre expérience peut varier, dépendamment de la qualité du thème que vous avez choisi.

Différentes méthodes pour modifier un thème

  • Un plugiciel CSS
  • Un fichier nommé custom.css
  • Options de CSS personnalisé incluses avec le thème
  • Créer son propre Thème enfant

Un plugiciel CSS

Certains plugiciels permettent d’ajouter du CSS personnalisé dans le tableau de bord de WordPress.

Les plugiciel CSS

De façon générale, le concept derrière ces plugins est d’ajouter une section dans le tableau de bord de WordPress qui permet d’y inclure des règles de CSS personnalisées.

Ces règles sont ensuite insérées dans la page après avoir inséré les règles du thème.

Avantage : Le plugin n’est pas dépendant du thème.

Les mises à jour des thèmes pourraient affecter les noms de classes CSS, mais votre CSS à vous ne sera pas écrasé.

Un fichier custom.css

Un fichier nommé custom.css se trouvant dans le répertoire de votre thème

Certains thèmes vous permettent d’inclure un fichier (souvent) nommé custom.css dans le répertoire de votre thème. Cette situation est l’exception à la règle disant qu’on ne doit jamais modifier les fichiers d’un thème.

Il s’agit d’un fichier qui vous permet d’ajouter vos propres règles CSS. Ces thèmes vérifient si un fichier avec un nom spécifique se retrouve dans le dossier du thème, puis l’insèrent à la file des fichiers chargés par WordPress.

Attention!

Un auteur de thème pourrait essayer de vous faciliter la vie en ajoutant lui-même un fichier custom.css avec le thème. C’est super gentil, mais...

Si ce fichier se retrouve dans la prochaine mise à jour, il pourrait être écrasé par le nouveau.

Je vous suggère fortement de toujours conserver une copie de sauvegarde de votre fichier custom.css.

Options de CSS personnalisé incluses avec le thème

Une section ou fenêtre dans le tableau de bord de WordPress qui permet de spécifier vos règles de CSS additionnelles.

Cette solution est très similaire à celle des plugins de CSS.

La grande différence est que cette fonctionnalité est directement liée au thème.

Un des avantages de cette approche est que vos règles CSS sont sauvegardées en tant qu’options dans la base de données, plutôt que dans un fichier.

Créer son propre Thème enfant

C’est pour ça que vous êtes ici :)

C’est quoi,
un « Thème enfant »?

Un thème enfant :

  • Dépend du thème parent
  • Utilise les feuilles de style et les fonctionnalités du thème parent
  • Peut écraser les règles CSS ou les fonctionnalités du thème parent
  • N’est pas directement affecté par les mises à jour du thème parent** Les fichiers du thème enfant ne sont pas touchés lors de la mise à jour d’un thème parent. Par contre, l’auteur peut avoir apporté des modifications qui pourraient affecter votre thème enfant. Par exemple, des changements de noms de classes, des modifications aux fonctions.

Thème Poutine (un exemple)

  • Le thème « Poutine » a des boutons de menu verts
  • Vous créez un thème enfant dans lequel vous écrasez cette règle en dictant que les boutons de menu doivent être rouges
  • Vous mettez à jour le thème « Poutine »
  • L’auteur du thème a décidé de changer la couleur des boutons pour le jaune

Sains et saufs!

Comme vous avez créé un thème enfant, les boutons du menu demeurent rouges.

Que voulons-nous modifier dans les feuilles de style?

Avant de voir faire nos modifications CSS, voyons comment trouver ce que nous voulons changer.

« Le bouton à gauche, là-là. » n’est pas assez précis comme indication pour nos feuilles de style. Nous devons pouvoir le « nommer ».

Cordonnier bien chaussé

L’utilitaire à prendre dépend de votre fureteur préféré :

Vous êtes un usager de Firefox?


Téléchargez FireBug

Vous adorez Chrome?


Utilisez les « DevTools » inclus dans Chrome

Il existe une panoplie d’autres inspecteurs de code. Il y en a un inclus avec Firefox. Il y en a aussi un qui vient avec Internet Explorer.

Ces outils de débogage seront vos amis pour la vie lors du développement de votre thème.

Détectives de code,
on y va!

FireBug à la rescousse

Nous utiliserons FireBug, mais les concepts présentés s’appliquent tout autant aux autres inspecteurs de code.

Ouvrez FireBug en appuyant sur F12

Comment trouver un élément à l’aide de FireBug

  1. Activez l’outil de sélection de l’inspecteur de code
  2. Cliquez sur l’élément que vous voulez modifier
  3. Analysez le DOM, et observez les règles CSS appliquées à votre élément dans le panneau de droite

En observant les différentes règles CSS qui s’y appliquent, on peut voir que sa couleur est grise.

Nous allons changer les couleurs du bouton au bleu.
La couleur qu’on veut est #0099ff


.main-navigation li a {
    colour: #0099ff; /* Bleu */
}

Mettons ce code de côté pendant qu’on apprend nous allons l’insérer.

Spécificité des sélecteurs

CSS veut dire « cascading style sheets » ou, plutôt, « feuilles de style en cascade ».

L’aspect de « cascade » vient du fait que le fureteur lit les règles du début du fichier vers le bas, puis écrase les règles, dépendamment de l’ordre dans lequel elles y sont, ou de la spécificité du sélecteur.

Petit test surprise!

Nous avons une entête (h2) avec un classe de .entry-title et un ID de #sauce-poutine

Étant données les règles suivantes, notre entête sera de quelle couleur ?

<h2 id="sauce-poutine" class="entry-title">Titre vraiment génial</h2>

#sauce-poutine {
    color: blue;
}

body.single-post header h2.entry-title {
    color: red;
}
                    

Réponse:

Bleu

Une note !important(e)

Essayez d’éviter le truc !important dans vos feuilles de style.

« Mais ça fonctionne! Pourquoi devrais-je l’éviter? »

Sa nécessité peut être un signe que le thème que vous avez choisi est mal écrit.

Il se peut aussi que vous soyez simplement paresseux ;)

Essayez d’écrire un sélecteur plus spécifique plutôt que de mettre des !important partout.

Notre thème enfant

Accouche, qu'on baptise

Mise en situation

Je présume que vous travaillez dans votre environnement local et non sur votre site en ligne.

Sinon... pourquoi? pourquoi? pourquoi? Vous travaillez sans filet de sécurité.

Pour plus d’informations, il y a deux présentations à WordCamp qui pourraient vous intéresser :

Build a Website on the Moon: WordPress Development from Anywhere
et
Priming Your WordPress Canvas – Essentials for a Solid Foundation

Mise en situation

  • Le thème que nous utiliserons en tant que thème parent sera « Twenty Twelve »
  • Notre thème enfant s’appellera « Douze Poutines »

Mise en situation

  • Dans un gestionnaire de fichiers, naviguer jusqu’au répertoire \wp-content\themes\
  • Vous y trouverez le dossier de « Twenty Twelve ».
    Notez son nom de répertoire :

Mise en situation

  • Dans \wp-content\themes\, créez un nouveau dossier nommé \douzepoutines\
  • Naviguez dans le dossier \douzepoutines\
  • Créez-y un fichier nommé style.css

Le fichier style.css

  • Ouvrez votre nouveau fichier style.css dans votre éditeur de code préféré
  • En tout début du fichier, collez les lignes suivantes :
    (note : Nous allons ajouter la règle CSS de nos boutons bleus du même coup)

/*
Theme Name:     Douze Poutines
Theme URI:      http://isotrope.net/
Description:    J’adore Twenty Twelve!
Author:         Michal Bluma
Author URI:     http://isotrope.net/
Template:       twentytwelve
Version:        0.1.0
*/


.main-navigation li a {
    color: #0099ff; /* Bleu */
}

Sauvegardez le fichier

On a fini!

Notre thème enfant est créé.

Vous pensiez que ce serait plus compliqué?

Ça ne l’est pas.

Juré!

Comme vous n’êtes pas venus ici pour me voir faire deux copier-coller, je vais approfondir un peu plus...

Le fichier style.css

Dans l’entête que nous avons ajouté à style.css, les deux éléments les plus importants sont

Theme Name:     Douze Poutines
and
Template:       twentytwelve

Notre thème enfant doit avoir un nom, mais on doit surtout dire à WordPress trouver son thème parent.

C’est sur la ligne « Template: » qu’on indique le nom de dossier du thème parent.

Attention! C’est le nom de dossier (twentytwelve) qu’il faut indiquer, et non pas le nom du thème (Twenty Twelve).

Thème Enfant, active-toi!

  • Ouvrez une session dans le tableau de bord de WordPress
  • Dans le tableau de bord, naviguez à la section Apparence -> Thèmes
  • Génial! Notre thème enfant « Douze Poutines » y est.
  • Cliquez sur « Activer ».

Wow! Super!

On vient de créer un thèm....

Euhhhh......

Minute. Il y a quelque chose qui cloche.

Pourquoi avons-nous perdu tous les styles?

Le fichier style.css du thème enfant est chargé au lieu de celui du thème parent.

Ne vous en faites pas. La solution est simple.

Par contre, voyez-vous tous les beaux boutons de menu bleus? :)

Conserver les feuilles de style du thème parent

Ouvrez \wp-content\themes\douzepoutines\style.css

Ajoutez-y la ligne suivante :

@import url("../twentytwelve/style.css");

Cette ligne va après la déclaration du thème, mais avant votre première règle de CSS personnalisé

Version:        0.1.0
*/

@import url("../twentytwelve/style.css");

.main-navigation li a {

Ça y est!

On retient toutes les règles de style du thème parent et nous avons des beaux menus bleus.

Ajoutons un peu de JavaScript

(ou « Comment se confronter aux problèmes de script les plus fréquents » )

Ajouter du JavaScript à votre thème enfant

Nous allons créer un fichier qui va contenir tous nos scripts JavaScript personnalisés

  • Dans le dossier \wp-content\themes\twelvechild\ , créez un nouveau sous-dossier nommé \js\
  • Naviguez dans le dossier \js\ et créez un nouveau fichier nommé mes_scripts.js
  • Ouvrez le fichier mes_scripts.js dans votre éditeur de code préféré

Ajouter un peu de JavaScript

Pour cet exemple, nous allons simplement ajouter la largeur d’écran au titre de notre site :

« Mais ça ne sert à rien. Qui va faire ça dans la vraie vie? »
« C’est simplement pour démontrer certains obstacles. »
« OK. Comme tu veux... »

Ajouter un peu de JavaScript

Ajoutez ce code dans votre fichier mes_scripts.js

$( document ).ready( function() {
        var iLargeur = $( window ).width(),
            $siteTitleText = $( '#masthead' ).find( '.site-title a' ),
            strSiteTitle = $siteTitleText.text();

        $siteTitleText.text( strSiteTitle + ' : édition ' + iLargeur + 'px'  );
    } );

Voici ce que notre script va faire :

  • On met la largeur de la fenêtre dans une variable
  • On met de côté le texte du titre dans une autre variable
  • On va remplacer le texte du titre par « titre », puis un séparateur, puis « édition [largeur de la fenêtre] px »

Et le sondage donne...

Euh.....

Il ne se passe rien.

Nous devons indiquer à WordPress trouver notre fichier mes_scripts.js

WordPress fournit une fonction pour cela : wp_enqueue_script()

 

Nous devons aussi l’insérer au bon endroit dans l’exécution de WordPress.

WordPress exécute une multitude d’étapes avant de présenter la page au visiteur. Une de ces étapes se nomme wp_enqueue_scripts

Nous devons dire à WordPress : « Eille! Quand tu vas être rendu à l’étape d’insérer des scripts, peux-tu aussi ajouter celui-ci? »

functions.php

Nous devons créer un autre fichier :

  • Dans votre dossier wp-content\themes\douzepoutines\, créez un fichier nommé functions.php. (Assurez-vous que vous n’êtes pas encore dans le sous-dossier \js\ )
  • Ouvrez functions.php dans votre éditeur de code et insérez le code suivant :
    <?php
    
    add_action( 'wp_enqueue_scripts', 'ajouter_scripts_poutine' );
    
    function ajouter_scripts_poutine() {
        wp_enqueue_script('jquery');
    	wp_enqueue_script( 'scripts_poutine',
                get_stylesheet_directory_uri()  . '/js/mes_scripts.js'
                );
    } //ajouter_scripts_poutine()
    
    
  • Sauvegardez le fichier et rechargez votre page

Toujours rien!

Pas sûr que ce Michal Bluma sait de quoi il parle…

Retournons à FireBug et activons l’onglet « Script »

Le fichier y est!

Pourquoi ça ne fonctionne pas??

Gardez toujours un oeil sur la « console » lorsque vous travaillez avec le JavaScript

$ is not a function

Si vous avez déjà utilisé la bibliothèque jQuery, vous avez sûrement employé le symbole $.

Alors, pourquoi la console nous dit-elle que « $ n’est pas une fonction »?

WordPress charge jQuery en mode .noConflict() (Sans conflits)

Le $, le $, c’est pas une raison pour se faire mal.

WordPress essaie de vous protéger.

Il existe beaucoup de bibliothèques JavaScript. jQuery n’est pas la seule à utiliser $.

Ne vous en faites pas, à l’aide de deux lignes supplémentaires, on va pouvoir utiliser notre $ chéri autant qu’on le voudra.

Lorsque vous créez un fichier JavaScript et que vous savez que vous utiliserez la bibliothèque jQuery, entourez tout votre code de :

( function( $ ) {
    // Insérez votre code ici
} )( jQuery );

On est capables!

  • Ouvrez mes_scripts.js
  • Modifiez le code entier pour:
    ( function( $ ) {
        $( document ).ready( function() {
            var iLargeur = $( window ).width(),
                $siteTitleText = $( '#masthead' ).find( '.site-title a' ),
                strSiteTitle = $siteTitleText.text();
    
            $siteTitleText.text( strSiteTitle + ' : édition ' + iLargeur + 'px' );
        } );
    } )( jQuery );

Non?

Oui!!!

On a réussi!

Une co-traduction de
Michal Bluma et Isabelle Hurteau

Système de diapo : reveal.js par Hakim El Hattab

Sous peu...

PressKit
http://wearepresskit.com/

Inscrivez-vous dès aujourd'hui