Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #12: la Sidebar: suite et fin

0

Ce tutoriel est le douziè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, je vous conseille fortement de commencer par le premier tutoriel de la série.

Aujourd’hui, on va terminer notre sidebar en y ajoutant les éléments suivants:

  • Les archives,
  • la blogroll,
  • les données Méta,
  • les liens vers les flux RSS (articles et commentaires)

Ces ajouts vont être relativement simples puisqu’il ne va s’agir que d’ajouter des template tags aux bons endroits.

1. Les Archives

Commençons par les archives. Généralement, celles-ci sont proposées mensuellement. Vous pouvez donc aller voir tous les articles, « triés » par mois. Pour afficher ces archives, on va ajouter le code suivant, sous la liste des pages, toujours dans notre template sidebar.php. Cette insertion se fait de la même manière que pour les catégories, vu dans le tutoriel précédent.

1 2 3 4 5 6 7 
<li><h2>Archives</h2>   <ul> <?php wp_get_archives('type=monthly'); ?>   </ul> </li>

On a créé une nouvelle ligne pour la liste de notre sidebar, mais on a également créé une nouvelle liste à l’intérieur de la première pour pouvoir faire apparaître les différents mois d’archives sous forme de liste. Ici, on appelle la fonction « wp_get_archives », que l’on va afficher par mois, d’où le « type=monthly ». Enregistrez votre fichier et rafraîchissez votre navigateur. Les archives apparaîssent maintenant sous les différentes pages du blog.

2. La blogroll

On va maintenant afficher la fameuse « blogroll » du blog. La blogroll, c’est une sorte de liste de sites que vous visitez ou que vous aimez bien. C’est un peu vos amis ! 😉 Pour intégrer cette blogroll, rien de plus simple, il vous faut ajouter la ligne de code suivante sous les archives:

1 
<?php get_links_list(); ?>

Ici, pas besoin de créer une ligne ou une « sous-liste », tout est déjà prévu par WordPress. Appeler la fonction « get_links_list » va automatiquement créer une liste, puisque c’est une liste qu’on appelle…Enregistrez votre fichier et rafraîchissez votre navigateur. La blogroll apparaît maintenant sous les archives.

3. Les infos Méta et les liens de validation

Les infos « Méta », c’est ce qui va vous permettre de vous « logger » à votre blog directement à partir de la homepage. C’est également là que vous pourrez vous « délogger ». Je n’ai encore jamais utilisé ces liens, mais bon, c’est dans le standard, et peut-être que certains d’entre vous les utilisent !! Avec ces infos « méta », on va ajouter les différents liens pour la validation de votre page web au niveau du XHTML. On va également y inclure un lien vers WordPress et son homologue francophone. Je vous rassure, vous n’êtes pas obligé de tout mettre !! 😀 Voici donc le code à insérer:

1 2 3 4 5 6 7 8 9 10 11 12 13 
<li><h2>Infos Meta</h2>   <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML valide</abbr></a></li> <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> <li><a href="http://wordpress-fr.net/" title="Communauté française de WordPress et WPmu.">WordPress Francophone</a></li> <?php wp_meta(); ?>   </ul> </li>

