Vous voulez rendre vos pages plus puissantes ? Apprenez à intégrer du code HTML dans WordPress.

Comme nous le savons tous.WordPress lui-même fournit un grand nombre de plugins et de thèmes pour étendre ses fonctionnalités, mais il y a parfois des caractéristiques ou des effets spécifiques qui doivent être mis en œuvre par le biais de l'option Code HTML intégré pour y parvenir. Cet article explique en détail comment intégrer dans WordPress Code HTMLet améliorer la fonctionnalité et l'interactivité de la page.

I. Pourquoi utiliser le code HTML ?

• Améliorer la fonctionnalité de la pageL'utilisation d'ai pour générer du code permet d'ajouter facilement des fonctions interactives supplémentaires telles que des formulaires, des boutons, des vidéos intégrées, des cartes, etc. en incorporant du code HTML.
• Améliorer la personnalisation des pages: :WordPress Les éditeurs intégrés sont puissants, mais il arrive qu'ils ne répondent pas à des besoins spécifiques en matière de conception de pages. L'utilisation directe du code HTML vous permet de contrôler totalement la manière dont le contenu de votre page est présenté.
• Intégrer des outils ou du code de tiers: par exemple, boutons de partage des médias sociaux, outils analytiques (Google Analytics), le code publicitaire, le code de suivi marketing, etc., nécessitent généralement l'intégration d'un code HTML personnalisé dans la page.

Deuxièmement, la façon d'intégrer un code HTML dans WordPress

WordPress propose aux utilisateurs plusieurs façons d'intégrer du code HTML, que ce soit dans une page, un article ou un widget, ce qui facilite l'intégration d'un code personnalisé.

1. Intégrer un code HTML à l'aide de l'éditeur classique

Si vous utilisez le Éditeur classiqueVous pouvez suivre les étapes ci-dessous pour intégrer le code HTML :

• Ouvrir un article ou une pageDans le backend de WordPress, sélectionnez écrits peut-être page webCliquez sur compilateur.
• Passer en mode texteDans l'éditeur, vous verrez visualisation répondre en chantant copies Deux options, passer à copies Tab.

• Insérer un code HTMLDans la zone d'édition de texte, vous pouvez taper ou coller directement du code HTML. Par exemple, insérez un code de formulaire personnalisé, un code vidéo ou un code d'intégration pour un outil tiers.
• Sauvegarder et consulter les résultatsAprès avoir terminé l'insertion du code, cliquez sur mettre à jour peut-être postePour plus d'informations sur les effets de la page ou de l'article, consultez le site de la Commission européenne.

2. Intégrer du code HTML en utilisant l'éditeur de blocs (Gutenberg)

Depuis la version 5.0, WordPress a introduit l'option Éditeur Gutenberg(éditeur de blocs), qui est un éditeur plus flexible et modulaire. Pour intégrer du code HTML dans Gutenberg, vous pouvez suivre les étapes suivantes :

• Ouvrir un article ou une pagePour les autres, vous devez vous rendre dans la section Backstage et sélectionner écrits peut-être page webCliquez sur compilateur.
• Ajouter des blocs HTML personnalisés: :
  • Sur la page d'édition, cliquez sur Ajout de blocs (icône plus).
  • Recherchez et sélectionnez HTML personnalisé Blocs.

• Entrez le code HTML: Tapez ou collez le code HTML que vous souhaitez intégrer dans ce bloc.
• Avant-premières et publicationsVous pouvez cliquer sur avant-premières pour voir l'effet du code et s'assurer qu'il n'y a pas de problème, puis cliquez sur le bouton poste peut-être mettre à jour.

3. Intégrer du code HTML dans les widgets

WordPress gadget Il vous permet également d'intégrer un code HTML, couramment utilisé dans les barres latérales, les pieds de page et d'autres emplacements, mais notez que ce widget n'est pas disponible dans tous les thèmes. Voici la marche à suivre :

• Aller dans Paramètres du widget: :
  • Dans le backend de WordPress, sélectionnez état extérieur → gadget.
• Ajouter des widgets HTML personnalisés: :
  • Glisser-déposer à partir des gadgets disponibles HTML personnalisé à l'endroit souhaité.

• Insérer un code HTMLDans la zone de texte du widget, tapez ou collez du code HTML, tel que des publicités intégrées, des boutons de médias sociaux, du code pour des services externes, etc.

