Comment ajouter du code d'en-tête et de pied de page dans WordPress

30 octobre 2020

Personnaliser votre site Web WordPress à l'aide de code peut être effrayant. Souvent, vous devez fouiller dans les fichiers de base pour modifier les configurations ou ajouter de nouveaux paramètres qui peuvent endommager votre site si vous vous trompez.

Cependant, l'ajout de code d'en-tête et de pied de page est généralement beaucoup plus facile. Souvent, tout ce que vous avez à faire est de copier et coller des extraits de code spécifiques. Donc, si vous savez comment accéder à vos fichiers d'en-tête et de pied de page, vous avez la partie la plus effrayante derrière vous.

Cet article vous montrera comment ajouter du code d'en-tête et de pied de page dans WordPress à la fois manuellement et avec un plugin. Les deux approches sont très simples, alors commençons tout de suite!

Pourquoi vous pourriez avoir besoin d'ajouter du code d'en-tête et de pied de page dans WordPress?

Si vous exécutez un site Web, vous connaissez probablement au moins un service tiers qui vous oblige à intégrer du code pour vous connecter à ce site Web.

Certains des exemples les plus populaires sont Google Analytics, Search Console, Facebook Pixel et de nombreux autres outils qui impliquent le suivi de sites Web.

Tous ces services nécessitent que vous ajoutiez certains scripts entre les sites Web tête Mots clés. L'en-tête de votre site est un composant important, y compris des éléments tels que des scripts, des titres, des fichiers de style, etc.

Bas de page Les balises fonctionnent de la même manière que les vôtres tête Homologues. Techniquement, lorsque vous ajoutez des extraits de code au pied de page de votre site, ils doivent être faits comme si vous les ajoutiez à votre en-tête.

Cependant, il est important de comprendre que votre site Web exécutera les scripts dans l'ordre dans lequel vous les incluez. Il comprend également le code d'en-tête Exécuter avant le chargement de la page tandis que le code de pied de page s'exécute après.

Si vous avez la possibilité de choisir et que vous êtes intéressé par l'optimisation de site Web, déplacer JavaScript vers le pied de page de votre site Web peut réduire les temps de chargement. Cependant, certains services vous demandent spécifiquement d'ajouter leur code à votre en-tête pour éviter les problèmes d'exécution.

En règle générale, si un service vous oblige à le faire, nous vous recommandons de suivre leurs conseils. Placez d'autres extraits de code JavaScript dans le pied de page de votre site WordPress. Le code CSS va toujours dans l'en-tête.

Ajout de code d'en-tête et de pied de page dans WordPress (2 méthodes)

Comme c'est souvent le cas avec WordPress, vous pouvez atteindre le même objectif en modifiant les fichiers manuellement ou en utilisant un plugin.

Tout d'abord, parlons de l'approche plugin.

1. Utilisez un plugin comme des injections tête, pied et post

L'utilisation d'un plugin pour ajouter du code à vos fichiers d'en-tête et de pied de page dans WordPress est l'approche la plus sûre. Avec un plugin, vous n'avez pas à modifier manuellement les fichiers de thème ou à vous assurer d'ajouter des scripts au bon endroit.

Bien qu'il existe de nombreux bons plugins parmi lesquels choisir, notre recommandation pour le poste est la Injections tête, pied et post Brancher.

Le plug-in pour la tête, le pied et les post-injections

Ce plugin vous donne beaucoup de contrôle sur l'endroit où vous souhaitez ajouter vos extraits de code dans votre code. Il offre également la possibilité d'ajouter divers scripts pour le rendu mobile et bureau de votre site.

Pour ajouter le plugin, allez dans Plugins> Ajouter nouveau dans votre tableau de bord et utilisez la fonction de recherche pour trouver le plugin. Cliquez sur Installer et activez le plugin.

