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 éditer le code en toute sécurité dans WordPress de plusieurs façons différentes :

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 éditer le HTML de WordPress pour des articles/pages individuels

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

Comment éditer 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 d’éditer 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 :

Bloc Gutenberg HTML personnalisé

Bloc Gutenberg HTML personnalisé

Cependant, il peut aussi arriver un moment où vous devez éditer 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 éditer 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 Traiter comme HTML :

Comment éditer un seul bloc au format HTML

Comment éditer un seul bloc au format HTML

Cela vous permettra d’éditer le HTML pour ce bloc individuel :

Exemple d'édition du code HTML d'un bloc

Exemple d’édition du code HTML d’un bloc

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

Comment accéder à l'éditeur de code complet dans Gutenberg

Comment accéder à l’éditeur de code complet dans Gutenberg

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

L'édition de code dans WordPress n'a pas besoin d'être difficile ! Jetez un coup d'œil à ce guide facile sur la façon d'ajuster le HTML, le CSS et le PHP. 🤓 Cliquez pour Tweet

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

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

Comment éditer du HTML dans l'éditeur WordPress classique

Comment éditer du HTML dans l’éditeur WordPress classique

Comment éditer le code source dans votre thème WordPress

Maintenant, entrons dans le sujet plus vaste, qui est de savoir comment éditer 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 loupez quelque chose ici ! Dans les dernières versions, WordPress a rendu beaucoup plus difficile de le faire accidentellement, mais éditer 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 d’éditer 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 un plugin 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 éditant directement le code source de votre thème enfant. Cependant, si vous voulez éditer 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 un plugin à 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 du plugin, 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, le plugin gratuit Code Snippets est une excellente option. En résumé, si vous voulez éditer du code dans WordPress pour ajouter des extraits à votre thème…

  • Section <head>
  • Fichier Functions.php

…alors vous devriez envisager d’utiliser un plugin au lieu d’éditer 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 éditer le code source de votre thème.

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

Si vous prévoyez d’éditer 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 :

L'avertissement avant d'accéder à l'éditeur de code du tableau de bord

L’avertissement avant d’accéder à l’éditeur de code du tableau de bord

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

L'éditeur de code WordPress dans le tableau de bord

L’éditeur de code WordPress dans le tableau de bord

Utilisez SFTP pour éditer le code dans WordPress

Comme alternative à l’éditeur de code dans le tableau de bord, vous pouvez également éditer 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, naviguez dans le dossier de votre thème – …/wp-content/themes/child-theme-name. Trouvez le fichier que vous voulez éditer et faites un clic droit dessus. La plupart des programmes FTP vous donneront une option pour éditer 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 retélécharger cette version originale si vous cassez accidentellement quelque chose :

Comment éditer le HTML WordPress via SFTP

Comment éditer le HTML WordPress via SFTP

Comment ajouter un CSS personnalisé à WordPress

Si vous voulez seulement ajouter des CSS personnalisés à 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 le Customizer 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 :

Comment accéder au Customizer WordPress

Comment accéder au Customizer WordPress

Ensuite, recherchez l’option CSS supplémentaire dans le Customizer WordPress :

Où trouver l'option CSS supplémentaire dans le Customizer WordPress

Où trouver l’option CSS supplémentaire dans le Customizer 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 :

Comment éditer les CSS dans le Customizer WordPress

Comment éditer les CSS dans le Customizer WordPress

Une autre bonne option pour ajouter du CSS est le plugin Simple CSS de Tom Usborne. Il vous donne une option similaire dans le Customizer WordPress, et il 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 éditer du code dans un article ou une page WordPress individuelle, le nouvel éditeur de blocs et l’éditeur classique vous offrent tous deux des options pour éditer directement du HTML. Par contre, si vous voulez éditer 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 un plugin pour gérer les extraits que vous ajoutez à la partie <head> ou au fichier functions.php, car ces plugins peuvent offrir une approche plus simple et plus facile à gérer.

Si vous avez encore besoin d’éditer du code directement après ces considérations, vous pouvez éditer 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 d’éditer directement le code de votre thème. Au lieu de cela, vous pouvez simplement utiliser la zone CSS supplémentaire dans le Customizer WordPress ou un plugin comme Simple CSS. Des questions sur la façon d’éditer le code dans WordPress ? Demandez dans les commentaires !

2
Partages