Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #14: Le footer

0

Ce tutoriel est le quatorzième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Nous nous approchons à grands pas de la fin de notre série de tutoriels ! Il nous reste le footer, que nous allons voir aujourd’hui, puis nous validerons notre thème et enfin, nous établirons les bases d’une feuille de style, c’est-à-dire les CSS. Par la suite, je ferai des tutoriels sur la customisation de votre blog. Je ne sais pas encore si ce sera une suite à cette série ou si ce sera une série à part entière…A voir !!! En tout cas, aujourd’hui, on finit la construction de notre thème (Attention Amine, ce n’est pas encore la fin des tutoriels !! 😀 ;-))

La création du footer est relativement simple. Il va nous falloir créer un nouveau template, le « footer.php », mettre un template tag dans le template Index pour lui dire d’aller chercher les informations dans le footer, puis remplir ce footer avec les informations que l’on veut. Mais tout d’abord, créons notre footer.php. Pour cela, ouvrez votre éditeur de texte favori et enregistrez le fichier en lui donnant l’extension php. A ce fichier, on va lui donner toute une série d’informations, comme le copyright et un lien vers le site de WordPress par exemple. Ici, vous êtes vraiment libres de mettre ce que vous voulez. Je vous propose ici une version qui reprend pas mal ce qui se voit déjà.

Vous allez donc ajouter le code suivant dans le fichier footer.php:

1 2 3 4 5 6 7 8 9 10 
<div id="footer"> <p> Copyright &#169; <?php print(date(Y)); ?> <?php bloginfo('name'); ?> <br /> Blog propulsé par <a href="http://wordpress.org/">WordPress</a> et con&ccedil;u par <a href="http://www.fran6art.com">Fran6art</a> <br /> <a href="feed:<?php bloginfo('rss2_url'); ?>">Articles (RSS)</a> et <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Commentaires (RSS)</a>. <?php echo get_num_queries(); ?> requêtes. <?php timer_stop(1); ?> secondes. </p> </div>

Alors, expliquons un peu tout ça. Tout d’abord, on crée une DIV, que l’on appelle « footer », afin de pouvoir modifier sont style comme on le souhaite dans les CSS. Ensuite, on introduit les informations de copyright. le signe &#169 correspond au sigle du copyright. Ensuite, on appelle l’année en cours et le nom du blog. Sur la ligne suivante (d’où une balise BR), on écrit un petit quelque chose pour dire que le blog est réalisé sous WordPress. Puis, sous une autre ligne, on propose les flux RSS des articles et des commentaires, comme on a pu déjà le voir dans la sidebar. Et puis, à la suite de tout ça, on peut, si on le veut ajouter le nombre de requêtes effectuées en X temps. Cette option est disponible sur beaucoup de thèmes. A vous de voir si vous voulez la garder ou non…

En fonction des thèmes que vous rencontrez, vous pourrez trouver des fonctions inutilisées comme wp_footer qui appelle un fichier WordPress que je n’ai pas trouvé, donc je ne l’ai pas mis. Je ne sais pas si c’est une fonction passée que l’on a gardé ou une fonction à venir. Si quelqu’un a la réponse, il est le bienvenu ! Autre précision, pas mal de thèmes ferment le thème ici, dans le footer, via la fermeture des balises BODY et HTML. En ce qui me concerne, je préfère les fermer dans l’index pour plus de lisibilité.

Enregistrez votre template.

Maintenant, on va aller dans l’index.php pour insérer le template tag qui va nous permettre d’aller chercher les informations que l’on vient d’insérer dans le footer. Pour cela, sous le template tag de la sidebar, insérez le code suivant:

1 
<?php get_footer(); ?>

Enregistrez votre fichier, rafraîchissez votre navigateur, et si tout s’est bien passé, vous devriez voir apparaître le footer sous la sidebar !

Voilà, c’est tout pour aujourd’hui !

Tutoriel n°15, « les sous-templates »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