On a créé un titre pour nos infos « Méta », puis on a créé une « sous-liste » pour nos différentes infos. Sur la première ligne, on appelle la fonction « wp_register » qui permet de se connecter au blog via sa homepage (pas de ligne de liste ici, elle est automatiquement généré par le template tag. En dessous, on appelle la fonction « wp_loginout » qui permet de se déconnecter le cas échéant. Ensuite, on a les différents liens dont je vous ai parlé plus haut et enfin la fonction « wp_meta », qui n’est pas utilisé mais qui doit être présente dans le template.

Enregistrez votre fichier et rafraîchissez votre navigateur. Les infos Méta apparaîssent maintenant sous la blogroll.

4. Les flux RSS

On va terminer notre sidebar avec les flux RSS. On va insérer ici le lien vers le flux RSS des billets, mais aussi celui vers les commentaires du blog. Insérez donc ces quelques lignes de code sous celles des infos Méta:

1 2 3 4 5 6 7 8 9 
<li><h2>Abonnez-vous au blog !</h2>   <ul>   <li><a href="<?php bloginfo('rss2_url'); ?>" title="Flux RSS des articles">Flux RSS des articles</a></li> <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="Flux RSS des commentaires">Flux RSS des commentaires</a></li>   </ul> </li>

On crée un titre pour notre ligne de la liste de la sidebar. Ici, j’ai mis « abonnez-vous au blog! », mais vous pouvez très bien mettre ce que vous souhaitez ! 😉 On crée une nouvelle « sous-liste » ici. Sur la première ligne, on va appeler le flux RSS des billets (« bloginfo(‘rss2_url’)) et sur la deuxième ligne, les commentaires en flux RSS (bloginfo(‘comments_rss2_url’)).

Enregistrez votre fichier et rafraîchissez votre navigateur. Les liens vers les flux RSS apparaîssent maintenant sous les infos Meta

Notre sidebar est à présent terminée !! Demain, je vous expliquerai comment « widgetiser » votre sidebar pour que votre thème soit utilisable avec la denière version de WordPress !

Tutoriel n°13: « widgetisez votre sidebar ! »

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

50 Commentaires

  • Graf1ck

    Hey Fran6 je cherche mais je trouve pas quel template tags ajouter a ma side bar pour ajouter les dernier commentaires merci et bonne continuation pour tes tuto

  • C’est peut-être parce que c’est un plugin ! 😉

    http://meidell.dk/archives/cat.....-comments/

  • Graf1ck

    Merci je regarderait en rentrant car la je suis au lycée
    Ps: fran6art.com sur IE 6 c’est vraiment laid…Lol

  • Qu’est-ce qui est vraiment laid ??

  • graf1ck

    bah en faite tout les image transparente elle sont crise et tout le bas du blog (ou il y a tes lien pi tout pi tout )bah elle déconne je te ferait un imprim écran si sa te perturbe d’avoir un site qui passe pas sur IE6 …
    (pour rerentré dans le thème du post) A quand le prochain tuto ?

  • Bonjour Fran6 !
    Merci beaucoup pour le tuto très bien fait, que je suis à la lettre ! J’aimerai savoir comment ajouter une deuxième sidebar à droite de celle ci (comme il y a sur ton blog en fait.)
    Merci !

  • Noemi > Tu trouveras tout ici: http://www.fran6art.com/2007/0.....e-sidebar/

  • Thomas

    Salut fran6
    Je sais que tu es très occupé pour l’instant, mais j’aimerais savoir comment afficher les derniers articles dans ma sidebar ???
    Merci d’avance et bon boulot 😉

  • Thomas > il faut mettre ton flux RSS dans la sidebar avec ce genre de tag : < ?php bloginfo('rss2_url'); ?>

  • Thomas

    Merci Fran6 je vais tester ça tout à l’heure.
    Bon boulot à toi 😉

  • Thomas

    Fran6, j’ai placé le code que tu m’as donné ci-dessus mais je n’obtiens qu’un lien vers le flux rss de mes articles, or je voudrais que s’affiche uniquement les titres de mes derniers articles dans ma sidebar.

    Je me suis peut-être mal exprimé, ou je n’ai pas fait correctement quelque chose ….

    Merci d’avance

  • Pas de soucis Thomas ! 😉 Tu utilises les widgets ou la sidebar version standard ?

  • Thomas

    La version standard

  • Utilises ce genre de plugin:

    http://rmarsh.com/plugins/recent-posts/

    C’est la solution la plus simple je pense… 😉

  • Thomas

    Merci pour le plugin 😉
    En faisant une recherche j’ai aussi trouvé ce code :

    Je pense que ça peut marcher aussi non ?

  • Thomas

    Oupss sorry lol
    voici le code :

  • Thomas

    …. sniff

  • Pas de soucis, envoies moi le via le formulaire de contact. Mais je pense que le plugin sera ce qu’il y a de plus simple à gérer.

  • Salut Fran6,

    je suit ton blog depuis un mois environ, et j’en suis très satisfait, de ce que je trouve dessus. Pour mon prochain site qui sort dans 21 jours, j’ai cherché pas mal de thèmes, mais bon, je n’arrive pas à trouvais ce que je cherche.

    Je me lance donc dans mon premier thème ou suivra mes améliorations au fil du temps, comme pour une deuxieme slidebar ou des slidebar widgetisable.

    Néanmoins, cette slidebar pose problème. Autant le formulaire de recherche se place dessus, autant le flux RSS n’apparait pas. Par ailleurs, sans rien faire, j’ai déjà Méta, Archives, Blogolistes, Pages et catégories. Pourquoi ? et pourquoi je ne peux pas rajouté autres choses?

    Le thème est réalisé sous WP2.3.3, le site lui sur WP 2.5, cela ne changera pas grand chose de toute façon.

    Merci de ton aide !

  • C’est bon, j’ai corrigé mon problème 😀

  • Coregamer80

    Salut, dans ton tuto tu n’as pas parler des codes pour avoir les derniers articles et les derniers commentaires, or j’en ai besoin car je souhaite les placer dans une autre sidebar que j’aurais créé, et je ne pense pas que cette dernière sera widgetable pour me facilité la tâche et aussi pour imposer une certaine « rigueur » a mon thème.

    De plus, est ce que un thème widgetable de base peut être désactivé du panneaux de controle des widget pour qu’il ne puisse plus étre activé ??

  • Bonjour, est il possible de changer le contenu de la sidebarre entre l’index.php et le single.php?
    Merci d’avance

  • UP … Dsl mais c’est important pour moi…

  • theau87 > Oui, il faut que tu crées un template pour la sidebar de tes articles, du style sidebarsingle.php et tu y mets ton contenu. Ensuite, tu l’appelles via ce type de requête:

    php include(TEMPLATEPATH . ‘/sidebarsingle.php’);

    bon courage ! 😉

  • Salut Fran6,

    J’ai une question concernant la « blogroll ». Disons que je suis un peu chipoteur, et que j’ai tendance à considérer (à tort ou a raison, tu me le diras) qu’au niveau référencement, le titre de mon article (h2) est plus important que les sections blogroll, que tu as choisi de mettre en h2.

    J’ai donc fait les modifications nécessaires pour les passer en h3, mais l’élément « blogroll » coince, il est vérouillé par la ligne de code en H2.

    Connaitrais-tu par hasard un moyen, qui, sans toucher au core, et sans développer un plugin de st_replace, permette de passer ce titre en h2.

    Du reste, encore merci !

  • Bastien > il existe peut-être un plugin pour ça, je ne sais pas trop… Mais ta question soulève un point intéressant: y a-t-il encore une différence au niveau du référencement pour ce qui est du niveau des titres ?? Je pense que oui mais je ne crois pas que ce soit déterminant, ou tout du moins que ça vienne donner moins de valeur à ton titre car il est d’autres possibilités de « se faire remarquer » ! 😉

  • @Fran6 : mer6 ;-), je creuse et je reviens si je trouve !

  • Jeff

    Salut je suis en train de faire tout ton tuto qui est vraiment super!!!
    Je tien juste avoir ton aide pour un point qui m’intrigue! J’ai suivis se que tu as fait pour sidebar ainsi que pour l’affichage des information de l’article. Et là je constate un différence entre FF et IE7. La différence est que dans les infos meta et dans les infos de l’article il n’apparais pas edit et admin du site!!!
    Vois-tu une raison ou pas???

    Merci par avance de ta réponse!!

  • Francis,

    Merci beaucoup pour les tutoriels. Aussi, grosse suggestion:laisser des imprim écrans régulières et l’ensemble des lignes récapitulatives pour chaque templates svp. Il ne manque que cela et un peu plus de détails sur où placer chaque ligne de code très précisément.
    merci encore,
    bien cordialement

  • dyspho

    Salut fran6 et merci pour ce supertuto que je suis assidument depuis quelques heures maintenant ( formation accéléré 🙂 )

    J’ai une erreur avec le widget des meta….quand je test mon blog voila ce que j’ai comme message en hautde la page :  » Warning: array_merge() [function.array-merge]: Argument #2 is not an array in blog\wp-includes\widgets.php on line 53  »

    et voil a ce qu’il y a a la ligne 53 de widgets.php :
     » $sidebar = array_merge($defaults, $args);  »

    ma version de wordpress n’est peut etre pas la bonne ? pourtant je suis sur la 2.3.1., il ne devrais donc pas y avoir de probleme….

    si peu m’aiguiller c’est simpas, sinon c’est pas grave !

    merci en tout cas !

  • dyspho

    J’ai testé avec la V 2.5 et ca me fait pareil, pas moyen de poster un commentaire ou de me re-loger si je me suis déconecter, ca plante encore avec la meme erreur.

    Bon j’ai trouvé une parade, j’ai utilisé les fichiers de ton themes une fois finit et je n’ai pas cet erreur…ca devais surement venir de moi mais j’ai comparé les fichiers, il n’y a pas une énorme difference alors je ne voi pas d’ou ca vient… C’est pas grave.

    J’ai une autre question !

    Là j’ai presque finit de personaliser mon theme mais j’avais oublié d’ajouter le blogroll
    Quand je l’ajoute ca me met automatiquement un  » blogoliste  » en gros au dessus de ma liste de liens….
    POurquoi ?
    Dans quel fichier de wordpress il faut aller virer ca ?

    Merci !

  • dyspho > blogoliste c’est le nom pour la blogroll mais en en français. Tu l’as ajouté via du code ou via un widget ?

    Pour ce qui des erreurs dans ton code, parfois rien qu’un espace en trop peut tout foutre en l’air… Le code est bon mais il y a juste un espace de trop !! 😉

  • dyspho

    je l’ai ajouté via le code….
    Au final j’ai préféré partir d’un thème existant qui sapprochais déja de ce que je voulais plus ou moins, mais ce theme de base n’est pas widgetisable apparament ( enfin il l’est surement ! mais……moi je ne le suis pas lol j’ai tout de même essayé )

    jai un peu chercher dans les differents fichiers du blog mais je nai pas trouvé l’endroit ou on pouvais enlever ce mot…..

  • Bonjour Francis,
    Superbe ton tuto.
    Un problème toutefois, j ai du rater quelque chose, mais quoi?
    J ai créer les « infos meta » dans la sidebar tout comme tu nous l expliques mais drame et désespoir le lien « inscription » disparait sur mon blog en ligne alors qu’en local (j ai fait un copier-coller) avec le même code il apparait !!!!
    Y-a-t-il un autre fichier qui intervient dans cette histoire? j ai cru comprendre que non; j ai refait le tuto de la sidebar et je ne vois toujours pas mon erreur
    Merci pour tout

  • mamadiver > As-tu activé l’option dans les réglages de ton blog ?

  • Francis, je n ai qu un mot, merci.
    A force de regarder le code je ne voyais plus l’évident.
    Bien sûr j ai voulu aller trop vite, trop contente de moi, mais à présent tout fonctionne.
    Merci encore

  • jordi

    Bonjour Francis,
    Superbe ton tutoriel!!! Toutefois j’ai une question concernant la sidebar.php. J’aimerais pouvoir changer les titres (archives, categories, blogroll, etc) en images. Comment devrais-je m’y prendre? Merci beaucoup!!!

  • Clem

    Bonjour !

    J’aurais voulu savoir comment faire une page « Archive » avec le calendrier et la recherche, et une page « Liens » avec le blogroll.

    Voilà, merci d’avance pour la réponse.

  • MaDmat

    Salut Francis ,

    Avant tout merci pour ton tuto !!!

    En allant jeter un oeil dans le codex pour voir ce que me proposait get_links_list(), il est signalé que ce template tag est désormais obsolète et qu’il est/sera remplacé par wp_list_bookmarks() .

    get_links_list() fonctionne toujours mais autant prendre de bonnes habitudes dès le départ.

    En parlant de bonnes habitudes pour tous ceux qui débutent comme moi avec WP (ou pas d’ailleurs) je pense que lire le codex (quand on en a le temps ) en fait aussi partie 🙂

    Merci encore

    @jordi (si c’est pas trop tard mais ça pourra servir à d’autres) : Allez voir dans le codex justement. Par exemple pour wp_list_bookmarks() il y a des explications et des exemples qui montrent comment changer les titres en images (entres autres).

  • Mina

    Bonjour et merci pour ton tuto!
    Jusqu’aux « sous templates » tout allait bien mais là ça coince.
    Je n’arrive pas à faire apparaître qu’une partie de mes articles.
    Voilà mon index si ça peut t’aider, peut-être qu’une erreur s’y est glissée?
    D’avance merci,

    mina

  • Bonjour à tous, et merci pour ce tutoriel clair et intéressant.

    J’ai un problème avec le tempate sidebar.php : rien ne s’affiche. Aucune des listes ne se met dans le navigateur quand j’upload le tout sur mon site, aucune problème avec les autres templates.

    ESt-e que vous auriez une solution ? J’ai vérifié tout est bien noté comme dans le tuto sur le sidebar.. Peut être que je peux vous copier mes lignes de code que j’ai ? Peut être que quelqu’un peut m’envoyer des bons templates que j’essaie avec voir si ca marche, je ne sais pas. En gros j’ai mes balises a la suite avec tout ce qu’il faut dedans, tout ça commencant par le et finissant par le

    Merci d’avance , bonne continuation

    Fa#b

  • Merci pour cette série de tutoriels !

    Il faudrait juste faire quelques modifs pour s’adapter aux dernières versions de WordPress.
    Ici pour la sidebar, certaines appellations sont maintenant « dépréciées ».
    Pour WordPress 3.3, voici les erreurs que je rencontre.

    Pour appeler la liste de catégories :
    à la place de wp_list_cats() mettre wp_list_categories()

    Pour le blogroll :
    à la place de get_links_list() mettre wp_list_bookmarks()

Success, your comment is awaiting moderation.