Footer personnalisable sur wordpress

Pourquoi personnaliser le footer de son site ?

Votre footer ne vous plait pas! Si la ou les licences de votre thème wordpress vous permettent de retravailler les codes sources afin de les adapter à vos besoins. Les étapes ci-dessous vous permettrons d’ajouter certaines informations.
C’est à dire :

• Ajouter des liens vers certaines pages (contact, mentions légales, plan du site, …)
• Ajouter les boutons des médias sociaux (facebook/twitter/google)
• Ajouter un texte pour présenter rapidement le site
• Ajouter des widgets configurables dans la partie administration
• …

Etape 1 : Repérer les fichiers à modifier

Suivant le thème qui vous utilisez, vous aurez plus ou moins la même configuration, à savoir, les fichiers suivants:

• footer.php > Fichier contenant tout se qui sera afficher dans le pied de page
• function.php > Fichier répertoriant certaines configurations du thème
• styles.css > Fichier contenant le css de votre thème

Etape 2 : Ajouter 3 widgets personnalisables

Dans « footer.php », là où commence votre pied de page, ajoutez:

<div class="footer-scoco">
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f1'); ?>
  </ul>
  </div>
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f2'); ?>
  </ul>
  </div>
  <div class="footer-widget-scoco">
  <ul class="widget-scoco">
    <?php dynamic_sidebar('widget-f3'); ?>
  </ul>
  </div>
  <div style="clear:both;float:none;"></div>
</div>

Dans « style.css », à la fin, ajouter :

Adaptez le css à votre thème

/* styles.css > apparence du footer */
.footer-widget-scoco{width: 33%;float:left;} 
.footer-widget-scoco h2{margin: 0;}
.footer-widget-scoco ul{list-style: none;margin: 0;padding: 0;}
.footer-widget-scoco li{list-style: none;margin: 0;padding: 0;}

Dans « function.php », ajouter :

register_sidebar(array(
  'name'=>'widget-f1',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
register_sidebar(array(
  'name'=>'widget-f2',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));
register_sidebar(array(
  'name'=>'widget-f3',
  'before_widget' => '<ul><li>',
  'after_widget' => '</li></ul>',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
));

Etape 3 : Remplissez vos widgets !

Si il vous manque des informations, n’hésitez pas à me contacter. J’améliorerai cet article par la suite.