52
GETTING STARTED WITH CHILD THEMES NICK ADAMS @NICKADAMSTV Mise en route avec des Child Themes

WordCamp Montreal 2016

Embed Size (px)

Citation preview

Page 1: WordCamp Montreal 2016

GETTING STARTED WITH CHILD THEMES

NICK ADAMS @NICKADAMSTV

Mise en route avec des Child Themes

Page 2: WordCamp Montreal 2016

PART 1: WHAT ARE CHILD THEMES?

“A CHILD THEME IS A THEME THAT INHERITS THE FUNCTIONALITY AND STYLING OF ANOTHER THEME, CALLED THE PARENT THEME. CHILD THEMES ARE THE RECOMMENDED WAY OF MODIFYING AN EXISTING THEME.”

- WORDPRESS CODEXBookmark it!

Plus d' informations sont disponibles à codex.wordpress.org

Page 3: WordCamp Montreal 2016

THINK OF IT THIS WAY…• YOUR PARENT THEME IS LIKE YOUR HEAD.• YOUR CHILD THEME IS LIKE A HAT.• CUSTOMIZING THE CHILD THEME IS LIKE CHANGING THE HAT.•UPDATING THE PARENT THEME IS LIKE GETTING A HAIRCUT.

Le Parent Theme est comme la tête , le Child Theme est comme un chapeau.

Page 4: WordCamp Montreal 2016

Mais, je déteste les Habs.

Page 5: WordCamp Montreal 2016

PART 2: WHY USE A CHILD THEME?

“IF YOU MODIFY A THEME DIRECTLY AND IT IS UPDATED, THEN YOUR MODIFICATIONS MAY BE LOST. BY USING A CHILD THEME YOU WILL ENSURE THAT YOUR MODIFICATIONS ARE PRESERVED.”

- WORDPRESS CODEXMise à jour d'un Parent Theme effacera vos personnalisations.

Page 6: WordCamp Montreal 2016

WHY DOES THAT HAPPEN?• WHEN YOU EDIT THE CSS FILE(S) IN

YOUR THEME, YOU ARE CHANGING THE THEME FILES.

• WHEN YOU UPDATE A THEME, IT OVERWRITES THOSE FILES.

• YOUR CHANGES WILL DISAPPEAR WITH IT.Mises à jour remplacent les files de thème.

Page 7: WordCamp Montreal 2016

YOU WILL THEN WANT TO DO THIS…

Ensuite, vous êtes en colère.

Page 8: WordCamp Montreal 2016

ALWAYS?• TECHNICALLY: NO.

• IF YOU AREN’T USING A CHILD THEME, BUT YOU ARE USING A PLUGIN TO MANAGE CUSTOM CSS, SUCH AS JETPACK, THEN THIS ISN’T THE CASE.

• BUT REMEMBER, IF YOU’RE USING JETPACK’S CUSTOM CSS MODULE AND YOU CHANGE YOUR THEMES, YOUR CUSTOM CSS WILL DISAPPEAR.

Utilisation de plugins comme Jetpack peut éviter ce problème.

Page 9: WordCamp Montreal 2016

PART 3: HOW TO CREATE A CHILD THEME

Maintenant, nous créons un Child Theme.

Page 10: WordCamp Montreal 2016

FOR THIS DEMONSTRATION…• I WILL BE USING THE CURRENT

WORDPRESS DEFAULT THEME: TWENTY SIXTEEN

• I WILL BE EDITING THE FILES LIVE ON THE SITE.(DON’T DO THIS IN REAL LIFE. I’LL EXPLAIN SOON.)

• I NEEDED A THIRD BULLET POINT.Je vais utiliser le thème Twenty Sixteen. Aussi, mes blagues sont stupides.

Page 11: WordCamp Montreal 2016

Twenty Sixteen with no modifications.

Twenty Sixteen sans personnalisation.

Page 12: WordCamp Montreal 2016

