Le footer WordPress est un élément essentiel de la conception et de la mise en page d’un site web. Il est situé en bas de chaque page du site et constitue une zone permettant d’afficher diverses informations et fonctionnalités pour personnaliser et optimiser l’expérience utilisateur.
Dans cet article nous allons voir ensemble ce que l’on entend exactement par footer (ou pied de page) dans l’environnement WordPress et qu’elles sont les différentes façons de le créer, le modifier ou le personnaliser.
Avec l’apparition de Gutenberg et ses blocs de contenus, puis l’arrivée en force du Full Site Editing, WordPress révolution totalement sa philosophie entrainant des changements considérables dans la façon d’appréhender la personnalisation du pied de page !
Le footer, également appelé pied de page, est une section présentée généralement sous la forme d’une section horizontale située au bas de chaque page d’un site web créé avec WordPress. Cette section est destinée à fournir des informations complémentaires sur le site.
Le footer WordPress contribue à renforcer l’identité de la marque et à établir la crédibilité d’un site web. Il peut également jouer un rôle dans la navigation, l’accessibilité et la convivialité d’un site web. En outre, il peut aussi permettre aux visiteurs de trouver rapidement des informations importantes et de découvrir des ressources supplémentaires.
Un pied de page est généralement plus discret qu’un en-tête ou le corps du site, mais demeure un élément clé pour une expérience utilisateur optimale.
Le footer peut contenir une variété d’éléments, tels que :
- Informations de contact : Il est courant d’inclure des informations de contact telles que l’adresse e-mail, le numéro de téléphone, l’adresse postale et les liens vers les réseaux sociaux de l’entreprise ou du propriétaire du site.
- Liens de navigation : Le footer peut inclure des liens vers des pages importantes d’un site, telles que la page “À propos”, la page de contact, ou n’importe quelle page que vous souhaitez mettre en avant.
- Mentions légales et politiques de confidentialité : Les sites web doivent souvent afficher certaines informations légales, telles que les conditions d’utilisation, la politique de confidentialité et les mentions légales.
- Copyright et crédits éventuels : Le footer est également utilisé pour afficher les droits d’auteur et les crédits, tels que le nom du propriétaire du site, l’année en cours et les crédits pour les images, les vidéos ou les scripts utilisés.
- Réseaux sociaux : On place souvent des liens vers ses réseaux sociaux dans le footer afin de permettre au lecteur d’y avoir accès à tout moment depuis n’importe quelle page de votre site WordPress.
- Newsletter : c’est l’endroit le plus commun pour placer un formulaire d’inscription à une newsletter.
- Recherche interne : même si on la retrouve plus souvent dans le menu d’un site WordPress, certains footers peuvent utiliser un champ de recherche.
Tous les éléments présents dans le footer étaient jusque-là insérés par un système de “widgets” qui faisait une des marques de fabrique de WordPress. Aujourd’hui avec l’apparition du Full Site Editing, ce concept est amené à évoluer pour transformer le footer en un élément personnalisable de la même façon que le corps de votre site, en y intégrant du contenu sous la forme d’ajouts de blocs.
Jusqu’à la sortie du thème Twenty Twenty Three marquant un tournant définitif de WordPress vers le Full Site Editing, le footer était une section que l’on personnalisait depuis un onglet spécifique de l’administration.
Nous allons faire un tour du propriétaire comme si de rien n’était. Car nombreux sont les utilisateurs WordPress qui n’utilisent pas le thème 2023 ni des thèmes compatibles avec le FSE.
À l’époque, un footer WordPress comprenait 3 zones de widgets affichés sous la forme de 3 colonnes. Certains thèmes y ajoutaient des zones de widgets supplémentaires. Dans chacune des zones, on insérait par “glissé-déposé” les widgets disponibles par défaut ou ceux ajoutés par votre thème ou vos plugins installés.
Aujourd’hui, le footer par défaut comporte une zone simple que l’on peut personnaliser comme du contenu “normal” à partir des blocs Gutenberg. Cela laisse une marge de manœuvre beaucoup plus importante que par le passé. Si la personnalisation était un peu limitée auparavant, aujourd’hui on peut insérer n’importe quel contenu dans le footer de façon très facile.
La première façon de personnaliser le footer WordPress “classique” c’est en allant sur la page de personnalisation du footer. On y accède depuis l’interface d’administration de WordPress, sous “Apparence” > “Widgets”.
Ici, par défaut, on trouve une seule zone de widget “Pied de page” disponible sur notre thème WordPres Twenty Twenty Two.
Et comme on le voit, il s’agit d’une zone d’édition de contenu où la petite icône “+” nous permet d’ajouter un bloc Gutenberg. À partir de là il est possible de créer un footer WordPress personnalisé, mais ce n’est pas très intuitif.
On aurait tendance à penser que le bloc représenté correspond à la totalité de la surface du footer, mais il n’en est rien. En fait le concept des 3 zones de widgets “historiques” est toujours en place, mais de façon cachée.
Regardez plutôt.
Si vous créez un bloc avec 3 colonnes et que vous ajoutez du contenu dans chaque colonne, vous vous retrouvez avec une mise en page bizarre ou tout est regroupé à gauche.
Pourquoi ? Parce qu’en fait le footer par défaut est “pré-découpé” en 3 colonnes que l’on ne voit pas. Et chaque “ligne” de cette zone de pied de page sera affichée dans une colonne du pied de page.
Ce n’est pas clair ? Regardez.
Si vous ajoutez 3 blocs de contenu les uns en dessous des autres, vous obtenez une mise en page de votre footer en 3 colonnes.
Bizarre, non ? En tous cas, ce n’est pas intuitif.
Et surtout, ce n’est pas pratique ! Car si vous voulez, par exemple, un titre et un élément supplémentaire en dessous dans chaque colonne, cela va vous créer autant de colonnes que de blocs ajoutés.
Si j’ajoute des blocs sous mes titres, le résultat n’est pas du tout ce que j’espère. Désolé, mais c’est le bordel.
Alors, comment faire ?
Pour arriver à un résultat satisfaisant, vous allez devoir regrouper les éléments qui fonctionnent ensemble pour qu’ils s’affichent bien dans la même colonne du footer. Pour cela vous allez devoir utiliser un bloc “groupe”.
Nous avons vu les problèmes liés au nouvel éditeur de footer WordPress “classique” (c’est un peu étrange dit comme ça, mais je ne sais pas comment le différencier de l’éditeur FSE, tout en le distinguant de l’ancien éditeur à base de widgets…)
Pour créer un pied de page proprement dès le départ, vous devez donc utiliser directement les blocs “groupe”. Je vous déconseille d’utiliser le bloc “groupe de widget” car il y a des bogues. Par exemple si vous utilisez un “groupe de widget” et que vous y insérez le bloc par défaut “icône de réseaux sociaux”, vous n’aurez pas la possibilité d’ajouter l’URL de redirection vers vos réseaux… donc c’est ballot…
En plus en utilisant le bloc “groupe” vous aurez plus de manœuvres pour personnaliser le titre de chaque section.
Vous créez un bloc “groupe”.
Dans ce bloc « groupe » vous allez pouvoir ajouter tous les blocs que vous souhaitez afficher dans la première colonne de votre footer.
Vous allez répéter l’opération pour chacune des 3 colonnes de votre pied de page WordPress.
Et vous obtenez un résultat plus proche de ce que vous souhaitiez pour votre footer WordPress !
À partir de là, et une fois qu’on a compris le principe pour construire un footer proprement, alors on va pouvoir ajouter du texte, des images, des titres, des liens ou tout autre contenu disponible dans la bibliothèque de blocs.
Les widgets WordPress
Les “widgets” à l’ancienne sont toujours là ! Et on pourra donner un look rétro si on le souhaite en installant des listes des derniers articles ou un nuage de mots clefs comme au bon vieux temps (on ne vous le recommande pas cela dit !)
Là encore le nombre et la variété des widgets peuvent différer en fonction des thèmes et des plugins que vous avez installés sur votre site WordPress.
Une fois configuré votre footer avec le contenu qui vous intéresse, la sauvegarde de vos modifications permet d’afficher les éléments insérés dans votre footer WordPress.
La deuxième façon de personnaliser le footer WordPress “classique” c’est en entrant dans les options de personnalisations de votre thème. De nombreux thèmes WordPress offrent des options de personnalisation avancées du footer. Ces options varient d’un thème à l’autre, mais le principe pour y accéder reste le même.
On y accède depuis l’interface d’administration de WordPress, sous “Apparence” > “Personnaliser”.
Cela ouvre les réglages de personnalisation de votre thème.
Vous les avez surement aperçus, directement sur la page, on trouve sur chacune des colonnes du pied de page, des icônes “crayon” qui permettent d’accéder directement aux réglages de cette colonne.
Si vous cliquez sur l’icône “crayon” de la première colonne “Contact”, ça vous ouvre directement l’onglet “Pied de page” dans les réglages à gauche et ça sélectionne votre groupe de contenu correspondant.
Et en cliquant sur l’icône “crayon” de la deuxième colonne “Newsletter”, ça me sélectionne le bloc correspondant de la même façon.
Mais vous avez une autre option, depuis la colonne de contrôles de gauche pour accéder aux réglages de votre footer. Ici sur le thème Twenty Twenty One c’est en cliquant sur l’onglet “Widget”
Et cela vous ouvre, toujours dans la colonne des contrôles, le contenu de votre footer et la possibilité de le modifier et d’y ajouter des éléments.
Inconvénient de cette méthode
Cette méthode a de grosses limites concernant la modification de son pied de page et c’est tout simplement que depuis la personnalisation, il n’est pas possible d’accéder aux réglages de chaque bloc de contenu. Ici, par exemple, vous ne pourrez pas modifier la couleur de vos icônes de réseaux sociaux…
Alors on va pouvoir supprimer des choses, on va pouvoir ajouter des blocs et du contenu, mais on ne pourra pas vraiment travailler les réglages de chaque bloc. Ce qui n’est pas très pratique, il faut bien l’avouer !
C’est la révolution WordPress en marche. Le virage de WordPress vers le Full Site Editing est une révolution en marche qui permet d’avoir la main sur tous les contenants d’un site web. Pour faire simple, avant, le commun des mortels pouvait principalement intervenir sur le corps des pages de son site web, à travers les éditeurs d’articles et de pages. Le header (l’entête), le footer (pied de page) et les sidebars (colonnes latérales) étaient assez peu accessibles par défaut et uniquement personnalisables à travers les réglages de votre thème ou par l’édition des fichiers PHP.
Aujourd’hui, avec le Full Site Editing, WordPress veut vous donner accès à la personnalisation de l’entièreté de votre site web. Et ce, sur le même principe que l’édition d’une page ou d’un article, par l’ajout de blocs de contenus. Finis les limites, finis les mains dans le code, tout est là, sous vos yeux, accessible et modifiable à volonté.
Pour le moment, peu de thèmes sont entièrement compatibles avec le Full Site Editing et même le thème par défaut Twenty Twenty Three ne propose pour le moment qu’une version “bêta”.
Nous allons donc utiliser le thème 2023 par défaut pour avoir un petit aperçu du changement de philosophie opéré par WordPress.
Pour cela, nous allons ouvrir l’onglet “Éditeur bêta” accessible sous l’onglet “Apparence”.
S’ouvre alors une nouvelle page, avec le nouvel éditeur Full Site de WordPress.
Vous remarquerez dans la colonne de droite, dans l’onglet “Modèle”, apparaissent des zones, et notamment la zone “Pied de page” qui nous intéresse. Nous allons cliquer dessus.
Cela va sélectionner la zone du footer de notre site WordPress.
On remarque de suite le bouton “Modifier” qui va nous permettre de personnaliser notre footer WordPress via le Full Site Editing. En cliquant sur “Modifier”, une nouvelle page s’ouvre dédiée à la modification du pied de page.
De là, vous allez pouvoir créer votre pied de page comme n’importe quel bloc Gutenberg. Pour cet exemple vous allez reproduire le footer que nous avons créé précédemment.
Nous sommes donc dans la partie édition de notre footer en mode Full Site Editing. Pour cet exemple, nous allons supprimer tout le contenu du footer pour partir de zéro.
Nous allons faire au plus simple.
Votre première étape va être d’ajouter un bloc “colonnes” à notre footer.
Et vous allez choisir de créer 3 colonnes pour reproduire le footer précédemment vu.
Vous ajoutez votre contenu dans chaque colonne et vous ajustez les réglages disponibles dans l’onglet “Bloc” (marge interne, arrière-plan, etc.)
Vous cliquez sur l’onglet “Retour” pour voir le résultat de votre travail.
Et voilà !
Il faut bien l’avouer, la création d’un footer personnalisé avec le Full Site Editing est beaucoup plus intuitif que dans sa version “classique”. Si nous avons fait quelque chose de très simple, il est possible de créer les footers les plus complexes et tous les designs sont envisageables.
Le FSE apporte également de nouveaux blocs Gutenberg comme le blog “Groupe/Rangée/Empilement” qui offre un nombre de possibilités illimitées. Mais ça, c’est une autre histoire !
Puisqu’on l’a compris, WordPress a décidé de multiplier les concepts d’édition, il y a une autre façon de pouvoir éditer son footer en mode Full Site Editing. Et cela se passera directement dans l’éditeur de page.
Pour rappel, sur le thème Twenty Twenty Three on y accède via “Apparence > Editeur bêta”
Mais il est possible d’accéder au FSE depuis n’importe qu’elle page de votre site. En effet, vous verrez que l’ancien bouton “Personnaliser”, que l’on retrouvait dans la barre des tâches supérieure, a été remplacé par “Modifier le site”.
Bref, après avoir cliqué sur “Modifier le site”, ou sur “Editeur Bêta”, nous voilà donc de retour sur la page d’accueil en mode Full Site Editing.
Vous allez cliquer sur un des éléments de votre footer.
On peut voir directement qu’il est possible d’éditer ce bloc, comme tous les autres blocs de notre footer. De la même manière si votre footer était vide, vous pourriez le créer entièrement via cet éditeur.
Ici, par exemple, vous pouvez modifier l’agencement de votre pied de page.
Ou rajouter une quatrième colonne si vous le souhaitez.
Une fois enregistrés les changements, la nouvelle version de votre pied de page sera diffusée sur l’ensemble de votre site WordPress.
Conclusion
Nous avons donc vu un petit aperçu des deux versions d’édition qui coexistent pour créer un footer WordPress. Bien sûr, ici nous n’avons utilisé que les thèmes par défaut. Avec d’autres thèmes, la philosophie peut être encore totalement différente.
On pense notamment au thème GeneratePress par exemple qui avec son concept “Elements” permet de construire un footer de A à Z avec l’éditeur Gutenberg, puis de choisir où l’afficher sur son site, permettant par exemple de pouvoir avoir différents footer WordPress sur différentes pages…
Bref, vous l’aurez compris, nous sommes loin d’avoir fait le tour complet des possibilités qu’offre tous les outils à sa disponibilité dans l’écosystème WordPress.
Votre article arrive pile au bon moment ! Je construit un site /blog avec le thème Neve et le constructeur de pages Elementor.
Et je me demandais vraiment comment construire ce foutu Footer !
Je vais suivre votre pas à pas ! Merci !!!