Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

Comment modifier le HTML dans l'éditeur de code WordPress (Guide pour débutants)

Vous recherchez plus de contrôle sur la conception et la fonction de votre site WordPress ? Apprendre à modifier le HTML est la solution.

Le HTML (HyperText Markup Language) est le code qui structure votre contenu, indiquant aux navigateurs Web comment afficher vos pages. Le modifier directement est utile pour la personnalisation avancée, l'ajout de fonctionnalités spécifiques et le dépannage des problèmes.

Nous entendons souvent des utilisateurs de WPBeginner qui sont nerveux à l'idée de toucher au code, mais modifier le HTML dans WordPress est plus facile que vous ne le pensez.

Dans cet article, nous vous montrerons comment modifier le HTML dans l'éditeur de code WordPress en utilisant plusieurs méthodes différentes.

Comment modifier le HTML dans l'éditeur de code WordPress

Pourquoi devriez-vous modifier le HTML dans WordPress ?

WordPress propose des milliers de thèmes et de plugins pour modifier l'apparence de votre site Web et personnaliser différents éléments sans toucher une seule ligne de code.

Cependant, les plugins et les thèmes ont leurs limites et peuvent ne pas offrir les fonctionnalités exactes que vous recherchez. Par conséquent, vous pourriez ne pas être en mesure de styliser votre site Web comme vous le souhaitez.

C'est là que la modification du HTML est vraiment utile. Vous pouvez facilement effectuer une personnalisation avancée en utilisant le code HTML. Il offre beaucoup de flexibilité et de contrôle sur l'apparence et le fonctionnement de votre site.

De plus, apprendre à modifier le HTML peut également vous aider à identifier et à corriger les erreurs sur votre site WordPress lorsque vous n’avez pas accès au tableau de bord.

Remarque : Si vous ne souhaitez pas modifier le HTML, mais que vous désirez tout de même des options de personnalisation complètes, nous vous recommandons d'utiliser un constructeur de pages WordPress glisser-déposer comme SeedProd.

Cela étant dit, examinons différentes façons de modifier le HTML dans un site WordPress.

Nous verrons comment modifier le HTML en utilisant l'éditeur de blocs et l'éditeur classique, et nous vous montrerons également un moyen simple d'ajouter du code à votre site. Vous pouvez cliquer sur les liens ci-dessous pour accéder à la section de votre choix.

Comment modifier le HTML dans l'éditeur de blocs WordPress

Dans l'éditeur de blocs WordPress, il existe plusieurs façons de modifier le HTML de votre article ou de votre page.

Tout d'abord, vous pouvez utiliser un bloc HTML personnalisé dans votre contenu pour ajouter du code HTML.

Pour commencer, rendez-vous sur votre tableau de bord WordPress, puis ajoutez un nouvel article/une nouvelle page ou modifiez un article existant. Ensuite, cliquez sur le signe plus (+) dans le coin supérieur gauche et ajoutez un bloc « HTML personnalisé ».

Ajout d'un bloc HTML personnalisé dans WordPress

Ensuite, entrez votre code HTML personnalisé dans le bloc.

Vous pouvez également cliquer sur l'option « Aperçu » pour vérifier si le code HTML fonctionne correctement et à quoi ressemblera votre contenu sur votre site web en direct.

Code HTML personnalisé dans l'éditeur WordPress

Une autre façon d'ajouter ou de modifier du code HTML dans l'éditeur de blocs WordPress est de modifier le HTML d'un bloc particulier.

Pour ce faire, sélectionnez simplement un bloc existant dans votre contenu, puis cliquez sur le menu à trois points. Ensuite, cliquez sur l'option « Modifier en HTML ».

Cliquez sur les trois points et sélectionnez modifier en HTML

Vous verrez maintenant le HTML d'un bloc individuel. Modifiez le HTML de votre contenu.

Par exemple, vous pouvez ajouter un lien nofollow, modifier le style de votre texte ou ajouter d'autres codes.

Modifier le HTML d'un bloc individuel

Si vous souhaitez modifier le HTML de l'intégralité de votre article, vous pouvez utiliser l'« Éditeur de code » dans l'éditeur de blocs WordPress.

Vous pouvez accéder à l'éditeur de code en cliquant sur l'option des trois points dans le coin supérieur droit. Sélectionnez ensuite « Éditeur de code » dans le menu déroulant.

