WordCamp Montreal 2016
-
Upload
nickadamstv -
Category
Technology
-
view
188 -
download
0
Transcript of WordCamp Montreal 2016
![Page 1: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/1.jpg)
GETTING STARTED WITH CHILD THEMES
NICK ADAMS @NICKADAMSTV
Mise en route avec des Child Themes
![Page 2: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/2.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/3.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/4.jpg)
Mais, je déteste les Habs.
![Page 5: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/5.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/6.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/7.jpg)
YOU WILL THEN WANT TO DO THIS…
Ensuite, vous êtes en colère.
![Page 8: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/8.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/9.jpg)
PART 3: HOW TO CREATE A CHILD THEME
Maintenant, nous créons un Child Theme.
![Page 10: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/10.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/11.jpg)
Twenty Sixteen with no modifications.
Twenty Sixteen sans personnalisation.
![Page 12: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/12.jpg)
Only Twenty Sixteen is installed.
Un seul thème installé.
![Page 13: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/13.jpg)
A CHILD THEME REQUIRES…
• FUNCTIONS.PHP• STYLE.CSSYUP… THAT’S IT!
Seuls deux thèmes sont nécessaires
![Page 14: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/14.jpg)
functions.php
Utilisez ce code.
![Page 15: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/15.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/16.jpg)
How does it know which is the parent theme?
Comment sait-il que est le Parent Theme?
![Page 17: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/17.jpg)
style.css
Utilisez ce code.
![Page 18: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/18.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/19.jpg)
Zip file with the folder inside.
Des images en disent mille mots ... en français.
![Page 20: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/20.jpg)
Files inside the folder within the zip file.
Je l'utilise beaucoup d'images.
![Page 21: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/21.jpg)
Il est fou dans toutes les langues.
![Page 22: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/22.jpg)
Add Themes page with “Upload Theme” in the top left.
Cliquez sur le bouton Upload Theme.
![Page 23: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/23.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/24.jpg)
What it will say if the Parent Theme is already installed.
Si le Parent Theme est déjà installé.
![Page 25: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/25.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/26.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/27.jpg)
Si le Parent Theme n'existe pas.
If the Parent Theme is deleted
![Page 28: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/28.jpg)
Child Theme is active!
Je ne casse pas encore rien!
![Page 29: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/29.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/30.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/31.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/32.jpg)
Note the theme you are currently editing.
Modifiez le file correct.
![Page 33: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/33.jpg)
Don’t forget to click update.
N’oubliez pas de sauvegarder !
![Page 34: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/34.jpg)
Oh, look! A different font!
La police est différente!
![Page 35: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/35.jpg)
Twenty Sixteen with no modifications.
Je l'ai déjà montré cette image.
![Page 36: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/36.jpg)
How about changing the header background…
Modification de l'arrière-plan.
![Page 37: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/37.jpg)
The header’s background being changed in the style.css file.
J'ajoute un peu de CSS.
![Page 38: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/38.jpg)
Blue is always fun.
Ça marche!
![Page 39: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/39.jpg)
Make a quick change to the font colors in the header.
![Page 40: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/40.jpg)
That looks pretty good.
Cela ressemble mieux.
![Page 41: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/41.jpg)
Making a functionality change.
Modification de la fonctionnalité.
![Page 42: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/42.jpg)
Making a functionality change.
Modifiez functions.php
![Page 43: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/43.jpg)
Now we have a new widget area
Nouvelle zone de widget.
![Page 44: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/44.jpg)
Before the new template
Avant.
![Page 45: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/45.jpg)
With the new template
Après.
![Page 46: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/46.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/47.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/48.jpg)
Ce site peut vous aider.
![Page 49: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/49.jpg)
PART 5: FRAMEWORKS & STARTER THEMES
Le développeur le plus intéressant dans le monde!
![Page 50: WordCamp Montreal 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/50.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/51.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062412/5873d44f1a28ab9d168b6d39/html5/thumbnails/52.jpg)
MERCI!
Thank You!