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

Personnaliser votre site Web WordPress à l'aide de code peut être effrayant. Souvent, vous devrez fouiller dans les fichiers de base pour modifier les configurations ou ajouter de nouveaux paramètres, ce qui peut casser votre site si vous vous y prenez mal.

Cependant, l'ajout de code d'en-tête et de pied de page a tendance à être beaucoup plus simple. Souvent, vous n'aurez qu'à copier et coller des extraits de code spécifiques. Cela signifie que si vous savez comment accéder à vos fichiers d'en-tête et de pied de page, vous avez dépassé la partie la plus effrayante.

Dans cet article, nous vous apprendrons 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 allons-y!

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

Si vous gérez un site Web, vous connaissez probablement au moins un service tiers qui vous oblige à intégrer du code pour vous y connecter.

Certains des exemples les plus populaires incluent 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 des scripts spécifiques entre les balises head de votre site Web. L'en-tête de votre site est un composant crucial comprenant des éléments tels que des scripts, des titres, des fichiers de style, etc.

Les balises de pied de page fonctionnent de la même manière que leurs homologues de tête . Techniquement, si vous ajoutez des extraits de code au pied de page de votre site, ils doivent s'exécuter de la même manière que si vous les incluiez dans 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. De plus, le code d'en-tête sera   exécuté avant le chargement de la page, tandis que le code du pied de page s'exécutera après.

Si vous avez la possibilité de choisir et que vous vous souciez de l'optimisation du site Web, le déplacement de JavaScript vers le pied de page de votre site peut aider à accélérer les temps de chargement. Cependant, certains services vous demanderont explicitement d'ajouter leur code à votre en-tête pour éviter tout problème d'exécution.

En règle générale, si un service vous le demande, nous vous recommandons de suivre ses conseils. Pour les autres extraits de code JavaScript, placez-les dans le pied de page de votre site WordPress. Le code CSS va toujours dans l'en-tête.

Comment ajouter du 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.

Commençons par parler de l'approche du plugin.

1. Utilisez un plugin tel que Head, Footer et Post Injections

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 besoin de modifier manuellement les fichiers de thème ou de vous assurer que vous ajoutez des scripts au bon endroit.

Bien qu'il existe de nombreux bons plugins parmi lesquels choisir, notre recommandation pour le travail est le plugin Head, Footer et 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 différents scripts pour les rendus mobiles et de bureau de votre site.

Pour ajouter le plugin, accédez à Plugins > Ajouter un nouveau dans votre tableau de bord et utilisez la fonction de recherche pour trouver le plugin. Cliquez sur installer, puis activez le plugin.

Une fois le plugin actif, vous pouvez 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.

Si vous explorez les options du plugin, vous verrez qu'il offre de nombreux emplacements supplémentaires pour vos extraits de code. Cependant, dans la plupart des cas, vous pouvez vous en tenir à l'onglet En- tête et pied de page .

Pour le code global, assurez-vous de placer ces extraits dans le champ Sur chaque page . Toutefois, si vous n'avez besoin que du code pour s'exécuter sur votre page d'accueil, utilisez l'option Uniquement sur la page d'accueil .

Une fois que vous avez terminé d'ajouter du code à votre site Web, enregistrez les modifications apportées au plug-in et vous êtes prêt à partir !

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

L'ajout manuel de code d'en-tête et de pied de page dans WordPress n'est pas compliqué, mais cela nécessite plus de considérations que l'approche du plugin.

Vous pouvez ajouter le code directement aux fichiers header.php ou footer.php de votre thème actif. Vous pouvez trouver ces fichiers dans le répertoire /public_html/wp-content/themes/ en ouvrant le dossier de votre thème actif et en regardant à l'intérieur :

Vous pouvez accéder à ces fichiers via le protocole de transfert de fichiers (FTP) et les modifier à l'aide de votre éditeur de code préféré. Cependant, l'édition directe des fichiers d'en-tête et de pied de page peut être compliquée. Dans cet esprit, nous avons deux recommandations si vous envisagez d'utiliser l'approche manuelle :

1. Créez un thème enfant pour votre thème. De cette façon, vous ne perdrez aucune personnalisation lorsque vous mettrez à jour le thème parent.
2. Utilisez des crochets pour ajouter le code via votre fichier functions.php . Cela offre une approche plus propre par rapport à l'édition manuelle des fichiers d'en-tête et de pied de page.

Idéalement, vous devriez toujours utiliser un thème enfant si vous prévoyez de faire tout type de personnalisation de thème. Vous pouvez accéder au fichier functions.php de votre thème enfant dans son dossier dans le répertoire /wp-content/themes .

Ouvrez le fichier functions.php dans votre éditeur de code. Pour ajouter le code que vous voulez, vous devez utiliser soit le wp_head   ou wp_footer   accrocher.

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 crochet wp_footer au lieu de wp_head si vous souhaitez placer le code dans votre pied de page. Vous pouvez également modifier le nom de la fonction (test_script) si vous le souhaitez.

Lorsque vous avez terminé de peaufiner votre fichier functions.php , n'oubliez pas de sauvegarder vos modifications, et c'est tout. Quel que soit le code que vous avez ajouté, il devrait fonctionner maintenant !

Conclusion

De nombreux services tiers tels que Google Analytics ou Facebook Pixel vous demandent d'ajouter des extraits de code à votre site Web afin qu'ils puissent s'y connecter. Cependant, ce n'est qu'un des nombreux cas où vous devrez ajouter du code à votre en-tête et pied de page dans WordPress, il est donc utile de savoir comment le faire.

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 tel que 'Head, Footer and Post Injections', soit ajouter des extraits de code via votre fichier functions.php .

Avez-vous des questions sur la façon d'ajouter du code d'en-tête et de pied de page dans WordPress ? Parlons d'eux dans la section des commentaires ci-dessous!