Ajouter du code à un en-tête ou un pied de page WordPress

Pour une grande variété de raisons, il est possible qu'à un moment donné, vous vouliez ou ayez besoin d'ajouter du code à l'en-tête ou au pied de page de votre site WordPress. Malheureusement, la plate-forme ne fournit pas de moyen simple ou direct de le faire dès le départ.

La bonne nouvelle est que vous pouvez facilement y remédier à l'aide d'un thème enfant et de votre fichier functions.php , ou d'un plugin WordPress. Quelle que soit la méthode que vous choisissez, vous pourrez facilement améliorer votre site avec des fonctionnalités personnalisées, des données utilisateur et des stratégies d'amélioration des performances.

Dans cet article, nous expliquerons quelques cas dans lesquels vous pourriez avoir besoin ou vouloir ajouter du code à l'en-tête et au pied de page de votre site WordPress. Ensuite, nous partagerons des instructions étape par étape pour deux méthodes qui vous permettent de modifier ces éléments pour créer un en-tête ou un pied de page personnalisé. Commençons!

Pourquoi modifier votre code d'en-tête et de pied de page WordPress ?

Les raisons pour lesquelles vous voudrez peut-être modifier votre en-tête ou votre pied de page WordPress sont nombreuses et variées. La plus évidente est probablement que parfois vous souhaitez styliser votre site en utilisant un code personnalisé et avez besoin d'un moyen d'ajouter ce code à votre en-tête et/ou pied de page.

Cependant, ce sont également des emplacements privilégiés pour les codes de suivi, tels que celui utilisé pour Google Analytics. Ces codes peuvent fournir des informations précieuses sur le comportement des utilisateurs pour améliorer vos stratégies de marketing et de contenu.

De plus, WordPress n'inclut pas les balises méta par défaut. Ceux-ci sont ajoutés à l'en-tête de votre site pour aider les moteurs de recherche à explorer vos pages. Bien qu'ils ne soient plus aussi pertinents qu'avant, il n'y a aucun mal à les ajouter à votre en-tête - ils ne peuvent qu'améliorer la visibilité de votre site.

Enfin, vous connaissez peut-être la pratique consistant à déplacer JavaScript bloquant le rendu « en dessous de la ligne de flottaison ». Cela signifie généralement l'ajouter à votre pied de page WordPress, ce qui nécessitera de modifier son code. Cette technique peut aider à améliorer les performances de votre site en réduisant les temps de chargement.

Comment ajouter manuellement du code à votre en-tête ou pied de page WordPress (en 2 étapes)

Il existe deux méthodes principales pour ajouter du code à votre en-tête ou pied de page WordPress. La première consiste à modifier manuellement le thème de votre site et la seconde consiste à utiliser un plugin. Bien que l'édition manuelle des fichiers de votre thème soit plus risquée et difficile, pour certains utilisateurs plus avancés, c'est la méthode préférée.

Étape 1 : créer un thème enfant

L'ajout manuel de code à votre en-tête ou pied de page WordPress implique la modification de certains fichiers de votre thème. Lorsque vous devez le faire, il est toujours sage de modifier un thème enfant au lieu de jouer directement avec les fichiers de votre thème parent. De cette façon, vous pouvez éviter de perdre vos modifications lorsque vous mettez à jour votre thème.

Heureusement, le processus de création manuelle d'un thème enfant est assez simple et vous pouvez accéder aux didacticiels WordPress dont vous aurez besoin pour personnaliser les en-têtes. Cependant, si vous avez besoin de créer un thème enfant en un clin d'œil, un plugin de création de thème tel que Child Theme Configurator peut vous aider.

Avec un plugin de création de thème, vous pouvez facilement générer un thème enfant en un clic, bien que l'approche entièrement manuelle puisse être tout aussi rapide une fois que vous avez la méthode en place.

Étape 2 : Modifier le fichier functions.php de votre thème enfant

Une fois votre thème enfant configuré, vous devrez accéder à son fichier functions.php et le modifier. Avant de commencer, il est toujours sage de sauvegarder votre site, juste au cas où vous commettriez des erreurs et voudriez restaurer facilement un état antérieur.

