WordPress assemble plusieurs fichiers de modèle PHP pour rendre le contenu lisible à l'utilisateur dans le navigateur.Les thèmes WordPress contiennent les fichiers header.php, footer.php, single.php (pour les messages), page.php (pour les pages) et sidebar.php, les derniers thèmes utilisent des sections de modèles supplémentaires pour générer le contenu principal.
Tous ces modèles sont soigneusement assemblés et affichés lorsque vous affichez la page WordPress dans votre navigateur.En règle générale, vous n'avez pas besoin de modifier ces fichiers et des plug-ins sont disponibles pour insérer des fonctionnalités personnalisées.Cependant, dans certains cas, vous devez insérer du code dans les sections d'en-tête et de pied de page de WordPress.
Dans cet article, nous vous expliquons comment le faire sans et avec les plugins.
Pourquoi insérer du code dans l'en-tête ou le pied de page ?
Les sections d'en-tête et de pied de page sont pratiques pour diverses intégrations de code et pour ajouter des fonctionnalités supplémentaires à votre site.Voici quelques-uns des meilleurs exemples qui vous obligent à insérer du code dans l'en-tête et le pied de page de votre site WordPress.
Insérez le code d'annonce automatisé de Google AdSense ou le code d'enchère Masthead de tout autre programme publicitaire.
Installez le code de suivi Google Analytics et Facebook Pixel.
Insérez le captcha de Bing Webmaster Tools, Google Search Console, Baidu, Yandex et toute autre plateforme comme Pinterest.
Ajoutez des CSS personnalisés à l'en-tête, tels que des feuilles de style Google Fonts et JavaScript dans le pied de page.
Insérez des composants personnalisés comme des fils d'Ariane dans l'en-tête lorsque vous utilisez des plugins comme Yoast SEO.
Comme vous pouvez le voir, la liste sera plus longue en fonction de vos besoins.
Ajouter du code aux sections d'en-tête et de pied de page dans WordPress
Par défaut, WordPress ne propose aucune option pour insérer du code dans les sections d'en-tête et de pied de page.L'option la plus simple consiste à éditer le fichier directement et à insérer votre code.Cependant, il existe également des plugins disponibles à cet effet.Dans cet article, nous expliquerons deux façons d'ajouter du code aux sections d'en-tête et de pied de page de n'importe quel site WordPress.
Modifiez manuellement les fichiers header.php et footer.php du thème WordPress.
Utilisez le plug-in Insert Header and Footer pour ajouter du code sans modifier le fichier.
Nous expliquerons également l'utilisation de certains thèmes pour insérer du code dans les en-têtes et les pieds de page à l'aide des crochets wp_head et wp_footer.
Insérer manuellement le code d'en-tête et de pied de page WordPress
Cette option nécessite la modification du fichier header.php ou footer.php dans le thème de votre site WordPress et peut ne pas convenir aux débutants.
Tout d'abord, commencez par préparer des extraits de code ou en les copiant à partir de sites tiers.Une fois que vous avez votre code d'en-tête et de pied de page prêt, survolez le menu Apparence dans le tableau de bord du site et cliquez sur l'onglet Éditeur de thème.
Ignorez tous les messages d'avertissement que vous recevez et sélectionnez votre sujet actif dans la liste déroulante "Sélectionner le sujet à modifier :".
Sélectionnez le fichier "header.php" ou "footer.php" à droite de la vue actuelle.
Pour l'en-tête, assurez-vous de coller le code sous la balise "" de fermeture, puis le code du pied de page doit être sous "" Étiqueter.Parfois, vous devrez peut-être également insérer du code avant la balise de fermeture.
Enfin, cliquez sur le bouton "Mettre à jour le fichier" pour enregistrer les modifications apportées à votre site avec l'extrait ajouté.
Assurez-vous de tester votre site et de vérifier que les fonctionnalités que vous avez connectées fonctionnent comme prévu.
Insérer le code d'en-tête et de pied de page WordPress à l'aide de plugins
Par défaut, WordPress vous permet d'ajouter du CSS personnalisé à votre site Web dans la section Apparence > Personnalisation > CSS supplémentaire.Cependant, vous ne pouvez pas insérer de JavaScript dans cette section.Il existe de nombreux plugins et plugins gratuits disponibles pour insérer du code, nous expliquerons ici l'utilisation de "WPBeginner Insert Header and Footer".Le plugin a une interface super simple que les débutants peuvent facilement utiliser.
Tout d'abord, installez et activez le plugin "Insert Header and Footer".Depuis le tableau de bord de votre site WordPress, survolez le menu Plugins et cliquez sur Ajouter nouveau.
Utilisez la fonction de plug-in de recherche pour trouver "Insérer l'en-tête et le pied de page" et cliquez sur le bouton "Installer maintenant".Une fois le processus d'installation terminé, "Activez" le plugin.
Installer le plugin
Allez dans le menu Paramètres, recherchez et cliquez sur le sous-menu Insérer un en-tête et un pied de page.
Le plugin fournit trois boîtes pour placer des scripts dans l'en-tête, le corps et le pied de page pour insérer du code.Jusque-là, des fournisseurs tiers comme Google Analytics vous indiquent dans quelle case placer leurs extraits.Sinon, assurez-vous de savoir exactement où vous voulez insérer le code.
Collez ces codes dans les codes appropriés et cliquez sur Enregistrer pour terminer les modifications de votre site.
Les scripts de code sont désormais automatiquement chargés à l'emplacement spécifique où le site s'exécute.
Vous pouvez toujours modifier davantage le code et garder le plugin actif, car sa désactivation empêchera l'ajout de fonctionnalités personnalisées et désactivera tous les scripts précédemment ajoutés à votre site.
Insérer du code à l'aide de plugins
Notez que si par hasard le plugin "Insert Header and Footer" est désactivé ou désinstallé par erreur, votre code restera dans la base de données de votre site.Réinstallez ou réactivez simplement le plugin pour que le code antérieur fonctionne.En outre, il est recommandé de vider le cache de votre site WordPress lors de l'ajout et de l'enregistrement des modifications apportées aux extraits de code d'en-tête et de pied de page dans le plug-in.
Modifier les en-têtes et pieds de page avec des thèmes
Que vous modifiiez vos fichiers de thème manuellement ou que vous utilisiez un plugin, le code que vous insérez affecte l'ensemble de votre site Web.Vous devez utiliser des plugins comme Insert HTML Snippets ou essayer des blocs HTML personnalisés dans l'éditeur Gutenberg pour insérer du code personnalisé uniquement dans des publications ou des pages spécifiques.Cependant, vous pouvez insérer du code dans les en-têtes et les pieds de page avec les derniers thèmes comme GeneratePress Premium et Astra Pro.Ces thèmes utilisent les crochets standard wp_head et wp_footer et permettent d'appliquer des restrictions personnalisées.Par exemple, vous pouvez simplement insérer des fils d'Ariane dans un seul message sans affecter la page.
Ici, nous utiliserons le thème Astra Pro pour obtenir des instructions, vous pouvez effectuer des étapes similaires dans le thème GeneratePress Premium en utilisant l'option "Éléments".
Après avoir installé le module complémentaire Astra Pro, accédez à Apparence > Options Astra.
Activez l'option Disposition personnalisée et cliquez sur le lien Paramètres pour cette option.
Cliquez sur le bouton "Ajouter un nouveau" et collez le code que vous souhaitez insérer dans la boîte.
Dans la section Paramètres de disposition personnalisés, cliquez sur le menu déroulant Disposition et sélectionnez l'option Crochets.
Insérer le code d'en-tête dans le thème Astra
Dans la liste déroulante Action, sélectionnez wp_head pour la section d'en-tête et wp_footer pour la section de pied de page.
Si vous n'utilisez qu'un seul extrait, laissez "priorité" vide.Cependant, lorsque vous insérez plusieurs codes au même emplacement de crochet, assurez-vous de définir l'ordre de priorité pour insérer les codes.Vous pouvez utiliser 10, 20, 30, etc. comme priorité, le plus bas aura priorité sur les autres.
Fournissez les détails d'espacement supérieur et inférieur en pixels si nécessaire.
Sélectionnez l'endroit où vous souhaitez afficher le code dans le menu déroulant Afficher sur.Vous pouvez sélectionner des publications, des pages, des catégories spécifiques ou insérer l'intégralité de votre site Web ou insérer des types de publication spécifiques tels que des publications, des pages ou tout type de publication personnalisé utilisé dans votre site Web.
Dans la liste déroulante Rôle d'utilisateur, sélectionnez le rôle d'utilisateur pour lequel vous souhaitez que le code soit actif.
Une fois tous les paramètres définis, cliquez sur le bouton Publier pour que vos modifications prennent effet.
Raisons d'utiliser le plugin Insert Header and Footer
Il y a tellement d'inconvénients à éditer des fichiers de thème ou à utiliser un thème personnalisé que vous vous en tiendrez à l'approche du plugin.Voici quelques-uns des avantages que vous pouvez tirer de l'utilisation du plugin, sauf que vous n'êtes peut-être pas un technicien ou que vous êtes peut-être un débutant.
Étant donné que le magasin de plugins ajoute des scripts dans un emplacement séparé, vous n'avez pas à vous soucier de l'effacement du code lors des mises à niveau, des mises à jour ou des changements de thèmes.Vous n'avez pas non plus besoin de thèmes enfants, car le plugin fonctionne indépendamment du thème de votre site.
Il facilite et accélère l'ajout de code personnalisé dans les en-têtes et les pieds de page.De plus, cela permet de maintenir l'organisation des extraits de code en un seul emplacement.
Il est possible de rencontrer des erreurs lors du choix d'éditer votre thème WordPress, donc l'utilisation d'un plugin peut aider à éviter, prévenir et éviter de telles erreurs.
Dernières pensées
Dans de nombreux cas, vous devez changer l'apparence, changer le chemin ou ajouter d'autres fonctionnalités à votre site WordPress.Dans les deux cas, lorsque vous n'êtes pas techniquement enclin, n'oubliez pas d'utiliser la méthode du plugin pour insérer le code d'en-tête et de pied de page.Bien que des thèmes comme Astra et GeneratePress puissent vous aider, vous devrez acheter la version premium.En outre, cela peut rendre difficile le changement de thème, auquel cas vous devrez rechercher des plugins à utiliser.
