Comment modifier le code WordPress – HTML, CSS, PHP (Guide simple)

Bien que WordPress facilite la gestion d’un site web pour les non codeurs, il arrivera probablement un moment où vous voudrez modifier le code dans WordPress pour avoir un peu plus de contrôle sur l’apparence ou le fonctionnement de votre site.

Pour vous aider à le faire, cet article vous montrera comment modifier en toute sécurité le code dans WordPress de plusieurs façons différentes :

• Modifier du HTML WordPress pour des articles ou des pages
• Modifier le code HTML/PHP de votre thème
• Ajouter du CSS personnalisé à votre site

Si vous savez déjà ce que vous voulez faire, vous pouvez cliquer sur l’un des liens ci-dessus pour aller directement à cette section spécifique. Sinon, passons au montage !

Comment modifier le HTML de WordPress pour des articles ou des pages

Commençons par la façon la plus simple de modifier le HTML de WordPress – accéder au code source de chaque article, page ou autre type de publication WordPress. Vous pouvez le faire aussi bien dans le nouvel éditeur de blocs WordPress (Gutenberg) que dans l’ancien éditeur TinyMCE classique.

Comment modifier le HTML WordPress dans l’éditeur de bloc (Gutenberg)

Il y a plusieurs façons de travailler avec le HTML dans Gutenberg.

Tout d’abord, si vous voulez simplement ajouter votre propre code HTML à un contenu, je vous recommande de ne pas essayer de modifier le code source complet de votre article, car cela rend les choses inutilement compliquées.Au lieu de cela, vous pouvez simplement utiliser le bloc HTML personnalisé dédié et coller le HTML que vous voulez y utiliser :

Cependant, il peut aussi arriver un moment où vous devez modifier directement le HTML d’un bloc différent. Par exemple, si vous voulez ajouter une balise nofollow à un lien dans l’éditeur de blocs, vous devrez modifier le HTML de ce bloc. Il y a deux façons de le faire… Tout d’abord, vous pouvez cliquer sur les options d’un bloc individuel et sélectionner l’option Modifier en HTML :

Cela vous permettra de modifier le HTML pour ce bloc individuel :

Ou, si vous voulez modifier le HTML pour l’ensemble de votre article, vous pouvez accéder à l’éditeur de code à partir du menu déroulant Outils et options. Vous pouvez également utiliser ce raccourci clavier pour basculer entre la modification de code et la modification visuelle – Ctrl + Shift + Alt + M :

Gardez à l’esprit que, dans l’éditeur de code complet, vous devrez contourner toutes ces balises pour les blocs – par exemple <!-- wp:paragraphe -->.

Comment modifier le HTML de WordPress dans l’éditeur classique (TinyMCE)

Si vous utilisez toujours l’éditeur WordPress classique (TinyMCE), vous pouvez modifier du HTML pour l’ensemble de votre article en allant dans l’onglet Texte :

Comment modifier le code source dans votre thème WordPress

Maintenant, entrons dans le sujet plus vaste, qui est de savoir comment modifier le code dans votre thème WordPress. Les enjeux sont un peu plus élevés, nous devons donc répondre à quelques questions préliminaires avant de passer au mode d’emploi. Pourquoi les enjeux sont-ils plus élevés ? Eh bien, tout simplement, c’est parce que vous pouvez casser votre site si vous ratez quelque chose ici ! Dans les dernières versions, WordPress a rendu beaucoup plus difficile de le faire accidentellement, mais modifier le code source de votre site va toujours ouvrir la porte à des problèmes, donc vous devez vous assurer que vous le faites en toute sécurité.

Utiliser un thème enfant pour toute modification directe du code

Si vous prévoyez de modifier directement le code dans les fichiers de votre thème, vous devez utiliser un thème enfant plutôt que de modifier le thème « parent ». Sans thème enfant, tout changement de code que vous effectuez sera écrasé la prochaine fois que vous mettrez à jour votre thème. Cependant, lorsque vous utilisez un thème enfant, vous pourrez rapidement mettre à jour le thème parent sans perdre les modifications que vous avez apportées à votre thème enfant. Si vous souhaitez en savoir plus sur les avantages des thèmes enfants, ainsi que sur la façon d’en créer un, consultez notre guide complet des thèmes enfants WordPress.

Envisagez d’utiliser une extension au lieu de modifier le code dans le thème enfant

Si vous prévoyez de modifier le fonctionnement de votre thème, vous aurez probablement besoin de travailler en modifiant directement le code source de votre thème enfant. Cependant, si vous voulez modifier du code dans WordPress pour une raison différente – comme ajouter un script de suivi dans la section <head> de votre site ou ajouter un extrait au fichier functions.php de votre thème – vous pouvez utiliser une extension à la place. Par exemple, Head, Footer and Post Injections permet d’injecter facilement des extraits de code là où c’est nécessaire. Et parce que ces extraits de code sont tous séparés dans l’interface de l’extension, il est également plus facile de les gérer à l’avenir. De même, si vous ajoutez un extrait de code qui pourrait aller dans le fichier functions.php de votre thème enfant, l’extension gratuite Code Snippets est une excellente option. En résumé, si vous voulez modifier du code dans WordPress pour ajouter des extraits de code à votre thème…

