"/>

Un footer widgetisé et conditionnel

Comment disposer les widget du footer de façon optimale ?

Ce mémo est une adaptation de l’article posté par l’agence Themetry.

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 1', 'votre_text_domain' ),
		'id'            => 'footer-1',
		'description'   => esc_html__( 'Add widgets here for the first 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>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 2', 'votre_text_domain' ),
		'id'            => 'footer-2',
		'description'   => esc_html__( 'Add widgets here for the second 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>',
	) );
	register_sidebar( array(
		'name'          => esc_html__( 'Footer 3', 'votre_text_domain' ),
		'id'            => 'footer-3',
		'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>',
	) );

  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.

<footer id="colophon" class="site-footer">
		<div class="site-info">
	<?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) || is_active_sidebar( 'footer-4' ) ) : ?>
			<div class="footer-widgets flex-container">
				<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-1' ); ?>
					</div>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-2' ); ?>
					</div>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-3' ); ?>
					</div>
				<?php endif; ?>
				<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>
					<div class="footer-widget-area">
						<?php dynamic_sidebar( 'footer-4' ); ?>
					</div>
				<?php endif; ?>
			</div><!-- .footer-widgets -->
		<?php endif; ?>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->

La magie se situe au niveau du css.

Utiliser Flexbox

.footer-widgets {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column wrap;
           flex-flow: column wrap;
  }

.footer-widget-area {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding:10px
}

@media (min-width:992px){
  .footer-widgets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
  }

.footer-widget-area {
    width: 25%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding:10px
}
}

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%;
}

/* Three columns */
.footer-widget-area:nth-child(1):nth-last-child(3),
.footer-widget-area:nth-child(2):nth-last-child(2),
.footer-widget-area:nth-child(3):nth-last-child(1) {
	width: 33.3333%;
}

 

Voici le résultat avec un exemple statique :

Vous pouvez l’ouvrir dans codepen pour l’éditer, et notamment supprimer des blocs « footer-widget-area » pour voir le résultat.

See the Pen
Conditionnal Footer Widget Display
by yuyazz (@yuyazz)
on CodePen.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.