A peu près tous les sites ont un footer disposant de blocs de contenu : des sous menus, des liens, un logo, un calendrier ou tout autre élément décoratif. C’est particulièrement vrai sur les thèmes premium des CMS tels que wordpress. Des sidebar ou « emplacement de widgets » sont crées en backoffice pour le footer et l’utilisateur n’a plus qu’à y insérer les widgets de son choix.
Bien occuper l’espace
Une des difficultés lorsque l’on crée soi même un thème, c’est de faire en sorte que ces widgets normalement répartis sur 4 colonnes maximum, soient toujours bien affichés, quelque soit le nombre de sidebar utilisés.
Par exemple, si on en utilise 4, ils se répartissent avec chacun 25 % de l’espace disponible.
Avec 3 sidebar seulement, ils occupent chacun 33.33% de l’espace. A deux, 50% et avec une seule sidebar, le widget occupe tout l’espace.
Cela permet d’éviter des espaces vides ou des décalages visuellement dérangeants.
Si votre thème wordpress ne dispose pas d’emplacements de widgets
Dans notre fichier functions.php, il faut repérer le hook add_action( ‘widgets_init’, …) qui contient en principe une ou plusieurs déclarations de sidebar. Ajoutez-y les 4 emplacements dédiés au footer.
register_sidebar( array( 'name' => esc_html__( 'Footer area four', 'votre_text_domain' ), 'id' => 'footer-4', 'description' => esc_html__( 'Add widgets here for the third footer column', 'votre_text_domain' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ));
Dans le fichier footer.php, il faut ensuite placer nos sidebar avec des conditions. Tout le bloc est inclus dans une condition, et chaque bloc également. Ceci permet justement un affichage optimal, en fonction du nombre de sidebar utilisés.
Ces quelques lignes de codes suffisent à répartir les widgets parfaitement quelque soit le nombre de sidebar utilisés.
Utiliser les siblings
Un autre système plus complexe mais intéressant à étuder et imaginé André luis puis Léa Verou utilise le système de « parentalité » des éléments.
si un div est le premier enfant et le dernier enfant (c’est-à-dire .footer-widget-area:nth-child(1):nth-last-child(1)), on peut supposer que c’est le seul enfant du parent donc il prend toute la largeur disponible.
Si un div est le premier enfant et l’avant-dernier enfant (c.-à-d. .footer-widget-area:nth-child(1):nth-last-child(2)), on peut supposer qu’il y a deux colonnes, donc chaque élément prend 50% de la largeur disponible.
Etc…
.footer-widget-area { border: 1px solid #000; /* For better visualization, not necessary */ float: left; }
/* One column */ .footer-widget-area:nth-child(1):nth-last-child(1) { float: none; /* No need for one column to float */ width: 100%; /* Not necessary, but better illustrates technique */ }
/* Two columns */ .footer-widget-area:nth-child(1):nth-last-child(2), .footer-widget-area:nth-child(2):nth-last-child(1) { width: 50%; }