• Section <head>
• Fichier Functions.php

…alors vous devriez envisager d’utiliser une extension au lieu de modifier des fichiers de votre thème, car cela simplifiera la gestion de ces extraits et assurera qu’ils ne seront pas écrasés lorsque vous mettrez à jour votre thème. Si vous avez besoin de faire d’autres modifications, voyons comment modifier le code source de votre thème.

Utilisez l’éditeur de code WordPress dans le tableau de bord

Si vous prévoyez de modifier directement le code de votre thème, nous vous recommandons fortement de faire une sauvegarde de votre site avant de le faire (soit l’ensemble de votre site, soit le fichier que vous modifiez). Une fois que vous avez fait cela, vous pouvez accéder à l’éditeur de code de thème dans le tableau de bord en allant sur Apparence → Éditeur de thème. Ici, WordPress vous donnera d’abord un avertissement similaire à ce que vous avez appris ci-dessus :

Ensuite, vous pourrez utiliser la colonne latérale de droite pour parcourir les différents fichiers de thème et l’éditeur de code lui-même pour faire vos propres modifications :

Utilisez SFTP pour modifier le code dans WordPress

Comme alternative à l’éditeur de code dans le tableau de bord, vous pouvez également modifier des fichiers de thème via SFTP. Cette approche présente deux avantages :

• Vous pouvez utiliser votre éditeur de code préféré.
• Si vous cassez accidentellement quelque chose, vous pouvez régler le problème immédiatement. En revanche, si vous modifiez du code via votre tableau de bord WordPress, il y a toujours une chance que vous puissiez casser quelque chose qui vous empêche d’accéder à votre tableau de bord WordPress, ce qui signifie que vous devrez vous connecter via SFTP pour résoudre le problème (bien que cela soit moins probable grâce aux récents changements).

Voici comment vous connecter à votre site via FTP. Une fois que vous avez fait cela, rendez-vous dans le répertoire de votre thème – …/wp-content/themes/child-theme-name. Trouvez le fichier que vous voulez modifier et faites un clic droit dessus. La plupart des programmes FTP vous donneront une option pour modifier le fichier, et le rechargeront automatiquement une fois que vous aurez effectué vos modifications. Cependant, nous vous recommandons fortement de télécharger une version originale du fichier sur votre bureau avant d’effectuer toute modification. De cette façon, vous pouvez simplement téléverser cette version originale si vous cassez accidentellement quelque chose :

Comment ajouter du CSS personnalisé à WordPress

Si vous voulez seulement ajouter du CSS personnalisé à WordPress, plutôt que de modifier le code HTML ou PHP de WordPress, vous n’avez pas besoin d’utiliser l’éditeur de code dans le tableau de bord ou les méthodes SFTP. Au lieu de cela, vous pouvez utiliser la personnalisation de WordPress. En plus d’être une option plus simple, un autre avantage de cette approche est que vous pourrez prévisualiser vos changements en temps réel. Pour commencer, allez sur Apparence → Personnaliser dans votre tableau de bord WordPress :

Ensuite, recherchez l’option CSS supplémentaire dans l’outil de personnalisation de WordPress :

Cela ouvrira un éditeur de code où vous pourrez ajouter le CSS de votre choix. Au fur et à mesure que vous ajoutez du CSS, l’aperçu en direct de votre site sera automatiquement mis à jour en fonction de ces changements :

Une autre bonne option pour ajouter du CSS est l’extension Simple CSS de Tom Usborne. Elle vous donne une option similaire dans l’outil de personnalisation de WordPress, et vous permet également d’ajouter des CSS personnalisés à des articles ou des pages individuelles via une boîte mêta. Enfin, si vous voulez ajouter une tonne de CSS personnalisés – comme des centaines ou des milliers de lignes – une autre option est de créer votre propre feuille de style CSS personnalisée et utiliser wp_enqueue_scripts pour l’ajouter à votre thème.

Résumé

Si vous voulez modifier du code dans un article ou une page WordPress, le nouvel éditeur de blocs et l’éditeur classique vous offrent tous deux des options pour modifier directement du HTML. Par contre, si vous voulez modifier le code source de votre thème WordPress, il y a quelques points à considérer :

• Utilisez toujours un thème enfant au lieu de faire des modifications de code directement sur le thème parent.
• Envisagez d’utiliser une extension pour gérer les extraits que vous ajoutez à la partie <head> ou au fichier functions.php, car ces extensions peuvent offrir une approche plus simple et plus facile à gérer.

Si vous avez encore besoin de modifier directement du code après ces considérations, vous pouvez modifier le code source de votre thème enfant à partir de votre tableau de bord WordPress en allant sur Apparence → Éditeur de thème. Ou, vous pouvez vous connecter à votre site via SFTP et modifier le code de cette façon. Enfin, si vous souhaitez simplement ajouter des CSS personnalisés, vous n’avez pas besoin de modifier directement le code de votre thème. Au lieu de cela, vous pouvez simplement utiliser la zone CSS supplémentaire dans l’outil de personnalisation de WordPress ou une extension comme Simple CSS. Des questions sur la façon de modifier le code dans WordPress ? Posez-les dans les commentaires !