Only Twenty Sixteen is installed.

Un seul thème installé.

Page 13: WordCamp Montreal 2016

A CHILD THEME REQUIRES…

• FUNCTIONS.PHP• STYLE.CSSYUP… THAT’S IT!

Seuls deux thèmes sont nécessaires

Page 14: WordCamp Montreal 2016

functions.php

Utilisez ce code.

Page 15: WordCamp Montreal 2016

Why the functions method?

Cette voie est la plus rapide.

SPEED(THE @IMPORT METHOD CAN SLOW THE LOADING OF STYLESHEETS)

Page 16: WordCamp Montreal 2016

How does it know which is the parent theme?

Comment sait-il que est le Parent Theme?

Page 17: WordCamp Montreal 2016

style.css

Utilisez ce code.

Page 18: WordCamp Montreal 2016

NEXT STEPS…• PUT BOTH OF THOSE FILES,

FUNCTIONS.PHP AND STYLE.CSS INTO A FOLDER TOGETHER AND NAME IT WHATEVER YOU ARE NAMING YOUR CHILD THEME.

• PUT THAT FOLDER INTO A ZIP FILE.

Mettez ces files dans un dossier, puis zip.

Page 19: WordCamp Montreal 2016

Zip file with the folder inside.

Des images en disent mille mots ... en français.

Page 20: WordCamp Montreal 2016

Files inside the folder within the zip file.

Je l'utilise beaucoup d'images.

Page 21: WordCamp Montreal 2016

Il est fou dans toutes les langues.

Page 22: WordCamp Montreal 2016

Add Themes page with “Upload Theme” in the top left.

Cliquez sur le bouton Upload Theme.

Page 23: WordCamp Montreal 2016

Find your new child theme file on your computer, then select it and press “Install Now”.

Trouvez vos files de thème.

Page 24: WordCamp Montreal 2016

What it will say if the Parent Theme is already installed.

Si le Parent Theme est déjà installé.

Page 25: WordCamp Montreal 2016

Parent Theme is not installed, but can be installed from the WordPress.org Theme Directory.

Si le Parent Theme est sur wordpress.org.

Page 26: WordCamp Montreal 2016

Parent Theme is not installed and can’t be automatically installed from the WordPress.org Theme Directory.

Si le Parent Theme est pas sur wordpress.org.

Page 27: WordCamp Montreal 2016

Si le Parent Theme n'existe pas.

If the Parent Theme is deleted

Page 28: WordCamp Montreal 2016

Child Theme is active!

Je ne casse pas encore rien!

Page 29: WordCamp Montreal 2016

PART 4: MAKING CHANGES TO THE CHILD THEME

NOTE: WHENEVER POSSIBLE, YOU SHOULD NOT MAKE CHANGES TO YOUR WEBSITE’S FILES DIRECTLY ON THE SERVER, UNLESS YOU’RE 100% SURE THAT IT WON’T CAUSE PROBLEMS.WHENEVER POSSIBLE, MAKE A COPY OF THE FILE YOU WANT TO EDIT, MAKE THE CHANGES ON YOUR COMPUTER AND THEN USE FTP TO UPLOAD THE NEW FILE.Ne pas apporter des modifications à un site en production.

Page 30: WordCamp Montreal 2016

Let’s change the font of the Entry Title. We can see in the Inspector that its class is “entry-title”.

Nous allons changer la police du titre.

Page 31: WordCamp Montreal 2016

I have added the change to my Child Theme’s style.css file. Note that there isn’t any other text in this file. All of the

Parent Theme’s styles are still in the Parent Theme’s files. But my changes to the Child Theme’s style.css file will

override the styles in the Parent Theme’s style.css.

Les modifications de style vont supplanter les styles du Parent Theme.

Page 32: WordCamp Montreal 2016

Note the theme you are currently editing.

Modifiez le file correct.

Page 33: WordCamp Montreal 2016

