Footer personnalisable sur wordpress

Par scoco37

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:

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

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 :

/* Function.php > Debut Widget Footer */
register_sidebar(array(
'name'=>'widget-f1',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'widget-f2',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(array(
'name'=>'widget-f3',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
/* Function.php > Début Widget Footer */

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.

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.

Voir tout ce que fait scoco

Vous allez peu etre aimer ceci ...

37 commentaires

  1. Merci pour le tuto ! J’ai cependant une question, comment fait on pour changer le footer selon la langue ? Mon footer est en Français pour mes versions française, anglaise et espagnole…

    Répondre

  4. Bonjour,
    J’ai appliqué à la lettre le tuto, ça avait fonctionné, et j’ai voulu ajouter une troisième colonne au footer, et depuis plus accès à mon site et au BO, c’est une page blanche…
    Est ce que quelqu’un peut m’aider ? Je ne sais pas du tout comment faire …

    Merci d’avance pour votre aide

    Répondre

  5. J’adore ! MERCI 🙂
    Testé sous WordPress dernière version 4.5.
    Je sens que je vais utiliser le concept pour simplifier la gestion des zones du template directement dans l’admin de WP
    TOP

    Répondre

      1. est-ce vous pourriez être plus précis car je suis un peu en difficulté

        Il faut que j’ouvre le fichier widget.php ? Quelles lignes dois-je modifier et par quoi ?

      2. En fait, c’est bon je viens de comprendre ^^
        auf que maintenant le problème, c’est que les widgets apparaissent à la ligne, et mois je voudrais qu’ils soient plutôt en colonne (comme des boîtes quoi, avec 1 widget pour une boîte)

      3. tu ne résouds pas le problème la on a plus accès au wordpress comment faire pour changer la parenthèse

  7. Bonjour,
    j’ai entré les modifications sur mon site, problème : je n’ai plus accès à rien ! Lorsque je charges les pages admin ou le site tout seul rien ne charges. Comment faire ??
    En attende de votre réponse.

    Répondre

      2. Bonjour,
        Comment avez vous résolu le problème ?
        Mon site a sauté aussi et je ne sais pas comment faire pour le récupérer

      3. Moi aussi ca marque : Parse error: syntax error, unexpected ‘=>’ (T_DOUBLE_ARROW) in (site blabla..) on line 131.
        Il y a absolument plus rien qui ne marche, merci

  9. Attention : pour appliquer la méthode sur les thèmes enfants, il s’agit du fichier functions.php, avec un « s » final. Sinon ça ne marche pas.

    Répondre

    1. Bonjour,

      Il suffit de dupliquer 2 fois cette partie de code en renommant en f4 puis f5

      …

      et celle ci également en renommant en f4 puis f5
      register_sidebar( … );

      Scoco

      Répondre

  11. Bonjour je cherche à modifier le footer de mon site.
    J’utilise comme thème Twenty TEN.
    Dans ce footer je voudrais ajouter l’accès aux pages mentions légales et contact.
    J’ai lu vos explications, mais je ne vois pas comment ajouter tout ça.
    Existe t’il un moyen, type pluging extension permettant de réaliser cette opération.
    Avez vous un exemple sur ce sujet.
    Les widgets -F1 -f2 -f3, vont ‘ils apparaître lorsque l’on utilisation la modifcation du menu apparence?
    Cordialement

    Répondre

  12. Bonjour, je souhaite mettre un slider (instagram) en bas de mmon blog dans le footer mais le thème choisi (sparklin) propose 3 zones alors que je voudrais que le wiget prenne toute la largeur. Pouvez vous m’aider ? (j’ai regarder votre note sur le fichier footer mais c’est également pour 3 zones) merci

    Répondre

      1. bonjour,
        merci de la réponse, je posais la question pour un thème enfant comme cela n’est pas préciser dans l’article, je voulais être sûr.
        Twenty Fourteen a des widgets dans le footer d’origine, pourquoi rajouter ce code?
        Merci

      3. merci, Fourteen est bien dommage qu’avec un écran en haute résolution, il soit collé à gauche de l’écran, et non centré.

  18. Bonjour,
    premièrement, merci pour ce bout de code, j’ai cependant un problème. Je travail sur un thème enfant dans lequel j’ai insérer les différents codes si dessus. Lorsque je suis dans la gestion des widgets, je vois que f2 et f3, y-a t’il une raison ?
    Par contre en ajoutant une 2nde fois f1, les 3 widgets apparaissent.
    Merci de votre lecture.

    Répondre

Leave a Comment

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