Ajouter du code HTML personnalisé

Utilisez le bloc HTML personnalisé pour ajouter votre propre code HTML et le prévisualiser directement. Ce guide vous montre la marche à suivre.

Avant de commencer, sachez que le bloc HTML personnalisé permet d’ajouter du code brut à une seule page ou publication. Ce n’est pas toujours l’outil le mieux adapté. Si vous souhaitez réaliser l’une des actions ci-dessous, consulte le guide lié, que vous proposera une solution plus rapide :

• Intégrer une vidéo, une carte, une publication sur les réseaux sociaux ou un service tiers (YouTube, Spotify, Instagram, Giphy, Pinterest et bien d’autres) : consultez le guide Intégrer du contenu provenant d’autres plateformes. Le bloc de contenu embarqué est utilisable avec tous les plans et prend en charge de nombreux services populaires, sans que vous ayez besoin d’avoir recours à du code personnalisé.
• Collecter des informations de contact, des inscriptions ou des commentaires : consultez l’article sur le bloc Formulaire. Comme son nom l’indique, il permet de créer un formulaire sans code HTML.
• Ajouter un style CSS à votre site : consultez le guide Ajout de CSS personnalisé.
• Ajouter du code aux en-têtes de votre site (balises méta de vérification, scripts tiers qui se chargent sur l’ensemble du site) : voir Ajouter du code aux en-têtes.

Pour ajouter le bloc HTML personnalisé, procédez comme suit :

1. Accédez au tableau de bord de votre site et sélectionnez la page, l’article ou le modèle auquel vous souhaitez ajouter du code HTML.
2. Cliquez sur l’icône + (outil d’insertion de bloc) et recherchez « HTML ».
3. Cliquez sur le bloc HTML personnalisé pour l’ajouter à votre contenu.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.

Après avoir ajouté le bloc, suivez ces étapes pour ajouter votre code HTML :

1. Cliquez sur le bouton « Modifier en HTML ».

2. Écrivez ou collez votre code HTML sur le côté gauche de l’éditeur.
   • Au fur et à mesure que vous rédigez votre code HTML, vous verrez un aperçu du résultat sur le côté droit.
3. Lorsque vous avez terminé, cliquez sur le bouton Mettre à jour pour enregistrer vos modifications.

Vous verrez le résultat de votre code HTML dans l’éditeur. Pour apporter des modifications, cliquez sur le bouton « Modifier en HTML » dans la barre d’outils du bloc.

Le HTML est un langage informatique qui indique aux navigateurs comment afficher le contenu d’un site Web. WordPress.com autorise les balises HTML suivantes avec tous les plans :

Pour ajouter les balises suivantes, vous aurez besoin d’un plan payant et d’activer les fonctionnalités d’hébergement. Découvrez comment activer les fonctionnalités d’hébergement de votre plan.

embed, frame, iframe, form, input, object, textarea, script, style, link

Pour en savoir plus sur les types de code que vous pouvez ajouter à votre site Web, ainsi que des alternatives lorsqu’un type de code n’est pas pris en charge, consultez notre guide sur l’ajout de code à votre site Web.

Si votre code HTML n’apparaît pas comme prévu après l’enregistrement, vérifiez les éléments suivants, qui permettent de résoudre la majorité des problèmes.

WordPress.com filtre certaines balises HTML pour des raisons de sécurité. Les balises comme iframe, script, style, form, embed et object nécessitent un plan payant avec fonctions d’hébergement activées.

Si votre code disparaît ou est partiellement supprimé après l’enregistrement, procédez comme suit :

1. Vérifiez votre plan. Accédez au tableau de bord de votre site et sélectionnez Options payantes → Plans. Le bloc HTML personnalisé n’accepte les balises restreintes que sur un plan payant. Si vous utilisez le plan gratuit, passez à n’importe quel plan payant pour résoudre le problème.
2. Activez les fonctionnalités d’hébergement. Un plan payant ne suffit pas : les fonctionnalités d’hébergement doivent également être actives. Installez au moins une extension sur votre site pour activer votre plan, de sorte qu’il accepte le code personnalisé.
3. Saisissez à nouveau votre code. Une fois que vous avez un plan payant et que les fonctionnalités d’hébergement sont actives, collez à nouveau le code dans le bloc HTML personnalisé et enregistrez vos modifications.

Si votre code est toujours supprimé après l’activation des fonctionnalités d’hébergement, il est possible que la balise ne soit pas prise en charge dans ce contexte, ou qu’un service tiers publie du code d’intégration qui utilise un balisage non pris en charge. Essayez plutôt le bloc de contenu embarqué ou consultez la section Résoudre les erreurs de type « contenu inattendu ou non valide » ci-dessous.

Si vous essayez d’intégrer du contenu provenant d’un service tiers (vidéos, musique, cartes, publications sur les réseaux sociaux, calendriers, newsletters ou lecteurs de documents), utilisez plutôt le bloc de contenu embarqué. Il fonctionne avec tous les plans, ne nécessite pas d’écrire du code HTML et prend en charge des services tels que YouTube, Vimeo, Spotify, X, Instagram, TikTok et bien d’autres.

Si le bloc de contenu embarqué ne répertorie pas votre service, c’est probablement qu’un iframe ou un script est requis. Auquel cas, ajoutez le code d’intégration à un bloc HTML personnalisé sur un plan payant avec les fonctionnalités d’hébergement activées.

Si vous voyez un message indiquant que votre bloc contient du contenu inattendu ou non valide, le code HTML présente peut-être une erreur ou peut avoir changé. Sélectionnez l’option « Tentative de restauration du bloc » pour permettre à l’éditeur de résoudre le problème automatiquement. Si l’erreur persiste, consultez notre guide sur la résolution des erreurs de bloc, qui contient d’autres options.