• Sauvegarder et consulter les résultatsLorsque vous avez terminé, cliquez sur enregistrer (un fichier, etc.) (informatique)puis afficher l'écran du gadget.

4. Intégrer du code HTML dans les modèles de page

Pour les développeurs ou les utilisateurs familiarisés avec le code, la modification directe des fichiers de modèle de page du thème est une méthode courante. Cette méthode permet de contrôler entièrement la structure HTML de la page. Les étapes sont les suivantes :

• Ouvrir le fichier du thème: :
  • Dans le backend de WordPress, sélectionnez état extérieur → Editeur de thème.

• Modifier les fichiers de modèles: :
  • Trouvez le fichier de modèle qui doit être modifié (par ex. single.phpetpage.php etc.), cliquez pour modifier.
• Insérer un code HTMLInsérez votre code HTML personnalisé aux bons endroits, par exemple en haut de la page, en bas de la page, dans la zone de contenu, etc.

• Sauvegarder et consulter les résultatsLorsque la modification est terminée, cliquez sur Documents mis à jourpuis afficher les résultats de la page.

prenez noteSi vous modifiez directement les fichiers de modèles, assurez-vous d'utiliser un thème enfant pour effectuer les modifications afin de ne pas les perdre lors de la mise à jour du thème.

Utilisations courantes du code HTML intégré

• Formulaires intégrésL'intégration d'un formulaire de contact ou d'un formulaire d'abonnement sur un site web se fait directement par le code HTML. Par exemple, en utilisant un service de formulaire tiers tel que Formulaires GoogleetMailchimpou un code de formulaire personnalisé.
• Vidéo et audio intégrés: à travers HTML vous pouvez facilement mettre le code YouTubeetVimeo ou des vidéos d'autres plateformes sont intégrées à la page pour renforcer l'interactivité du contenu.
• Code publicitaire intégréSi vous souhaitez afficher des publicités sur votre site web, vous pouvez intégrer le code HTML fourni par un réseau publicitaire tel que Google AdSense dans une page ou une barre latérale.
• Carte intégréeEn intégrant un fichier tel que Google Maps et d'autres codes cartographiques pour permettre aux utilisateurs de voir rapidement l'emplacement exact de votre entreprise ou de votre magasin.
• Ajouter des boutons de médias sociauxLes boutons de partage : Vous pouvez intégrer des boutons de partage pour les plateformes sociales telles que Facebook, Twitter, Instagram, etc.

Précautions à prendre lors de l'intégration d'un code HTML

• Assurer la sécurité du codeLorsque vous intégrez du code HTML dans WordPress, assurez-vous que le code est sécurisé. Évitez d'insérer du code malveillant, en particulier du code tiers provenant de sources non fiables.
• conception réactiveLes pages Web de l'UE doivent être adaptées aux différents appareils et tailles d'écran : veillez à ce que le code HTML que vous intégrez soit adapté à différents appareils et tailles d'écran. Utilisez les styles CSS et les requêtes média appropriés pour que la page s'affiche correctement sur les appareils mobiles, les tablettes et les ordinateurs de bureau.
• Optimisation du référencementLe code HTML intégré doit être conforme aux meilleures pratiques en matière de référencement. Par exemple, il convient d'utiliser correctement les balises de titre (H1, H2, H3, etc., mais veillez également à ce qu'il n'y ait qu'une seule balise H1 sur une page) et les balises de lien (H1, H2, H3, etc.).<a>) afin d'améliorer l'accessibilité des pages et la convivialité pour les moteurs de recherche.
• fonction de testAprès avoir intégré le code HTML, assurez-vous qu'il fonctionne correctement. Par exemple, vérifiez que les formulaires sont soumis correctement, que les publicités s'affichent correctement et que les boutons de partage social fonctionnent.

V. Résumé

L'intégration de code HTML dans WordPress permet d'ajouter de nombreuses fonctionnalités personnalisées à votre site web, telles que des formulaires, des vidéos, des publicités, etc. Ces fonctionnalités améliorent l'interactivité de vos pages et vous aident à optimiser votre site et à améliorer l'expérience de l'utilisateur. Que vous utilisiez l'éditeur classique, l'éditeur de blocs ou que vous modifiiez un fichier modèle, WordPress offre une grande variété de moyens d'intégrer du code HTML afin de garantir que vous puissiez facilement mettre en œuvre vos besoins de personnalisation.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.