Catégorie : Wordpress

Pour bien modifier votre thème WordPress, et le modifier correctement, vous allez avoir besoin de créer un thème enfant.

Un thème enfant vous permettra de modifier votre thème WordPress courant sans pour autant vous priver de ses mises-à-jour.

1 – Créer un thème enfant sous WordPress

Un excellent plugin existe pour créer un thème enfant sous WordPress, il s’agit de Child Theme Configurator, nous en parlions dans notre article : Les meilleurs plugins WordPress en 2017.

En un clic, il vous permet de créer la copie conforme de votre thème actuel WordPress.

Une fois installé, Child Theme Configurator se trouve dans Outils > Thèmes enfants.

Pour créer un nouveau thème enfant WordPress il suffit de voir l’option : “CRÉER un nouveau thème enfant“. Une fois analysé, votre thème est prêt à être copié dans un thème enfant, cliquez sur le bouton en bas “Create new child theme“, laissez toutes les options proposées par défaut.

2 – Activer son thème enfant pour modifier son thème WordPress

Une fois le thème enfant créé, dans Apparence, un nouveau thème s’est créé, votre thème enfant. Activez-le.

A ce stade retournez sur votre site, vous devriez avoir exactement la même chose qu’avec le thème parent.

Si ce n’est pas le cas, la feuille de style a probablement sauté, essayez de changer cette option dans Child Theme Configurator ou laissez-nous un commentaire pour que l’on puisse vous aider.

Maintenant que le thème enfant de votre thème WordPress est activé, nous allons pouvoir modifier le thème sans casser les mises à jour du thème parent.

3 – On peut maintenant customiser son thème WordPress

Dans Apparence > Editeur, vous voyez que la structure a changé, un seul fichier CSS existe, le fichier style.css dont vous allez vous servir pour réécrire les propriétés de votre thème parent. Ne touchez pas au fichier functions.php.

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.1.1488900103
Updated: 2017-03-07 15:21:43
*/

C’est ici que vous placerez votre nouveau CSS, le fichier est vide, c’est normal ! Par exemple, vous allez pouvoir changer la couleur de fond de l’entête votre thème WordPress ici, grâce au CSS.

Modifier le code CSS de son thème WordPress

Sur Google Chrome (CTRL+MAJ+I), sur Firefox (F12).

• La petite flèche en haut à gauche de la console permet de sélectionner un élément (passez votre souris sur la page).
• En bas à gauche, on peut modifier notre code CSS à la volée pour voir ce que cela donne.

Une fois le code CSS modifié, il n’y a plus qu’à le reporter dans notre feuille de style (style.css que l’on a vu plus haut).

body:not(.home) header#masthead { background-color: white; }

Depuis ce que j’ai pu constater dans mon code CSS, ce code devrait fonctionner car au niveau de l’inclusion du code du thème enfant dans WordPress, cette inclusion est faite après le thème parent, donc prend le dessus.

Si ce n’est pas le cas, ne pas hésiter les variantes suivantes, en rajoutant “html” devant ou “!important” après la propriété (en dernier recourt ou pour overrider ce qui est écrit avec la balise html “style”.

html body:not(.home) header#masthead { background-color: white; }

body:not(.home) header#masthead { background-color: white !important; }

Bon courage ! N’hésitez pas à nous poser vos questions sur la modification de thèmes WordPress en commentaire !!