Création Thème Wordpress | Tutorial #11: la Sidebar: Calendrier, catégories et pages

Ce tutoriel est le onzième d’une série 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 continuer à “construire” notre sidebar. Après le formulaire de recherche la semaine dernière, cette semaine on va créer un calendrier, les catégories et les pages du blog. Ici, pas grand chose de bien compliqué, on va surtout insérer des templates tags.

1: Insertion du calendrier

Ici, on va insérer le calendrier par défaut de Wordpress dans notre template sidebar.php sous le formulaire de recherche. On va lui donner une ID, que l’on va appeler “calendrier” pour pouvoir le customiser par la suite. On va également lui donner un titre, avec la balise H2. Voici donc le code à insérer pour votre calendrier:

<li id="calendar"><h2>Calendrier</h2>
 
  <?php get_calendar(); ?>
  
  </li>

Ces informations sont toujours insérées dans une ligne de liste (balise LI), comme je vous l’avais expliqué dans le tutoriel précédent. Enregistrez votre template et ouvrez votre navigateur, le calendrier apparaît sous le formulaire de recherche.

2. Insertion des catégories

Ici, on va également ajouter un titre en H2, mais pas d’ID. Je ne vois pas trop l’intérêt mais vous pourrez l’ajouter par la suite si vous souhaitez modifier le style de l’affichage des catégories. Par contre, ici on ajouter une liste dans la liste. En effet, les catégories sont présentées sous forme de liste. Enfin, on va ici introduire un template tag un peu particulier que je vais vous expliquer. Avant tout, ajouter le code suivant, sous le calendrier:

<li><h2>Categories</h2>
 
    <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    </ul>
 
  </li>

On est toujours sur une ligne de la liste de la sidebar, mais on a créé une “sous-liste” pour les catégories. Ici, on va appeler la liste des catégories dans la base de données (wp_list_cats). Mais on va pouvoir la trier selon différents critères:

  1. “sort_column=name” va nous permettre de trier la liste par ordre alphabétique,
  2. “optioncount=1″ va afficher le nombre de billets pour chaque catégorie. Si on avait pris le chiffre 0 à la place de 1, le nombre de billets ne s’afficherait pas.
  3. “hierarchical=0″ ne permet pas l’affichage des sous-catégories. Si vous voulez les voir apparaître, mettez 1 à la place de 0.

3. Insertion des pages du blog

Quand on crée un blog, on a souvent envie de créer d’autres pages statiques. On les retrouve souvent dans un menu de navigation, en haut du blog, comme sur le mien. Ici, histoire de faire simple, on va les mettre dans la sidebar. C’est la manière “classique” de les insérer dans votre blog.

Ici, la “formule” va être un peu différente. La commande PHP qui va permettre aux pages de s’afficher ( wp_list_pages) contient déjà le titre “pages” et est considérée déjà comme une ligne de liste. Donc pas besoin de titre en H2 pour la ligne. Par contre, par défaut, le titre va apparaître en petit caractère. Et nous, on veut qu’il apparaisse en H2. Il va donc nous falloir insérer le titre DANS le template tag. Et oui, comme la ligne est déjà inclue dans le tag, si on mettait le titre en dehors, on aurait deux fois le titre ! Vous saisissez ?

Faisons les choses clairement. Insérez la ligne de code suivante sous les catégories:

<?php wp_list_pages(); ?>

Enregistrez votre template et rafraîchissez votre navigateur. Vous voyez apparaître une nouvelle liste dans votre sidebar, mais le titre est petit. Si maintenant vous ajouter un titre, comme on l’a fait précédemment et que vous le placez au-dessus de la ligne code que l’on vient d’ajouter, vous allez vous retrouver avec 2 titres. Pour résoudre le problème, il va nous falloir ajouter le titre DANS le template tag de la manière suivante:

<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

Ici, on dit ce qu’on voir apparaître comme titre pour la ligne des pages du blog. Enregistrez une nouvelle fois le template, rafraîchissez votre navigateur. Maintenant, notre liste de pages apparaît comme il faut !!

