Vous cherchez un moyen simple de modifier le code HTML de votre site Web WordPress ?

HyperText Markup Language ou HTML est un code qui indique à un navigateur Web comment afficher le contenu de vos pages Web. L’édition HTML est pratique pour les problèmes de personnalisation avancée et de dépannage.

Dans cet article, nous allons vous montrer comment éditer du HTML dans l’éditeur de code WordPress en utilisant différentes méthodes.

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 ne pourrez peut-être pas styliser votre site Web comme vous le souhaitez.

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

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

Noter: Si vous ne souhaitez pas modifier le code HTML, mais souhaitez tout de même des options de personnalisation complètes, nous vous recommandons d’utiliser un générateur de pages WordPress par glisser-déposer tel que SeedProd.

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

Nous expliquerons comment modifier le code HTML à l’aide de l’éditeur de blocs et de 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 à votre section préférée.

  • Comment modifier le code HTML dans l’éditeur de blocs WordPress
  • Comment modifier le code HTML dans WordPress Classic Editor
  • Comment modifier le code HTML dans les widgets WordPress
  • Comment modifier le code HTML dans l’éditeur de thème WordPress
  • Comment modifier le HTML dans WordPress en utilisant FTP
  • Un moyen facile d’ajouter du code dans WordPress

Comment modifier le code HTML dans l’éditeur de blocs WordPress

Dans l’éditeur de blocs WordPress, il existe plusieurs façons de modifier le code 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/page ou modifiez un article existant. Après cela, 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, allez-y et 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 ligne.

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 consiste à modifier le code 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, allez-y et cliquez sur l’option « Modifier au format HTML ».

Cliquez sur les trois points et sélectionnez modifier au format HTML

Vous verrez maintenant le code HTML d’un bloc individuel. Allez-y et modifiez le code HTML de votre contenu. Par exemple, vous pouvez ajouter un lien nofollow, modifier le style de votre texte ou ajouter un autre code.

Modifier le code HTML d'un bloc individuel

Si vous souhaitez modifier le code 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 à trois points dans le coin supérieur droit. Sélectionnez ensuite « Éditeur de code » dans les options déroulantes.

Accéder à l'éditeur de code

Comment modifier le code HTML dans WordPress Classic Editor

Si vous utilisez l’éditeur classique de WordPress, vous pouvez facilement modifier le code 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 code HTML de votre article.

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

Après cela, vous pouvez modifier le code HTML de votre contenu. Par exemple, vous pouvez mettre en gras différents mots pour les mettre en évidence, utiliser le style italique dans le texte, créer des listes, ajouter une table des matières, etc.

Comment modifier le code HTML dans les widgets WordPress

Saviez-vous que vous pouvez ajouter et modifier du code HTML dans la zone des 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 widget. Par exemple, vous pouvez intégrer des formulaires de contact, Google Maps, des boutons d’appel à l’action (CTA) et d’autres contenus.

Vous pouvez commencer par vous diriger vers votre panneau d’administration WordPress, puis aller à Apparence » Widgets. Après cela, cliquez sur l’icône « Plus » dans n’importe quelle zone de widget à laquelle vous souhaitez ajouter du code HTML.

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

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

Ensuite, recherchez le widget Custom HMTL dans le menu du bloc de widget et cliquez dessus pour l’ajouter automatiquement à la zone du widget.

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 un code HTML personnalisé dans le bloc widget

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

Aperçu HTML personnalisé

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

Une autre façon de modifier le code HTML de votre site Web consiste à utiliser l’éditeur de thème WordPress (éditeur de code).

Cependant, nous vous déconseillons 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 code HTML à l’aide de l’éditeur de thèmes, il est judicieux de sauvegarder votre site Web avant d’apporter des modifications.

Ensuite, dirigez-vous vers Apparence » Éditeur de thème depuis votre tableau de bord WordPress. Vous verrez maintenant 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 avez cliqué sur le bouton « J’ai compris », 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ème WordPress

Comment modifier le HTML dans WordPress en utilisant FTP

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

Il s’agit d’une fonctionnalité standard fournie avec tous les comptes d’hébergement WordPress.

L’avantage d’utiliser FTP au lieu de l’éditeur de code est que vous pouvez facilement résoudre les problèmes à l’aide du client FTP. De cette façon, vous ne serez pas exclu de votre tableau de bord WordPress si quelque chose se brise lors de l’édition HTML.

Pour commencer, vous devrez d’abord sélectionner un logiciel FTP. Nous utiliserons FileZilla dans ce didacticiel, car il s’agit d’un client FTP gratuit et convivial pour Windows, Mac et Linux.

Après avoir sélectionné votre client FTP, vous devez maintenant vous connecter au serveur FTP de votre site. Vous pouvez trouver les informations de connexion dans le tableau de bord du panneau de configuration de votre hébergeur.

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

Vous verrez maintenant différents thèmes sur votre site Web. Allez-y et sélectionnez le thème que vous souhaitez modifier.

Accédez à vos fichiers de thème dans le client FTP

Ensuite, vous pouvez cliquer avec le bouton droit sur un fichier de thème pour modifier le code HTML. Par exemple, si vous souhaitez apporter des modifications au pied de page, cliquez avec le bouton droit sur le fichier footer.php.

De nombreux clients FTP vous permettent de visualiser et de modifier le fichier et de le télécharger automatiquement une fois que vous avez apporté les modifications. Dans FileZilla, vous pouvez le faire en cliquant sur l’option « Afficher/Modifier ».

Téléchargez et modifiez 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 la façon d’utiliser FTP pour télécharger des fichiers dans WordPress.

Un moyen facile d’ajouter du code dans WordPress

Le moyen le plus simple d’ajouter du code à votre WordPress consiste à utiliser WPCode.

Plugin WordPress WPCode

L’équipe de WPBeginner a conçu ce plugin pour que vous puissiez facilement ajouter du code à votre site en quelques minutes, et nous l’avons rendu 100% gratuit à utiliser.

Cela aide également à organiser votre code puisqu’il est stocké au même endroit. De plus, cela évite les erreurs qui peuvent être causées lors de la modification manuelle du code.

Un autre avantage est que vous n’avez pas à vous soucier de l’effacement de votre code si vous décidez de mettre à jour ou de modifier votre thème.

La première chose que vous devrez faire est d’installer et d’activer le plugin 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 vous diriger vers 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 zones d’en-tête, de corps et de pied de page.

Par exemple, supposons que vous souhaitiez afficher une barre d’alerte sur votre site Web. Vous pouvez simplement entrer le code HTML dans la case ‘Corps’ et cliquer sur le bouton ‘Enregistrer les modifications’.

Ajout du code HTML à l'aide du plugin WPCode

En plus de cela, vous pouvez ajouter un code de suivi Google Analytics et un pixel Facebook dans l’en-tête ou ajouter un bouton Pinterest dans le pied de page de votre site Web à l’aide du plugin.

Avec WPCode, il est également facile de décider où le code sort. 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 à modifier le code HTML dans l’éditeur de code WordPress. Vous pouvez également consulter notre guide sur le coût réel de la création d’un site Web WordPress, ou voir les raisons les plus importantes pour lesquelles vous devriez utiliser WordPress pour votre site Web.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici