Tutoriels

Comment ajouter un 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 aurez besoin de 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 trompez.

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 allons vous apprendre à 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 un 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 à incorporer 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 votre site Web tête Mots clés. 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.

Bas de page les balises fonctionnent de la même manière que leurs tête homologues. 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 incluez 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 s’exécuter avant le chargement de la page, tandis que le code de 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, déplacer 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 entre toujours dans l’en-tête.

Comment ajouter un 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 plugin.

1. Utilisez un plug-in 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 les fichiers de thème manuellement 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 la Tête, pied de page et post-injections brancher.

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, allez dans Plugins> Ajouter 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 passer directement à Paramètres> En-tête et pied de page. Vous verrez plusieurs champs dans lesquels vous pouvez ajouter des extraits de code.

Vérification des options de placement du code d'en-tête du plugin

Si vous creusez dans 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 à Tête et pied de page languette.

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

Une fois que 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 considérations que l’approche du plugin.

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

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

Vous pouvez accéder à ces fichiers via File TransFProtocole er (FTP) et modifiez-les à l’aide de votre éditeur de code préféré. Cependant, la modification 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 prévoyez d’utiliser l’approche manuelle:

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

Dans l’idéal, vous devez toujours utiliser un thème enfant si vous prévoyez d’effectuer un type de personnalisation de thème. Vous pouvez accéder à votre thème enfant functions.php fichier dans son dossier dans le / wp-content / themes annuaire.

Ouvrez le functions.php fichier dans votre éditeur de code. Pour ajouter le code souhaité, vous devez utiliser soit 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 au lieu de wp_head si vous souhaitez placer 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é de peaufiner votre functions.php , n’oubliez pas de sauvegarder vos modifications, et c’est tout. Le code que vous avez ajouté devrait fonctionner maintenant!

Conclusion

De nombreux services tiers tels que Google Analytics ou Facebook Pixel vous obligent à ajouter des extraits de code à votre site Web afin qu’ils puissent s’y connecter. Cependant, ce n’est que l’un des nombreux cas où vous devrez ajouter du code à votre en-tête et à votre 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 pied de page. Vous pouvez soit utiliser un plugin tel que “Head, Footer and Post Injections”, ou ajouter des extraits de code via votre functions.php fichier.

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

Show More
InterServer Web Hosting and VPS

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button