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.

Publié par scoco

Auteur et principal acteur de ce blog. Entre le Roller Derby, le longboard, les geekeries et d'autres trucs, je parle un peu de tout.