Comment ajouter du code au Header (l’en-tête) ou au Footer (le pied de page) de WordPress ? De nombreux outils et scripts de suivi exigent que vous ajoutiez des extraits de code à l’en-tête ou au pied de page de votre site WordPress. Mais, par défaut, WordPress ne rend pas très accessible l’édition de ces fichiers.

Dans cet article, nous allons vous montrer comment ajouter du code à l’en-tête ou au pied de page WordPress en utilisant un plugin WordPress ou en ajoutant manuellement le code à votre fichier functions.php. Pour la plupart des utilisateurs, la méthode du plugin est la méthode recommandée. Mais les utilisateurs de WordPress avancés et intermédiaires peuvent préférer utiliser la méthode du code manuel, à la place.

Vous pouvez cliquer sur les liens ci-dessous pour accéder directement à la méthode de votre choix :

Comment ajouter du code à l’en-tête et au pied de page WordPress avec un plugin

Pour la plupart des utilisateurs, la façon la plus simple d’ajouter du code à l’en-tête et au pied de page de WordPress est d’utiliser un plugin. Les avantages de l’utilisation d’un plugin par rapport à la méthode manuelle dans la section suivante sont les suivants :

  • Vos extraits de code resteront intacts si vous changez de thème.
  • Le plugin permet d’ajouter facilement des extraits de code à l’en-tête ou au pied de page de votre page d’accueil, ce qui peut être utile dans certains cas d’utilisation.
  • Le plugin est plus convivial pour les débutants car il ne nécessite pas de creuser dans le code.

Bien qu’il existe plusieurs plugins qui offrent cette fonctionnalité, nous recommandons le plugin Head, Footer and Post Injections de Stefano Lissa parce qu’il vous donne plus de contrôle que la plupart des alternatives. Il a plus de 200.000 installations actives avec une note de 5 étoiles sur 5.

Plugin Header and Footer WordPress
Plugin Header and Footer WordPress

Étape 1 : Installez et activez Head, Footer and Post Injections.

Head, Footer and Post Injections est disponible gratuitement sur WordPress.org, vous pouvez donc l’installer et l’activer directement depuis votre tableau de bord WordPress en allant sur Plugins → Ajouter et en le recherchant :

Installer le plugin
Installer le plugin

Étape 2 : Ajout d’un extrait dans Head, Footer and Post Injections

Une fois le plugin activé, vous pouvez accéder à son interface en allant dans Paramètres → Head and Footer dans votre tableau de bord WordPress. Vous verrez un certain nombre d’onglets dans l’interface du plugin. Mais pour ce guide, vous travaillerez surtout dans l’onglet Head and Footer par défaut :

Interface de Head, Footer and Post Injections
Interface de Head, Footer and Post Injections

Pour ajouter du code à l’en-tête de votre site, vous devez le coller dans l’une des cases sous la zone <HEAD> SECTION INJECTION :

  • Every page – ajoute l’extrait de code à l’en-tête de chaque page de votre site. C’est ce que vous voudrez utiliser la plupart du temps.
  • Only home page– ajoute seulement l’extrait de code à l’en-tête de votre page d’accueil.

Par exemple, pour ajouter le code de suivi Google Analytics à WordPress, vous n’avez qu’à le coller dans la zone Every page et enregistrer vos modifications :

Exemple d'ajout de code à l'en-tête
Exemple d’ajout de code à l’en-tête

Pour ajouter du code au pied de page de votre site, vous pouvez faire défiler vers le bas jusqu’à l’option BEFORE THE </BODY> CLOSING TAG (FOOTER). Encore une fois, vous avez deux options, bien qu’elles soient différentes de la section en-tête :

  • Desktop – malgré le nom, cela ajoute du code au pied de page des versions bureau et mobile de votre site, sauf si vous cochez spécifiquement la case Mobile.
  • Mobile – une fois coché, cela vous permet d’ajouter un extrait de code différent à la version mobile de votre site.

Si vous souhaitez simplement ajouter un extrait de code dans la section pied de page pour tous les utilisateurs, quel que soit leur appareil, collez-le dans la case Desktop et laissez Mobile décochée :

Exemple d'ajout de code au pied de page
Exemple d’ajout de code au pied de page

Si nécessaire, vous pouvez ajouter plusieurs extraits de code à chaque boîte.

BONUS – Ajouter du code à l’en-tête et au pied de page des pages Google AMP

Un autre avantage de ce plugin est que, si vous utilisez Google AMP pour WordPress, le plugin vous permet d’ajouter spécifiquement des extraits de code à l’en-tête et au pied de page des versions Google AMP de vos pages (tant que vous utilisez le plugin officiel AMP d’Automattic).