Et c’est tout pour aujourd’hui ! La prochaine fois, on finira la sidebar avec les archives, la blogroll, les informations méta et les flux RSS.

Tutoriel n°12: “la sidebar, suite et fin”

Fran6

34 Commentaires pour “Création Thème Wordpress | Tutorial #11: la Sidebar: Calendrier, catégories et pages”


  1. 1

    Hello,

    Est-ce bien plus compliqué pour disposer des pages / catégories sélectionnables en haut, juste sous le header ? A la manière du thème K2 ?

    Merci d’avance !

  2. 2

    En fait, c’est juste différent. Pour faire un menu de navigation en haut comme dans K2, il te faut déjà faire comme on fait ici. Ce sera ensuite un travail sur la feuille de style. Ici, on travaille sur le thème de base, que l’on va améliorer par la suite. Cependant, cette navigation ne restera pas dans la sidebar si tu veux la mettre dans le header. Il faudra créer une div “navigation” par exemple. On en reparlera plus tard ! ;-)

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

    Hello, juste une derniere question…
    En fait maintenant j’ai un petit blog qui rock :)
    Mais qd je clique sur about: Y’a pas de page derriere…
    Et aussi pourrais tu dire comment il est possible d’ajouter des pages comme about?

  4. 4

    kouikou > regardes vers quoi pointe le lien… Normalement, tu dois avoir une page about qui est une création de page

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

    Bonjour, j’ai un petit problème moi, quand j’affiche mes catégories, j’ai également l’intitulé des mes “catégories” (car ça doit bien en être) de ma blogroll… Alors que je ne voudrais que les catégories dans lesquelles sont publiées mes articles.
    Comment faire ?
    Merci

    http://www.numb3rs.fr
  6. 6

    David > Tu entend quoi par intitulé ? Description ?

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

    J’en profite pour ajouter le commentaire de Marie qui m’est arrivé par email… En fait, elle a répondu directement à l’émail au lieu de cliquer sur le lien pour laisser son commentaire ici ! :D

    En fait, il faut supprimer qqs trucs. Il me semble que si tu ne mets que
    ca…

    Categories

      < ?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0');
      ?>

    …tu ne devrais avoir que tes categories

    Perso ca c’est le code de ma sidebare et j’ai plus les autres liens:

    < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
    ?>

    Categories

      < ?php
      wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

    Archives

      < ?php
      wp_get_archives('type=monthly'); ?>

    < ?php get_calendar(); ?>

    Articles

    < ?php
    wp_list_pages('title_li= '); ?>

    < ?php endif; ?>

    http://www.fran6art.com/
  8. 8

    Pour lister mes catégories, j’ai ça moi :

    http://www.numb3rs.fr
  9. 9

    voila la ligne de code que j’ai et qui me permet d’afficher mes catégories. Mais cette ligne m’affiche aussi mes différentes catégoris de blogroll (blogs bourgogne, blogroll, shop…)
    wp_list_cats(’sort_column=name&optioncount=0&hide_empty=0&hierarchical=1′);
    Je ne comprends pas pourquoi ?

    http://www.numb3rs.fr
  10. 10

    Salut à tous, j’ai une petite question à laquelle je ne trouve pas de réponse…
    Y’a t’il moyen de créer une page sur laquelle se trouverait seulement une liste de toutes les pages… comme dans la sidebar par exemple. Je n’y arrive pas. Faut il créer une nouvelle page nomée XXX.php, mais je ne sais pas quel nom lui donner vu qu’il existe une hierarchie !!!

    Le but est d’avoir une liste des pages (ou se trouve mes albums photos) sur une page special liste photo …..
    Merci d’avance pour votre aide …

    http://www.hegyz.be
  11. 11

    Hegyz > je ne suis pas sûr d’avoir tout compris mais dans le doute je te réponds: en fait, tu peux créer un nouveau template de page, que tu appelles comme tu veux. Et quand tu crées ta page dans l’admin, tu vas chercher ce template, dans la colonne de droite, vers le bas. C’est aussi comme ça qu’on fait pour créer une page pour afficher les tags. On crée un template tags.php, avec son code pour afficher les tags, et avec au départ du template un petit code pour dire à Wordpress qu’on crée un templage de page:

    < ?php /* Template Name: Tag Archive */ ?>

    Ensuite, on crée la page avec ce template. J’espère que ça te sera utile !! ;-)

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

    Hey, merci d’avoir répondu si vite, c’est coooolll, mais y’a un hic !!!
    Donc je crée ma page photo.php. J’y place mon code, jusque là, d’accord! je suppose que je l’exporte sur mon hébergeur…

    Je suis dans mon admin, je fais écrire une page et là CARAMBA !!! je ne comprend plus ,désolé !!!

    “Et quand tu crées ta page dans lâ??admin, tu vas chercher ce template, dans la colonne de droite, vers le bas” euhhh… je vois rien moi dans la colonne de droite à part - Discussion - Etat de la page - Mot de passe - Page mère (mais ce sont les pages que j’ai créés dans l’admin qui sont affichés)- identifiant de la page - auteur et ordre de la page !!! Alors je le cherche où mon template “photo.php” !!!!

    (géné) Merci !!!!!

    http://www.hegyz.be
  13. 13

    Pas de soucis. Je me suis mal expliqué en fait. Si on reprend mon histoire de tags, tu dois avoir le code suivant dans ton template:


    < ?php /* Template Name: Tag Archive */ ?>
    < ?php get_header(); ?>
    //mets ton code ICI !
    < ?php get_sidebar(); ?>
    < ?php get_footer(); ?>

    Tu dois garder la structure complète du thème, avec header, contenu et footer. Et c’est dans le contenu que tu mets ton code. Et penses à modifier les div avec les noms que tu utilises sur ton site

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

    Héhéhéé, je me marre, je viens de comprendre grâce à tes explications, OH grand maître !!!
    Et en combinant avec un article de
    “http://www.css4design.com/blog/index.php/2007/09/04/99-creer-le-logo-et-la-charte-graphique-de-mon-nouveau-blog-en-4-etapes”

    J’ai enfin réussi, basiquement, mais je mettrai en page après, mais ça y est, merci de ton coup de pouce de géant !!!!!!

    A plous, je reste fidèle à ton bloggy …..

    Hegyz

    http://www.hegyz.be
  15. 15

    (timidement) je reviens poser une petite question !!! Mais non, mais non, chui pas casse bonbons !! y’a juste que
    Question: y’a t’il moyen par le css peut-être de retirer le point “.page” qui s’affiche dans ma page photo suite à ce code :

    et puis aussi (je sais je sais chui casse bonbons!!)
    Question: y’a til possibilité de combiner le titre et les pages à exclure ? j’ai essayé avec ceci mais ça marche pas !!
    code :
    A propos de moi exclude=4,7,9′); ?>

    j’ai aussi essayé ça, mais sans succès :

    A propos de moi’ ‘exclude=4,7,9′); ?> les petits quotes en plus !!

    Merci

    http://www.hegyz.be
  16. 16

    Hegyz>Il faut mettre un ‘&’ entre les arguments.
    Sinon, tu devrais commencer par montrer commet “widgétiser” un thème, comme ça, ça simplifie tout le reste. :D

    http://www.alakhnor.com/Post-thumb
  17. 17

    alakhnor > C’est le thème du tutoriel n°13 ;-)

    http://www.fran6art.com/
  18. 18

    Bin j’ai pas tout lu…
    Tu devrais regrouper tes tutoriels par catégories sur une page et faire une page d’index :P

    http://www.alakhnor.com/Post-thumb
  19. 19

    Merci Alakhnor, ça marche super !!!

    A plous !!

    http://www.hegyz.be
  20. 20

    BONJOUR,
    mon futur blog est hébergé sur Amen qui en a procédé à l’installation, après 3 échecs.
    1- J’ai réalisé mon propre thème, il se trouve dans le bon dossier, et malgré tout, il n’apparait pas lorque je veux l’appliquer. Je ne sais pas comment procéder.
    2- quelles sont les définitions et usages des termes page, article, catégorie
    3- dans la page options, ces indications :
    Adresse de WordPress (URI) : www.wordpress.alternate.fr
    Adresse du blog (URI) : www.wordpress.alternate.fr
    Si vous voulez que l’adresse de la page d’accueil de votre weblog soit différente du répertoire où vous avez installé WordPress, entrez cette adresse ici.
    ………. si je modifie l’url du blog en www.textpresso.alternate.fr, je n’ai plus accès à celui-ci
    comment obtenir cette adresse ? ais-je oublié quelque chose ?
    Je vous remercie pour une aide urgente, ça fait trop longtemps que je patine, et à force de visionner les tutoriaux, je finis par ne plus rien y voir

    http://textpresso.alternate.fr
  21. 21

    Bonjour! J’ai fais comme il est écrit dans ce tutoriel (en passant, bien expliqué) pour afficher mon calendrier mais la balise H2 ne s’affiche pas. Le calendrier fonctionne, tout est bien afficher sauf le calendrier, à la place, il fais simplement un espace insécable ( ) Voilà donc la source de mon code, suivi du résultat dans le code source de Firefox.

    Code source:
    […]
    Calendrier

    […]

    Ensuite, sous Firefox:
    […]
     

    March 2008

    […]

    Je voulais savoir si j’étais le seul à avoir ce bug. Sinon, quelqu’un peut me dire où je me suis égaré? Merci d’avance!

    http://www.daviberard.net
  22. 22

    holala… veuillez prendre note que mon URL est mal tapé dans mon dernier commentaire. Ca doit être http://www.davidberard.net , désolé de la maladresse!

    http://www.davidberard.net
  23. 23

    Hello,

    juste pour faire mon chieur sémantique : insérer un dans un n’est pas valide, seul le contraire est possible.

    C’est valable pour “2. Insertion des catégories”.

    En tout cas un grand merci pour ces très bons tutos.

  24. 24

    * un ul dans un li, apparemment le filtre htmlentities est efficace ;-)

  25. 25

    Salut fran6, j’attends avec grande impatiente le mois de septembre pour pouvoir lire les tutos sur le blogdesign.

    En attendant de pouvoir habiller mon blog …

    Existe-t-il un moyen de mettre en relation une seule catégorie avec get_calendar. En fait, je clic sur une date du calendrier et hop la liste des articles qui vont être publiés le jour demandé ??? J’essaie de mettre en place quelque chose qui ressemblerait à un petit agenda.

    nanodemars , le 31 juil 2008 à 18:51
  26. 26

    Salut,
    juste pour signaler que wp_list_cats est déprécié au profit de wp_list_categories:

    http://codex.wordpress.org/Tem.....categories

    http://www.brogol.fr
  27. 27

    Brogol > Je suis justement en train de reprendre les tutos pour les mettre à jour avec la dernière version de WP… ;-) Merci pour la remarque en tout cas, un truc en moins à chercher !! :D

    http://www.fran6art.com
  28. 28

    Cool ça! :)

    Tiens d’ailleurs je me dis que ca pourrait etre intéressant de mettre des liens vers le codex pour qu’on puisse voir les options des templates dont tu parles (comme ça ceux qui veulent bidouiller les arguments le peuvent)

    http://www.brogol.fr
  29. 29

    Brogol > Remarque très intéressante !! Je vais y penser, ça peut être très utile effectivement !

    http://www.fran6art.com
  1. 1 Créez votre thème Wordpress de A à Z ! Pingback on 14 mai, 2007 à 15:38
  2. 2 Créer une page statique comme page d’accueil de votre blog Wordpress Pingback on 8 juin, 2007 à 18:00
  3. 3 » Créer un thème pour son blog wordpress/dotclear || Web-hebergement.fr Pingback on 10 juin, 2007 à 12:43
  4. 4 Créez votre thème Wordpress de A à Z Pingback on 27 sept, 2007 à 13:17
  5. 5 Création Thème Wordpress | Tutorial #10: la Sidebar: le formulaire de recherche Pingback on 12 oct, 2007 à 18:08

Laisser un commentaire