Ce tutoriel n’est pas pour tout le monde.<\/p>\n
Vous n’avez pas besoin d’\u00eatre un d\u00e9veloppeur exp\u00e9riment\u00e9 pour suivre, mais vous avez besoin d’un v\u00e9ritable int\u00e9r\u00eat pour en savoir plus sur WordPress et le fonctionnement des th\u00e8mes.<\/p>\n
Si vous n’avez pas peur de travailler avec un peu de code et de vous salir les mains avec certains fichiers de th\u00e8me, alors bienvenue \u00e0 bord !<\/p>\n
Dans ce guide, vous apprendrez \u00e0 personnaliser votre site WordPress \u00e0 votre guise en utilisant un th\u00e8me enfant, mais d’abord\u2026<\/p>\n
Voyons exactement pourquoi vous devriez m\u00eame utiliser cette chose \u00e9trange appel\u00e9e "th\u00e8me enfant".<\/p>\n
R\u00e9p\u00e8te apr\u00e8s moi:<\/p>\n
Je jure solennellement de ne jamais modifier un fichier de th\u00e8me.<\/p>\n
Les nouveaux utilisateurs de WordPress qui souhaitent effectuer des personnalisations avec du code modifient souvent directement les fichiers de leur th\u00e8me. C’est un grand non-non.<\/p>\n
Pourquoi?<\/p>\n
Une raison: lorsque vous mettez \u00e0 jour votre th\u00e8me, WordPress remplacera votre th\u00e8me existant par la nouvelle version du th\u00e8me.<\/p>\n
Alors pourquoi est-ce important ?<\/p>\n
Imaginez que vous utilisez la version 1.04 du th\u00e8me Challenger<\/a>. Vous avez d\u00e9plac\u00e9 le menu dans le fichier header.php et ajout\u00e9 un nouveau CSS \u00e0 style.css. Ensuite, la version 1.05 sort et vous voyez la notification dans votre tableau de bord.<\/p>\n Lorsque vous mettez \u00e0 jour vers la v1.05, les fichiers header.php et style.css seront remplac\u00e9s par ceux de la v1.05 de Challenger. Ils ne contiendront pas les m\u00eames modifications que vous avez apport\u00e9es, votre travail sera donc perdu et il n’y a aucun moyen de le r\u00e9cup\u00e9rer. Cela peut \u00eatre assez d\u00e9courageant si vous avez pass\u00e9 des heures dans vos personnalisations.<\/p>\n Cependant, si vous placez vos personnalisations dans un th\u00e8me enfant Challenger, vous pouvez mettre \u00e0 jour en toute s\u00e9curit\u00e9 vers la version 1.05 sans perdre aucune de vos personnalisations car elles sont stock\u00e9es en toute s\u00e9curit\u00e9 dans le th\u00e8me enfant.<\/p>\n Cela deviendra un peu plus clair au fur et \u00e0 mesure que nous passerons \u00e0 un exemple r\u00e9el, alors allons-y et cr\u00e9ons un th\u00e8me enfant maintenant.<\/p>\n Bien que je ne vais pas expliquer en d\u00e9tail comment tout le code fonctionne ici, ce sont les id\u00e9es de base et les extraits dont vous avez besoin pour commencer.<\/p>\n Commencez par cr\u00e9er un dossier vide sur votre bureau. Vous pouvez le nommer comme vous le souhaitez, mais la convention de nommage standard consiste \u00e0 utiliser le nom du th\u00e8me en minuscule suivi de \u00ab\u00a0enfant\u00a0\u00bb et de remplacer les espaces par des tirets.<\/p>\n Par exemple, un th\u00e8me enfant pour le th\u00e8me Challenger aurait un nom de dossier \u00abchallenger-child \u00bb. Ce dossier contiendra tous les fichiers du th\u00e8me enfant.<\/p>\n Vous n’avez besoin que d’un fichier pour cr\u00e9er un th\u00e8me enfant techniquement valide, style.css.<\/p>\n \u00c0 l’aide de l’\u00e9diteur de code de votre choix, cr\u00e9ez un nouveau fichier dans le dossier du th\u00e8me enfant et nommez-le style.css.<\/p>\n Le fichier style.css est, bien s\u00fbr, l’endroit o\u00f9 vous ajouterez tous vos CSS pour personnaliser votre site. Pour que WordPress reconnaisse votre th\u00e8me enfant comme un th\u00e8me valide, vous devez ajouter un en-t\u00eate de feuille de style comme celui-ci tout en haut de style.css :<\/p>\n Vous pouvez copier cet en-t\u00eate exact et l’utiliser pour vos propres th\u00e8mes enfants. Changez simplement le nom du th\u00e8me avec le th\u00e8me que vous personnalisez.<\/p>\n La partie la plus importante est la valeur \u00ab\u00a0Template\u00a0\u00bb qui doit \u00eatre d\u00e9finie sur le nom du th\u00e8me parent. En particulier, le nom utilis\u00e9 pour le dossier contenant le th\u00e8me parent.<\/p>\n Avec cela en place, vous pouvez d\u00e9j\u00e0 activer le th\u00e8me enfant via le menu Apparence et l’utiliser. Cependant, votre site sera compl\u00e8tement sans style !<\/p>\n Lorsqu’un th\u00e8me enfant est activ\u00e9, WordPress ne chargera plus le fichier style.css du th\u00e8me parent et d\u00e9pendra plut\u00f4t de votre th\u00e8me enfant pour le faire.<\/p>\n Voici comment charger les deux feuilles de style\u2026<\/p>\n Dans votre \u00e9diteur de code, cr\u00e9ez un deuxi\u00e8me fichier dans le th\u00e8me enfant et nommez-le functions.php.<\/p>\n Ensuite, ajoutez le code suivant au fichier\u00a0:<\/p>\n Cette fonction indique \u00e0 WordPress de charger le fichier style.css du th\u00e8me parent, puis de charger le fichier style.css du th\u00e8me enfant par la suite. Le chargement ult\u00e9rieur de la feuille de style du th\u00e8me enfant facilite le remplacement des s\u00e9lecteurs CSS du th\u00e8me parent.<\/p>\n Comme je l’ai mentionn\u00e9 pr\u00e9c\u00e9demment, je ne vais pas couvrir ce code ligne par ligne, mais vous pouvez trouver une explication plus d\u00e9taill\u00e9e de cet extrait dans le Codex WordPress<\/a>.<\/p>\n C’est tout ce que vous devez faire pour cr\u00e9er un th\u00e8me enfant fonctionnel\u00a0!<\/p>\n Avec la configuration du th\u00e8me enfant, vous pouvez personnaliser votre site de trois mani\u00e8res.<\/p>\n Vous pouvez ajouter autant de nouveaux CSS dans le fichier style.css du th\u00e8me enfant que vous le souhaitez.<\/p>\n Lorsque vous recherchez des s\u00e9lecteurs \u00e0 utiliser dans votre CSS, ne v\u00e9rifiez pas le fichier style.css du th\u00e8me parent. Tous nos th\u00e8mes utilisent un \u00abpr\u00e9-processeur CSS \u00bb, donc nous ne regardons m\u00eame pas ce fichier! Au lieu de cela, suivez ce processus plus intelligent pour trouver des s\u00e9lecteurs CSS<\/a>, et je pense que vous aurez beaucoup plus de succ\u00e8s en personnalisant votre site.<\/p>\n Avec un th\u00e8me parent bien cod\u00e9, vous pouvez remplacer n’importe laquelle des fonctions trouv\u00e9es dans son fichier functions.php.<\/p>\n Par exemple, chaque fonction de Mission News<\/a> est encadr\u00e9e par un Une personnalisation courante n\u00e9cessitant un th\u00e8me enfant est la r\u00e9organisation des \u00e9l\u00e9ments. Par exemple, vous souhaiterez peut-\u00eatre d\u00e9placer le titre du message apr\u00e8s l’image en vedette plut\u00f4t qu’avant.<\/p>\n Vous pouvez prendre n’importe quel fichier mod\u00e8le trouv\u00e9 dans le th\u00e8me parent et en placer une copie dans votre th\u00e8me enfant. La version dans le th\u00e8me enfant sera alors charg\u00e9e \u00e0 la place. Cela vous permet d’ajouter, de r\u00e9organiser et de supprimer tous les \u00e9l\u00e9ments que vous souhaitez dans n’importe quelle partie du site.<\/p>\n Une fois que vous \u00eates satisfait de vos modifications, vous pouvez installer le th\u00e8me enfant sur votre site.<\/p>\n Les th\u00e8mes enfants peuvent \u00eatre t\u00e9l\u00e9charg\u00e9s comme les th\u00e8mes WordPress classiques, il ne faut donc qu’une minute ou deux pour les activer sur votre site. Suivez ce tutoriel pour installer votre th\u00e8me enfant\u00a0:<\/p>\n Comment installer un th\u00e8me enfant WordPress<\/a><\/p>\n Si vous \u00eates totalement nouveau dans tout cela, voici quelques outils gratuits pour vous aider.<\/p>\n Tout d’abord, si vous n’avez pas d’\u00e9diteur de code, consultez Visual Studio Code<\/a>. C’est simple mais flexible. Il est \u00e9galement totalement gratuit et de nombreux logiciels professionnels sont cr\u00e9\u00e9s avec. C’est ce que j’utilise pour cr\u00e9er des th\u00e8mes ici chez Compete Themes.<\/p>\n Deuxi\u00e8mement, cr\u00e9er un site WordPress local (hors ligne) est un excellent moyen d’essayer du code sans affecter votre site Web r\u00e9el. Bien que j’aie utilis\u00e9 et recommand\u00e9 MAMP<\/a> dans le pass\u00e9, Local by Flywheel<\/a> est tellement facile et simple \u00e0 utiliser que je l’adore. C’est ce que j’utilise pour le d\u00e9veloppement de th\u00e8mes et c’est aussi gratuit.<\/p>\n Reprenons l’exemple de tout \u00e0 l’heure…<\/p>\n Lors de la mise \u00e0 jour du th\u00e8me Challenger (ou de n’importe quel th\u00e8me), l’ensemble du r\u00e9pertoire \u00abchallenger\u00bb est remplac\u00e9, ce qui n’aura pas d’impact sur le th\u00e8me enfant car il poss\u00e8de d\u00e9sormais son propre r\u00e9pertoire dans le dossier \u00abchallenger-child \u00bb.<\/p>\n Une fois votre th\u00e8me enfant en place, vous pouvez effectuer en toute s\u00e9curit\u00e9 toutes les personnalisations que vous souhaitez et maintenir votre th\u00e8me parent \u00e0 jour.<\/p>\n Si vous d\u00e9butez avec CSS et PHP, cela peut vous prendre un certain temps pour obtenir vos personnalisations comme vous le souhaitez, mais avec un th\u00e8me enfant, vous disposez d’une excellente base pour travailler. N’oubliez pas de suivre ces \u00e9tapes<\/a> pour trouver les s\u00e9lecteurs CSS \u00e0 utiliser, et toutes les personnalisations de style que vous effectuez seront assez simples.<\/p>\nComment cr\u00e9er un th\u00e8me enfant<\/h2>\n
Configuration de base<\/h3>\n
Cr\u00e9er le fichier style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nCr\u00e9ez le fichier functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nPersonnalisation avec votre nouveau th\u00e8me enfant<\/h2>\n
Ajouter et remplacer des styles<\/h3>\n
Fonctions de remplacement<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>ch\u00e8que. Cela signifie que vous pouvez copier la fonction dans le fichier functions.php de votre th\u00e8me enfant. Ensuite, vous pouvez apporter les modifications que vous souhaitez \u00e0 la fonction l\u00e0-bas.<\/p>\nRemplacer les mod\u00e8les<\/h3>\n
Installation du th\u00e8me enfant<\/h3>\n
Vos mises \u00e0 jour sont en s\u00e9curit\u00e9<\/h2>\n