Accéder à l'éditeur de code

Comment modifier le HTML dans l'éditeur classique WordPress

Si vous utilisez l'éditeur classique de WordPress, vous pouvez facilement modifier le HTML dans la vue Texte.

Pour accéder à la vue Texte, modifiez simplement un article de blog ou ajoutez-en un nouveau. Lorsque vous êtes dans l'éditeur classique, cliquez sur l'onglet « Texte » pour voir le HTML de votre article.

Cliquez sur Texte dans l'éditeur classique pour modifier le HTML

Après cela, vous pouvez modifier le HTML de votre contenu. Par exemple, vous pouvez mettre des mots en gras pour les faire ressortir, utiliser le style italique dans le texte, créer des listes, ajouter une table des matières, et plus encore.

Comment modifier le HTML dans les widgets WordPress

Saviez-vous que vous pouvez ajouter et modifier du code HTML dans la zone de widgets de votre site ?

Dans WordPress, l'utilisation d'un widget HTML personnalisé peut vous aider à personnaliser votre barre latérale, votre pied de page et d'autres zones de widgets. Par exemple, vous pouvez intégrer des formulaires de contact, des boutons d'appel à l'action (CTA), des Google Maps, et d'autres contenus.

Vous pouvez commencer par vous rendre sur votre panneau d'administration WordPress, puis aller dans Apparence » Widgets. Ensuite, cliquez sur l'icône « Plus » dans la zone de widget où vous souhaitez ajouter du code HTML.

Les zones de widgets disponibles dépendront du thème WordPress que vous utilisez. Par exemple, vous pourrez peut-être l'ajouter à votre pied de page, en-tête ou à d'autres zones.

Cliquez sur l'icône Plus pour ajouter un widget

Ensuite, recherchez le widget HTML personnalisé dans le menu des blocs de widgets et cliquez dessus pour l'ajouter automatiquement à la zone de widgets.

Ajouter un widget HTML personnalisé dans WordPress

Après cela, vous pouvez cliquer sur votre widget HTML personnalisé et entrer le code HTML.

Lorsque vous avez terminé, n'oubliez pas de cliquer sur le bouton « Mettre à jour » dans le coin supérieur droit de l'écran.

Ajouter du code HTML personnalisé dans un bloc de widget

Vous pouvez maintenant visiter votre site Web pour voir le widget HTML personnalisé en action.

Aperçu du HTML personnalisé

Comment modifier le HTML dans l'éditeur de thème WordPress

Une autre façon de modifier le HTML de votre site Web est d'utiliser l'Éditeur de thème WordPress (Éditeur de code).

Cependant, nous ne vous recommandons pas de modifier directement le code dans l'Éditeur de thème. La moindre erreur lors de la saisie du code peut casser votre site Web et vous empêcher d'accéder au tableau de bord WordPress.

De plus, si vous mettez à jour votre thème, toutes vos modifications seront perdues.

Cela dit, si vous envisagez de modifier le HTML à l'aide de l'éditeur de thème, il est conseillé de sauvegarder votre site Web avant d'apporter des modifications.

Ensuite, accédez à Apparence » Éditeur de thème depuis votre tableau de bord WordPress. Vous verrez alors un message d'avertissement concernant la modification directe des fichiers de thème.

Avertissement de l'éditeur de thème dans WordPress

Une fois que vous aurez cliqué sur le bouton « Je comprends », vous verrez vos fichiers de thème et votre code.

À partir de là, vous pouvez choisir le fichier que vous souhaitez modifier et apporter vos modifications.

Éditeur de thèmes WordPress

Comment modifier le HTML dans WordPress via FTP

Une autre méthode alternative pour modifier le HTML dans les fichiers de thème WordPress consiste à utiliser le protocole FTP, également connu sous le nom de service de transfert de fichiers.

Ceci est une fonctionnalité standard qui est incluse avec tous les comptes d'hébergement WordPress.

L'avantage d'utiliser FTP plutôt que l'éditeur de code est que vous pouvez facilement résoudre les problèmes en utilisant le client FTP. De cette façon, vous ne serez pas bloqué hors de votre tableau de bord WordPress si quelque chose se casse lors de la modification du HTML.