Don’t forget to click update.

N’oubliez pas de sauvegarder !

Page 34: WordCamp Montreal 2016

Oh, look! A different font!

La police est différente!

Page 35: WordCamp Montreal 2016

Twenty Sixteen with no modifications.

Je l'ai déjà montré cette image.

Page 36: WordCamp Montreal 2016

How about changing the header background…

Modification de l'arrière-plan.

Page 37: WordCamp Montreal 2016

The header’s background being changed in the style.css file.

J'ajoute un peu de CSS.

Page 38: WordCamp Montreal 2016

Blue is always fun.

Ça marche!

Page 39: WordCamp Montreal 2016

Make a quick change to the font colors in the header.

Page 40: WordCamp Montreal 2016

That looks pretty good.

Cela ressemble mieux.

Page 41: WordCamp Montreal 2016

Making a functionality change.

Modification de la fonctionnalité.

Page 42: WordCamp Montreal 2016

Making a functionality change.

Modifiez functions.php

Page 43: WordCamp Montreal 2016

Now we have a new widget area

Nouvelle zone de widget.

Page 44: WordCamp Montreal 2016

Before the new template

Avant.

Page 45: WordCamp Montreal 2016

With the new template

Après.

Page 46: WordCamp Montreal 2016

IMPORTANT NOTE• CHANGES TO STYLE.CSS OVERRIDE ANY PREEXISTING STYLES FOR THAT ELEMENT OR CLASS THAT EXISTS IN THE PARENT THEME’S STYLE.CSS

• CHANGES TO FUNCTIONS.PHP WILL BE LOADED IN ADDITION TO THE PARENT THEME’S FUNCTIONS.PHP

• THIS MEANS THAT IF YOU NEED TO REMOVE AN ACTION, YOU WILL NEED TO DECLARE THAT IN THE CHILD’S FUNCTIONS.PHPLes modifications apportées à functions.php vont ajouter des fonctionnalités.

Page 47: WordCamp Montreal 2016

CONGRATULATIONS! IT’S A CHILD THEME!• YOU CAN NOW UPDATE TWENTY

SIXTEEN ANYTIME AN UPDATE IS AVAILABLE WITHOUT HAVING TO WORRY ABOUT LOSING ANY OF YOUR CHANGES.

• YOU CAN ALSO INSTALL THIS CHILD THEME ON ANY OTHER WORDPRESS SITE AND IT WILL LOOK EXACTLY THE SAME THERE, NO EXTRA CONFIGURATION REQUIRED.

• YOU CAN EVEN UPLOAD IT TO WORDPRESS.ORGNous avons fini.

Page 48: WordCamp Montreal 2016

Ce site peut vous aider.

Page 49: WordCamp Montreal 2016

PART 5: FRAMEWORKS & STARTER THEMES

Le développeur le plus intéressant dans le monde!

Page 50: WordCamp Montreal 2016

STARTER THEMES• TYPICALLY, A STARTER THEME IS ONE

THAT YOU ARE EXPECTED TO EDIT DIRECTLY AND TURN INTO ITS OWN PARENT THEME. IT IS OFTEN INCOMPLETE.

• UNDERSCORES, ALSO CALLED _S, IS A VERY POPULAR EXAMPLE OF A STARTER THEME.

On crée des Parent Themes de thèmes de démarrage.

Page 51: WordCamp Montreal 2016

FRAMEWORKS• TYPICALLY, A FRAMEWORK IS A PARENT

THEME WHICH OFTEN HAS LITTLE OR NO STYLING, WHICH YOU ARE SUPPOSED TO CREATE A CHILD THEME FOR TO ADD STYLES AND FUNCTIONALITY.

• GENESIS IS A VERY POPULAR EXAMPLE OF A FRAMEWORK.

Les cadres sont des Parent Themes sans styles

Page 52: WordCamp Montreal 2016

MERCI!

Thank You!