Personnaliser votre site WordPress à l’aide de code peut être effrayant. Souvent, vous devrez creuser dans les fichiers principaux 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 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 exploitez 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 impliquant le suivi de sites Web.
Tous ces services nécessitent que vous ajoutiez des scripts spécifiques entre les diriger Mots clés. L’en-tête de votre site est un élément 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 diriger homologues. Techniquement, si vous ajoutez des extraits de code au pied de page de votre site, ils devraient fonctionner 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, 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 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 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 le Injections de tête, de pied de page et de poste brancher.
Ce plugin vous donne beaucoup de contrôle sur l’endroit où dans votre code vous souhaitez ajouter vos extraits de 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 sur 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 passer 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 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 aux 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
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 à votre thème actif en-tête.php ou pied de page.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 :
Vous pouvez accéder à ces fichiers via la transmission de fichiersFer Protocole (FTP) et éditez-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 envisagez d’utiliser l’approche manuelle :
- 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.
- Utilisez des crochets pour ajouter le code via votre fonctions.php déposer. Cela offre une approche plus claire de la modification 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 personnaliser tout type de thème. Vous pouvez accéder au thème de votre enfant fonctions.php fichier dans son dossier dans le /wp-content/themes annuaire.
Ouvrez le fonctions.php fichier 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 wp_footer crochet au lieu de wp_head si vous voulez 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 fini de peaufiner votre fonctions.php fichier, n’oubliez pas d’enregistrer 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 nécessitent que vous ajoutiez 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 aurez besoin d’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 fonctions.php déposer.
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!