Pour commencer, vous devrez d'abord sélectionner un logiciel FTP. Nous utiliserons FileZilla dans ce tutoriel, car c'est un client FTP gratuit et convivial pour Windows, Mac et Linux.

Après avoir sélectionné votre client FTP, vous devrez maintenant vous connecter au serveur FTP de votre site. Vous pouvez trouver les détails de connexion dans le tableau de bord du panneau de contrôle de votre fournisseur d'hébergement.

Une fois connecté, vous verrez différents dossiers et fichiers de votre site Web dans la colonne « Site distant ». Accédez à vos fichiers de thème en allant dans wp-content » theme.

Vous verrez maintenant différents thèmes sur votre site web. Sélectionnez le thème que vous souhaitez modifier.

Naviguer vers vos fichiers de thème dans un client FTP

Ensuite, vous pouvez faire un clic droit sur un fichier de thème pour modifier le HTML. Par exemple, si vous souhaitez apporter des modifications au pied de page, faites un clic droit sur le fichier footer.php.

De nombreux clients FTP vous permettent de visualiser et de modifier le fichier, puis de les téléverser automatiquement une fois les modifications effectuées. Dans FileZilla, vous pouvez le faire en cliquant sur l'option « Afficher/Modifier ».

Télécharger et modifier votre fichier de thème

Cependant, nous vous suggérons de télécharger le fichier que vous souhaitez modifier sur votre bureau avant d'apporter des modifications.

Après avoir modifié le HTML, vous pouvez remplacer le fichier d'origine. Pour plus de détails, nous vous recommandons de suivre notre guide sur comment utiliser FTP pour téléverser des fichiers dans WordPress.

Moyen simple d'ajouter du code dans WordPress

La façon la plus simple d'ajouter du code dans WordPress est d'utiliser WPCode, le meilleur plugin d'extraits de code sur le marché.

Version WPCode Pro

L'équipe de WPBeginner a conçu ce plugin pour que même les débutants complets puissent ajouter du code personnalisé à leur site en quelques minutes. De plus, il existe une version lite du plugin qui est 100% gratuite.

Il permet d'organiser votre code car il est stocké en un seul endroit. De plus, il évite les erreurs qui peuvent survenir lors de la modification manuelle du code.

Un autre avantage est que vous n'avez pas à vous soucier que votre code soit effacé si vous décidez de mettre à jour ou de changer votre thème.

La première chose à faire est d’installer et d’activer le plugin gratuit WPCode sur votre site web. Pour plus de détails, vous pouvez suivre notre tutoriel détaillé sur comment installer un plugin WordPress.

Une fois le plugin actif, vous pouvez accéder à Extraits de code » En-tête et Pied de page depuis votre panneau d’administration.

Ensuite, vous pouvez ajouter le code HTML à votre site web dans les champs en-tête, corps et pied de page.

Par exemple, disons que vous souhaitez afficher une barre d’alerte sur votre site web. Vous pouvez simplement entrer le code HTML dans le champ « Corps » et cliquer sur le bouton « Enregistrer les modifications ».

Ajout du code HTML à l'aide du plugin WPCode

En outre, vous pouvez ajouter un code de suivi Google Analytics, le pixel Facebook, et le pixel publicitaire TikTok dans l’en-tête. Ou, vous pouvez ajouter un bouton Pinterest dans le pied de page de votre site web en utilisant le plugin.

Avec WPCode, il est facile de décider où le code s’affiche également. Par exemple, vous pouvez afficher automatiquement du code HTML au début ou à la fin de chaque article.

Pour plus de détails, vous pouvez consulter notre guide sur la façon d'ajouter du code d'en-tête et de pied de page dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment modifier le HTML dans l'éditeur de code WordPress. Vous voudrez peut-être aussi consulter notre guide sur la façon d'ajouter des formulaires HTML dans WordPress, ou voir les raisons les plus importantes pour lesquelles vous devriez utiliser WordPress pour votre site web.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

2 CommentsLeave a Reply

  1. Y a-t-il un moyen d'exécuter du HTML/CSS/JS dans une page WordPress, comme exécuter un fichier HTML entier contenant du CSS et du JS. Y a-t-il un plugin que vous pouvez me suggérer ?

Laisser un commentaire

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.