47 Commentaires

  • Salut fran6 !

    Puisque tu posais la question sur la fonction wp_footer(), je me suis permis de traduire vite fait l’introduction de la partie consacrée aux « Plugin API Hooks » que je reproduis ici :

    « Lorsqu’on développe un thème, il est bon de garder à l’esprit qu’il devrait fonctionner correctement avec n’importe quel plugin que vous (ou un autre utilisateur) décidez d’installer. Les plugins ajoutent des fonctionnalités à WordPress via les Déclencheurs d’Actions » (cf. l’API pour les plugins pour plus d’information).
    La plupart des déclencheurs sont situés au coeur du moteur de WordPress, ce qui veut dire que la plupart du temps votre thème n’a pas besoin de contenir de tags spécifiques pour fonctionner.

    Mais quelques déclencheurs doivent être présent dans votre thème afin que les plugins puissent afficher une information directement dans votre en-tête, pied de page, barre latérale ou dans le corps de la page.
    Voici la liste des marqueurs de modèles qui servent de déclencheurs d’actions que vous devez inclure : wp_footer, etc. »

    http://codex.wordpress.org/The....._API_Hooks

    a++

  • Merci Br1o pour ces précisions ! Je vais donc le rajouter pour plus de « standardisation » ! 😉

  • Bonjour.

    J’ai un soucis avec mon footer.

    Après avoir chargé le thème, il se trouve que le footer de tous mes autres thèmes est déplacé. Il est situé en dessous de la sidebar right.

    Pouvez-vous m’aider ?

  • Peux-tu me faire une copie d’écran de ton fichier style.css ? Ou me l’envoyer via le formulaire de contact ? Tu n’aurais pas mis un float:right par hasard ? Ou oublié clear:both ? Tiens-moi au courant !

    PS: tu peux aussi me tutoyer !!! 😉

  • C’est fait.

    Si tu as besoin d’autre chose n’hésite pas.

    Juste une précision : les thèmes fait par le designer du thème que j’utilise actuellement ne passent pas. D’autres non plus. Ceux par défaut ne posent pas de problèmes et il y en a un, différent des autres, pour qui ça ne pose également aucun problème.

    Est ce que si je vire tous mes thèmes sauf ceux par défaut et que je les retélécharge un par un, sans y inclure celui en création (qui va d’ailleurs être continué en local…) ça marcherait ?

  • Inn > Je viens de t’envoyer un email pour t’expliquer ce que je pense être une partie du problème. Concernant les autres thèmes, normalement, ça ne devrait pas avoir d’incidence, vu qu’ils sont indépendants… Quoi qu’il en soit, le truc que j’ai remarqué et qui ne me plaît pas se retrouve sur les deux thèmes que tu m’as fait parvenir…
    J’attends ton retour par email !

  • Inn

    Porblème résolu, ça doit être un bug, j’ai retiré tous mes thèmes de ma base et je les ai ensuite tous remis sauf celui en création et ça remarche normalement. J’ai installé un wordpress en local et j’y ai inclus tous les thèmes, y compris celui en cours de création et ça ne pose pas de soucis non plus…

    Bref je comprends pas le problème mais en tout cas il est résolu.

  • Merci beaucoup pour ta série d’articles très utiles et très bien faits 😉

    Viens faire un tour sur mon blog lorsque j’aurais fini mon thème 😉

    Sinon sur ton footer.php tu as ajouter une fermeture de DIV en trop je pense…

    Salutations

  • seb

    Euh… le coup du « the_excerpt(); » dans archive.php ne marche pas chez moi,j’ai toujours tout le contenu de mes articles qui apparaisent…

  • seb

    oops me suis planté de tuto … sorry c’est dans celui d’apres,c’est traitre les onglets parfois ^_^

  • Re-Seb, ben je sais pas trop quoi te dire, normalement, ça devrait fonctionner…Revérifies ton template…

  • Mike8

    Salut fran6… Vraiment bon ton tuto… Jusqu’à maintenant j’arrive à peu près à suivre sauf que j’ai un problème au niveau des accents. Il affiche des symboles bizarre et je sais pas quoi faire.
    ex: au lieu de « blog propulsé ….. » j’ai « blog propulsv©… »
    Help me please !!

  • Mike8 > c’est tout simplement un problème d’accent, va voir sur la page web suivante pour modifier la syntaxe de tes mots:
    http://www.designvegetal.com/g.....cents.html

  • Mariette

    Bon finalement je suis en train de tout refaire et je ne comprends pas pourquoi il y’a deux ballises div qui ferment puisqu’on en ouvre qu’une??

  • Thomas

    Salut Fran6, tout d’abord excellent travail : c’est clair, propre et à la portée de tous.
    Je me pose la même question que Mariette : N’y a-t-il pas une fermeture de DIV en trop dans le code ci dessus ?

  • En fait, la deuxième balise ferme la div « page » ouverte précédemment dans le header me semble-t’il…

  • Petite précision, pourrais tu modifier le tuto de manière à y intégrer le wp_footer, car ce dernier sert entre autre aux stats de wordpress (plugin wordpress.com stats), car je me suis fait avoir … 0 visiteurs aujourd’hui 🙁 ce qui n’est pas vrai !!!

    @++

  • Morty

    Hello,
    Quand je suis les indications je n’ai pas de footer qui s’affiche malgré la présence des tag dans les index.php pages.php
    A la base le footer.php ne contenait que le nb de requêtes.

    Par une autre manip j’obtiens un footer mais qui vient couvrir le haut (wrapper) du sidebar.php et non pas se positionner en bas de page et le style ne correspond pas à celui défini (comme si celui-ci n’était pas pris en compte)

    Je comprends pas ce résultat. Le problème pourrait-il venir de la feuille de style (un tag ou le § « #footer » mal positionné ?
    Mon template est mordicus by upstart blogger. 3 col.

  • Thepurist

    Hello Fran6 !
    Excellent tuto !

    C’est une toute petite intervention, juste pour dire à nos amis blogueurs qu’insérer
    « Copyright © » dans vos blogs n’a malheureusement aucune valeur juridique !
    par contre ça découragera peut-être certaines personnes de vous « voler » du contenu.

    c’était ma modeste contribution.

  • « modifier son style » et non « modifier sont style » !
    Sympa la série de tuto mais beaucoup tu reste très vague sur beaucoup de choses. Mais merci quand même 🙂

  • Vav

    Salut Fran6 !

    Il peut être utile d’ajouter : à la fin du footer. C’est utile pour certains plugins comme wp_polls.

    @+

  • Vav

    Ce n’est pas passé dans mon message précédent, la ligne à ajouter est : wp_footer(); entre balises php.

  • Bonsoir!
    c’est encore moi!
    Le test sous IE est parfait pour la police et cufon! merci!
    j’ai un probleme persistant dans mon footer, je n’arrive pas à le customiser!
    je te mets les differents code:
    footer.php

    Copyright ©

    Site cultivé par WordPress et vinifié par MBV.

    css
    /* Footer */

    #footer p{
    text-align: right;
    font-size: 1em;
    font-color:black;
    padding: 0 100px 20px 0;
    }

    j’ai beau changer les valeurs dans le css, rien ne se passe et le texte demeure à gauche et la couleur du texte ne change pas.

    J’ai bien le template tag dans mon index.php mais est-ce que sa place dans le fichier a une importance capitale pour fonctionner?

    Merci de ton aide
    A bientot
    Marjorie

  • Mike

    Bonjour, question bête je pense :
    par rapport au « wp_footer() » : suis-je obligé de le rajouter dans « footer.php », ou puis-je tout simplement le rajouter dans « index.php » comme suit :
    php wp_footer();

    Merci.

  • Mike

    Je repost pour une meilleur compréhension :

    puis je donc me contenter de rajouter « wp_footer() » avant la fermeture de mes balises BODY et HTML ou doit-il figurer dans « footer.php » ?

    Merci.

  • Mike > Mieux vaut le mettre dans le footer, il sera utilisé par des plugins qui vont y coller du code à cet endroit-là, c’est pour ça qu’on le mets dans le footer, pour par exemple les outils de statistiques ! 😉

  • salut…ça fait 3fois que je recommence, alors maintenant, je me tourne vers toi…ma sidebar ne s’affiche pas…et, le footer non plus…par contre , bonne nouvelle qd je déplace mon footer ailleurs dans le template, il apparait..;dc, il éxiste!
    est ce que tu préfères que je t’envoie un fichier pour me filer un coup de pouce?? merci pour ton aide
    ninie.

  • axa

    Salut Francis, après avoir casi planté mon blog en essayant divers tentatives, je me retourne vers toi.
    En consultant tes tutos (qui au passage sont très bien rédigés) malheureusement je n’ai pas trouver d’exemple sur mon cas. J’aimerais avoir un « footer A » pour ma page d’accueil et un « footer B » pour les autres pages du blog: Comment puis-je faire ? Quel fichier dois-je modifier ?
    PS: Je ne suis pas experte en php, alors si c’est compliqué, pourras tu faire un tuto dans un futur proche ? Merci d’avance

  • Julie

    Bonjour!
    Je viens de suivre toute cette série de tuto pour créer mon propre thème jusque là tout aller bien j’ai pu faire bouger mes widgets dans l’admin. Cependant après cette étape j’ai réalisé que mon template s’affiche de la manière suivante : mon titre, mon premier article, ma slidebar, mon footer et enfin mon second article. J’aimerai savoir pourquoi mon second article est passé en dernière position? Merci d’avance

  • Julie

    J’ai réussi à résoudre mon soucis cela venait du fait que j’avais mal placé ce code dans l’index.php et que je l’ava

  • Julie

    J’ai réussi à résoudre mon soucis cela venait du fait que j’avais mal placé ce code  » et «  » « dans l’index.php que j’avais placé avant la div de fermeture du contenu. Est-ce normal que sans css tout mes éléments ce mettre les uns à la suite des autres alors quand t’en normal on devrait avoir une colonne à droite pour la sidebar et le contenu placé à gauche?

  • Nicolas

    Merci beaucoup pour le tuto complet cependant je plussoie pour l’ajout de wp_footer() dans le code proposé car je viens de passer une journée entière a me demander pourquoi j’avais des bugs js et autres (exemple: simple:press), à écumer les forums anglais sans trouver de réponse…

    J’ai donc mis un autre template que le mien et miracle ça fonctionne…

    Et une des différences étant ce fameux wp_footer(), après l’avoir mis dans mon footer.php, plus aucun soucis.

  • Le wp_footer fait partie des « hook » de wordpress, on l’utilise souvent dans les plugins pour rajouter des fonctions dans un thème.
    Les fonctions peuvent se trouver dans le fichier « functions.php » de chaque thème ou dans les différents plugins que l’on utilise.
    Il vaut mieux ne pas l’enlever si on veut utiliser les fonctions et les plugins qui passent par ce « hook » ^^

  • Salut Fran6,
    Cela fait 3 jours que je suis tes cours. Je trouve tes tutos très efficaces ! Merci et bon weekend

  • Craig

    Salut Fran6,

    J’ai un soucis par rapport au footer, j’ai fait exactement comme tu as dit mais la footer ne s’affiche pas … je ne sais pas d’ou peut venir le soucis. SInon merci pour ces tutoriels.

  • Bsr,
    Peux tu au travers de ce php, effacer le texte qui apparait sur ma bannière………ou as tu une solution ?d’avance merci

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <meta http-equiv="Content-Type" content="; charset= » />

    <link rel="alternate" type="application/rss+xml" title=" RSS Feed » href= » » />
    <link rel="alternate" type="application/atom+xml" title=" Atom Feed » href= » » />
    <link rel="pingback" href=" » />
    <link rel="stylesheet" href=" » type= »text/css » media= »screen » />

    var _gaq = _gaq || [];
    _gaq.push([‘_setAccount’, ‘UA-20397483-1’]);
    _gaq.push([‘_trackPageview’]);

    (function() {
    var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
    ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
    })();

    <form method="get" action="/ » id= »search-form »>

  • Tout d’abord merci de nous éclairer face à WordPress.
    Le schéma est classique tu dois t’en douter : Remerciement puis problème.
    Donc moi aussi j’ai un soucis d’affichage du footer.
    Ne serait-ce pas un problème de version de WordPress(3.3pour ma part)?
    En fouillant un peu partout dans l’administration de WP, je me suis aperçu que le plugin NextGen Gallery ne trouvait pas le wp footer(); alors qu’il y est c’est sûr.

    « Missing the call to wp_footer() in your theme, contact the theme author « 

  • Problème résolu, un soucis de CTRL+C CTRL+V.
    Merci

  • Bonjour,

    Besoin d’un petit coup de main

    Je commence a peine a apprendre wordpress et Je souhaiterais que mon footer soit fixe durant le deroulement des pages de mon site et de mes articles.

    Apres avoir chercher je ne trouve pas la solution.
    ou la commande pour le fixer et dans quel fichier L’inclure

    J’utilise le theme melville de wordpress

    Pouvez vous m’aider?

  • britain

    Comment widgetiser le fichier footer.php ???

  • il y a une erreur dans le code de footer.php, il manque la balise de fermeture de page

  • laura

    Darknote,

    je ne vois pas ou il manque la balise de fermeture mais comme j’ai effectivement un soucis avec le footer j’espere que ça vient de là…
    Peux-tu me dire exactement ou l’erreur se trouve car pour le moment seul le texte du footer s’affiche, quand je fais « examiner » le footer en lui même n’existe pas…

  • darknote

    Bonsoir,

    on devrait voir un autre
    qui ferme la balise

    L’auteur indique de la mettre dinas index.php juste avant la balise body
    et on va la refermer dans le template index, juste au-dessus de la balise de fermeture du body, en insérant le code.

Success, your comment is awaiting moderation.