Dès que le plugin est actif, vous pouvez y accéder directement Paramètres> En-tête et pied de page. Vous verrez plusieurs champs dans lesquels vous pouvez ajouter des extraits de code.

Vérifiez les options de placement pour le code d'en-tête du plugin

Si vous creusez dans les options du plugin, vous constaterez qu'il offre de nombreux emplacements supplémentaires pour vos extraits de code. Cependant, dans la plupart des cas, vous pouvez vous en tenir à eux Tête et orteil Languette.

Pour le code global, assurez-vous de placer ces extraits dans le De chaque côté Champ. Cependant, si vous avez juste besoin du code pour s'exécuter sur votre page d'accueil, utilisez le Uniquement sur la page d'accueil Possibilité.

Lorsque vous avez terminé d'ajouter du code à votre site Web, enregistrez les modifications apportées au plugin et vous êtes prêt à partir!

2. Ajoutez des extraits de code via votre fichier functions.php

Ajouter manuellement du code d'en-tête et de pied de page dans WordPress n'est pas compliqué, mais cela nécessite plus de réflexion que l'approche du plugin.

Vous pouvez ajouter le code directement à votre sujet actif header.php ou footer.php Des dossiers. Vous pouvez trouver ces fichiers dans le / public_html / wp-content / themes / Ouvrez le dossier de votre sujet actif et regardez à l'intérieur:

Accédez à vos fichiers d'en-tête et de pied de page via FTP

Vous pouvez accéder à ces fichiers via File TransFle protocole (FTP) et modifiez-les avec votre éditeur de code préféré. Cependant, la modification directe des fichiers d'en-tête et de pied de page peut être problématique. Dans cet esprit, nous avons deux recommandations si vous souhaitez utiliser l'approche manuelle:

  1. A ... créer Thème des enfants pour votre sujet. De cette façon, vous ne perdrez aucune personnalisation lorsque vous mettez à jour le sujet parent.
  2. Utilisez des crochets pour obtenir le code sur votre functions.php Fichier. Cela fournit une approche plus propre pour modifier manuellement les fichiers d'en-tête et de pied de page.

Dans l'idéal, vous devez toujours utiliser un thème enfant chaque fois que vous prévoyez d'effectuer un type de personnalisation de thème. Vous pouvez accéder aux sujets de votre enfant functions.php Fichier dans son dossier dans le / wp-content / topics Annuaire.

Ouvrez ça functions.php Fichier dans votre éditeur de code. Pour ajouter le code souhaité, vous devez soit utiliser le wp_head ou wp_footer Crochet.

L'extrait de code suivant ajoute votre code personnalisé à l'en-tête de votre site:

add_action('wp_head', 'test_script');
function test_script() {
    ?>
    
    <!-- Here comes your custom code in HTML format. -->
          
    <?php
}

Vous pouvez utiliser le ... wp_footer Crochet à la place wp_head Si vous souhaitez mettre le code dans votre pied de page. Vous pouvez également changer le nom de la fonction (test_script) si tu veux.

Lorsque vous avez terminé, modifiez le vôtre functions.php Assurez-vous d'enregistrer vos modifications et c'est tout. Le code que vous avez ajouté devrait fonctionner maintenant!

Conclusion

De nombreux services tiers comme Google Analytics ou Facebook Pixel vous obligent à ajouter des extraits de code à votre site Web pour qu'ils puissent s'y connecter. Cependant, ce n'est qu'une des nombreuses fois où vous devez ajouter du code à votre en-tête et à votre pied de page dans WordPress. Cela vaut donc la peine de savoir comment faire cela.

Il existe deux façons d'ajouter des extraits de code à votre en-tête et à votre pied de page. Vous pouvez soit utiliser un plugin comme Head, Foot et Post Injections ou ajouter des extraits de code via votre plugin functions.php Fichier.

Avez-vous des questions sur l'ajout de code d'en-tête et de pied de page dans WordPress? Parlons-en dans la section commentaires ci-dessous!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *