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

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 !! :D ;-))

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:


<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:

<?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”

Fran6

20 Commentaires pour “Création Thème Wordpress | Tutorial #14: Le footer”


  1. 1

    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++

    http://www.css4design.com
  2. 2

    Merci Br1o pour ces précisions ! Je vais donc le rajouter pour plus de “standardisation” ! ;-)

    http://www.fran6art.com/
  3. 3

    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 ?

    http://blog.entouteinnocence.fr
  4. 4

    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 !!! ;-)

    http://www.fran6art.com/
  5. 5

    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 ?

    http://blog.entouteinnocence.fr
  6. 6

    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 !

    http://www.fran6art.com/
  7. 7

    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.

  8. 8

    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

    http://www.tyos.fr
  9. 9

    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…

  10. 10

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

  11. 11

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

    http://www.fran6art.com/
  12. 12

    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 !!

  13. 13

    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

    http://www.fran6art.com/
  14. 14

    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??

    Mariette , le 4 sept 2007 à 17:40
  15. 15

    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 ?

    Thomas , le 26 sept 2007 à 16:41
  16. 16

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

    http://www.fran6art.com/
  17. 17

    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 !!!

    @++

    http://blog.nicospeech.fr
  1. 1 Créez votre thème Wordpress de A à Z ! Pingback on 24 mai, 2007 à 11:05
  2. 2 Créez votre thème Wordpress de A à Z Pingback on 27 sept, 2007 à 13:17
  3. 3 Création Thème Wordpress | Tutorial #13: Widgetisez votre sidebar pour Wordpress 2.2 Pingback on 12 oct, 2007 à 18:42

Laisser un commentaire