L’utilisation d’un CMS tel que WordPress facilite la création d’un site, cependant parfois il sera nécessaire de devoir ajouter du code personnalisé CSS ou HTML ou de modifier un déjà existant pour pouvoir créer ou personnaliser un type de contenu, de style ou de mise en page.
Heureusement, sous WordPress nous pouvons modifier le code HTML et CSS du thème, du site ou seulement d’un contenu précis assez facilement. Le tarif de création d’un site WordPress comprend souvent sa maintenance, alors en cas de besoin, vous pouvez aussi vous rapprocher de votre prestataire si vous ne voulez pas modifier vous-même le code de votre site.
Dans les prochaines parties de ce tutoriel, nous allons voir comment modifier et ajouter du code web à son site WordPress.
Sommaire :
La modification ou l’ajout d’un code HTML, voire CSS, est possible directement lors de l’édition d’une page ou d’un article spécifique. Il existe de multiples façons d’ajouter du code sous l’éditeur Gutenberg de WordPress mais il est tout à fait possible de le faire aussi avec l’éditeur classique.
Voici les différentes possibilités qui s’offrent à vous pour interagir avec du code avec l’éditeur classique ou Gutenberg.
Si vous avez déjà utilisé l’éditeur classique de WordPress vous aurez surement remarqué les 2 onglets en haut à droite de la fenêtre d’édition :
C’est à partir de l’onglet « Texte » que vous pourrez modifier ou ajouter du code HTML, ou CSS, à l’article ou à la page que vous êtes en train de modifier.
Vous pouvez ajouter du code CSS en modifiant l’attribut « style » des balises HTML pour apporter des modifications de style à ces balises uniquement.
Sous l’éditeur Gutenberg de WordPress, il existe plusieurs possibilités pour ajouter ou modifier du code HTML/CSS. Aucune n’est moins bonne qu’une autre, elles sont juste différentes et vous pouvez utiliser celle qui vous convient le mieux selon la disposition de votre espace de travail dans l’éditeur ou le contenu que vous êtes en train de modifier.
La première méthode pour ajouter du code HTML est tout simplement d’ajouter un bloc « HTML personnalisé » à votre page ou article. Ce bloc fera apparaître une fenêtre d’édition dans laquelle vous pourrez écrire votre HTML.
Tout comme l’éditeur classique, vous pourrez modifier l’attribut « style » des balises HTML que vous écrirez, cependant contrairement à l’éditeur classique vous pourrez ajouter du code CSS complexe directement dans ce bloc grâce aux balises <style></style> :
La seconde méthode pour ajouter du code HTML et CSS consiste à sélectionner le contenu (paragraphe, titre, …) à modifier puis cliquer sur les
<style></style> comme vous pourriez le faire avec l’utilisation de la première méthode, avec le bloc « HTML personnalisé ».La dernière technique que nous vous proposerons ici pour modifier le code HTML de vos pages ou articles avec l’éditeur Gutenberg de WordPress est d’utiliser l’option d’affichage « Éditeur de code ».
Vous trouverez cette option dans le menu en haut à droite de votre éditeur « Davantage d’outils et options » où vous aurez le choix de plusieurs outils et options dont l’option du visuel avec « Éditeur visuel » ou « Éditeur de code ».
Par défaut, c’est l’éditeur visuel qui est sélectionné. Cliquez sur « Éditeur de code » pour passer à l’affichage du code HTML de l’ensemble de votre contenu et commencer la modification du code HTML.
<style></style> ne sera là non plus pas possible dans cet éditeur de code, cependant comme partout vous pourrez modifier le CSS des balises avec l’attribut « style » de chaque balise HTML.Trouvez le meilleur prestataire WordPress sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Si vous souhaitez seulement ajouter du code CSS personnalisé à votre thème WordPress il existe une option disponible pour cela sous WordPress.
Dans le menu principal de WordPress, rendez-vous dans l’onglet « Apparence » puis la sous-catégorie « Personnaliser » :
Vous serez ensuite redirigé vers l’édition générale de votre thème. À partir d’ici vous pouvez ajouter un code CSS personnalisé en vous rendant dans le menu « CSS additionnel » puis en écrivant le code CSS dans la zone d’édition prévue :
Il existe d’autres solutions pour ajouter un CSS personnalisé à votre thème ou à une page/article spécifique. Nous en avons déjà vu dans la partie précédente lors de la modification du HTML, mais voici d’autres moyens pour éditer un code CSS personnalisé à votre site WordPress :
Dans certaines situations, vous devez apporter une modification HTML, CSS ou PHP directement aux fichiers de votre thème. Si vous deviez vous retrouver dans cette situation, le plus important est de faire bien attention aux fichiers que vous éditez et à ce que vous ajoutez, supprimez, modifiez dans ces fichiers.
Une erreur de manipulation, la suppression d’une ligne importante de code ou l’ajout d’un mauvais code peut totalement corrompre votre thème et rendre votre site inaccessible. Il est donc important de savoir ce que vous faites lorsque vous mettez les mains dans le cœur de votre thème.
Pour personnaliser le code du thème WordPress que vous utilisez, vous pouvez utiliser l’éditeur de code WordPress dans le tableau de bord. Celui-ci se trouve dans le menu « Apparence » puis « Éditeur de thème ».
À partir de cet éditeur vous aurez accès à tous les fichiers de votre thème que vous pourrez personnaliser avec précaution :
Une seconde option pour accéder et modifier les fichiers de votre thème est d’utiliser une connexion SFTP (ou FTP) que votre hébergeur vous fournira et à laquelle vous pourrez vous connecter grâce à un client FTP tel que FileZilla.
La personnalisation HTML et CSS peut se faire directement via les éditeurs visuels ou de code intégrés dans WordPress, cela facilite la personnalisation mais parfois mettre des limites à ce que vous pouvez faire. Cependant, si vous devez apporter des modifications plus complexes ou en PHP, vous devrez alors modifier les fichiers de votre thème ce qui peut être dangereux si vous vous y prenez mal. Pour éviter toute faille de sécurité et erreur dans le code, nous vous recommandons donc de créer un thème enfant (appelé aussi child theme), dans lequel vous pourrez modifier le code souhaité, en toute sécurité !
N’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un freelance qui pourra vous aider à personnaliser votre thème sans danger et à créer le rendu que vous souhaitez.