Pour ce faire, accédez à l’onglet AMP dans Head and Footer et collez votre extrait de code dans la case appropriée :

Interface Google AMP
Interface Google AMP

Si vous avez simplement besoin d’ajouter différentes fonctions PHP sur l’ensemble du site, nous vous recommandons également de consulter le plugin gratuit Code Snippets. Il élimine le besoin d’ajouter des extraits personnalisés au fichier functions.php de votre thème. Il a actuellement plus de 100.000 installations actives avec une note de 5 étoiles sur 5.

Plugin WordPress Code Snippets
Plugin WordPress Code Snippets

Comment ajouter manuellement du code à l’en-tête et au pied de page de WordPress

Si vous n’êtes pas familier avec les bases de PHP, nous vous recommandons de vous en tenir à la méthode du plugin ci-dessus. La méthode manuelle pourrait être trop compliquée pour vous.

Dans cette section, vous apprendrez comment ajouter manuellement des extraits de code à l’en-tête et au pied de page de votre thème via son fichier functions.php.

Si vous voulez continuer avec cette méthode plutôt que le plugin de la section précédente, il est essentiel d’utiliser un thème enfant WordPress pour faire vos modifications. Si vous n’utilisez pas de thème enfant, tout code que vous ajoutez à votre en-tête ou pied de page sera écrasé si vous mettez à jour votre thème WordPress.

De nombreux développeurs proposent un thème enfant. Mais si votre développeur ne le fait pas, voici un guide sur la façon de créer un thème enfant WordPress. Une fois que votre thème enfant est prêt à fonctionner, vous pouvez procéder aux étapes suivantes pour ajouter du code à l’en-tête ou au pied de page de votre thème.

Bien que vous puissiez ajouter des extraits de code directement à vos fichiers header.php et footer.php, une meilleure façon est d’utiliser votre fichier functions.php et le hook WordPress approprié. Cela vous permet de conserver tous vos extraits au même endroit et d’éviter de modifier les fichiers de thème de base.

Étape 1 : Préparer des extraits de code

Pour commencer, nous vous donnerons un cadre approximatif pour ajouter du code à la fois à votre en-tête et à votre pied de page.

Pour ajouter du code à votre en-tête, utilisez cet extrait de code :

/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};

Pour ajouter du code à votre pied de page, utilisez cet extrait de code :

/* Describe what the code snippet does so you can remember later on */
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE FOOTER CODE HERE
<?php
};

Pour chaque extrait, assurez-vous de changer :

  • La description du commentaire (utile lorsque vous avez besoin de vous rappeler ce que fait cet extrait de code un an plus tard)
  • Le conteneur your_function_name (les deux instances)
  • L’espace réservé VOTREX CODE ICI

Étape 2 : Ajouter des extraits de code au fichier functions.php dans le thème enfant

Une fois que vous avez le(s) extrait(s) de code pertinent(s) prêt(s), vous devez les ajouter au fichier functions.php du thème de votre enfant. Vous pouvez soit éditer ce fichier en vous connectant à votre site via FTP. Ou, vous pouvez aller sur Apparence → Éditeur et sélectionner le fichier functions.php. Ensuite, collez votre code à la fin du fichier :

Ajouter du code au fichier functions.php
Ajouter du code au fichier functions.php

N’oubliez pas de sauvegarder vos modifications et c’est terminé !

BONUS : Ajouter un code à l’en-tête ou au pied de page pour des pages spécifiques seulement.

Si vous voulez avoir plus de contrôle sur l’endroit où vos extraits de code d’en-tête ou de pied de page apparaissent, vous pouvez utiliser les instructions if pour ajouter seulement le code à des pages spécifiques sur votre site WordPress.

Par exemple, pour n’ajouter que des extraits de code à l’en-tête ou au pied de page de votre page d’accueil, vous pouvez utiliser :

/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) {  ?>
PASTE HEADER CODE HERE
<?php  }
};

Une autre option est de n’ajouter que les extraits de code à des articles ou pages spécifiques. Pour ce faire, vous pouvez utiliser cet extrait de code :

/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) {  ?>
PASTE HEADER CODE HERE
<?php  }
};

Assurez-vous de remplacer le numéro d’exemple – 73790 – par l’ID réel de l’article ou de la page à laquelle vous voulez ajouter les extraits de code.

En cas de doute, utilisez le plugin

Voilà qui résume notre guide sur la façon d’ajouter du code à l’en-tête ou au pied de page de votre site WordPress. Si les exemples de codes manuels sont déroutants, nous vous recommandons d’utiliser la méthode du plugin. Il est beaucoup plus convivial pour les débutants et, la plupart du temps, il vous offre autant de fonctionnalités.