La manière habituelle de modifier votre fichier functions.php est via le protocole de transfert de fichiers (FTP) et un client FTP tel que FileZilla. Cependant, vous pouvez également modifier certains fichiers depuis votre tableau de bord WordPress. Pour y accéder, accédez à Apparence > Éditeur de thème .

Vous recevrez un avertissement indiquant que vous êtes sur le point de modifier les fichiers de votre thème. Cliquez sur le bouton J'ai compris pour continuer. Ensuite, vous voudrez vous assurer que vous avez sélectionné le bon fichier. Dans la barre latérale à droite de l'éditeur de site, assurez-vous que les fonctions du thème (functions.php) sont sélectionnées.

Vous pouvez maintenant ajouter votre code personnalisé à la fin de ce fichier et cliquer sur Mettre à jour le fichier lorsque vous avez terminé.

Comment ajouter du code à votre en-tête ou pied de page WordPress avec un plugin (en 2 étapes)

Bien que dans certains cas, il puisse être plus facile de modifier manuellement les fichiers de votre thème WordPress pour ajouter du code à votre pied de page ou à votre section d'en-tête, l'utilisation d'un plugin est généralement la voie la plus sûre. Pour les besoins de cet article, nous utiliserons l'un des plugins les plus populaires et les mieux notés pour la tâche, Header, Footer et Post Injections.

Cependant, de nombreux plugins disponibles dans le répertoire des plugins WordPress et ailleurs peuvent vous aider dans cette tâche.

Étape 1 : Installez et activez le plugin de votre choix

Pour commencer, vous devrez installer et activer le plugin que vous souhaitez utiliser. Vous pouvez le faire en téléchargeant le fichier .zip du plug-in à partir du répertoire des plug-ins ou d'un autre marché en ligne, puis en le téléchargeant sur votre site. Vous pouvez également accéder à Plugins > Ajouter un nouveau dans votre tableau de bord.

Ici, vous pouvez rechercher le plugin de pied de page ou d'en-tête que vous souhaitez utiliser. Quelle que soit la méthode que vous choisissez, vous terminerez cette étape en cliquant sur le bouton Installer , puis sur Activer lorsque l'option sera présentée.

Étape 2 : Ajoutez vos extraits de code à l'en-tête, au pied de page et aux injections de publication

Une fois le plugin installé, vous devriez pouvoir accéder à Paramètres> En-tête et pied de page dans votre tableau de bord.

Vous trouverez ici un éditeur de texte pour ajouter des extraits de code - tels qu'un code de suivi Google Analytics ou un code JavaScript personnalisé - que vous souhaitez inclure dans votre en-tête et/ou pied de page.

Vous pouvez accomplir beaucoup de choses sur cette page. Dans les deux premiers champs, vous pouvez ajouter du code à votre section d'en-tête. Le champ de gauche ajoute le code à chaque page de votre site – cela est utile pour Google Analytics, par exemple. Le champ de droite ajoutera le code uniquement à votre page d'accueil.

Les champs suivants ajoutent du code au code du corps et du pied de page de vos pages. Les champs de gauche sont destinés à l'affichage sur ordinateur, tandis que ceux de droite sont destinés aux versions mobiles de votre code. Une fois que vous avez terminé l'édition, n'oubliez pas de cliquer sur le bouton Enregistrer en bas de l'écran.

Améliorez l'expérience de votre site avec WP Engine

Il ne fait aucun doute que vous souhaitez que votre site Web WordPress offre une expérience numérique de premier ordre à vos utilisateurs. L'ajout de code à votre pied de page ou à votre en-tête WordPress est une tactique utile pour personnaliser votre site, mettre en œuvre Google Analytics ou améliorer les performances.

Chez WP Engine, nous avons une grande variété de ressources pour développeurs qui peuvent vous aider à porter l'expérience de votre site Web WordPress vers de nouveaux sommets. Découvrez-les aujourd'hui !