Francis Chouquet Lettering + Logo Design

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

0

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:

1 2 3 4 5 
<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:

1 2 3 4 5 6 7 
<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:

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

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

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

52 Commentaires

  • Marc

    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 !

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

  • kouikou

    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?

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

  • 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

  • David > Tu entend quoi par intitulé ? Description ?

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

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

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

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

  • 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 …

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

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

  • 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(); ?>
    < ?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

  • 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

  • (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

  • 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. 😀

  • alakhnor > C’est le thème du tutoriel n°13 😉

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

  • Merci Alakhnor, ça marche super !!!

    A plous !!

  • 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) : http://www.wordpress.alternate.fr
    Adresse du blog (URI) : http://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 http://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

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

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

  • Alex

    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.

  • Alex

    * un ul dans un li, apparemment le filtre htmlentities est efficace 😉

  • nanodemars

    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.

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

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

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

  • 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)

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

  • Tiens, cas curieux:
    ma sidebar s’affiche tout en bas….
    cmt cela se faisse? j’ai beau chercher…

  • Tonio

    Bonjour,
    Je cherche le moyen de présenter dans la barre des menus horizontale mes pages, mes sous-pages, mes sous-sous-pages… sous forme de menu déroulant.

    Du type
    Informatique > Périphériques > Imprimante

    Y a-t-il moyen d’intégrer des sous-menus ?

  • Bonjour 🙂

    Tout d’abord, vous réalisez un magnifique travail dans la clarté de la rédaction de ce tutoriel.

    Je l’ai suivi de A jusqu’à Z. Ne connaissant que les bases de WordPress, j’ai pu, grâce à vous, comprendre la réalisation d’un template.

    Vous faites un bon travail et c’est pourquoi le compteur de visites explose !

    Je ne sais pas si cette espace est approprié pour poser une question technique sur un problème mais si vous pouviez m’apporter une réponse ça m’arrangerait grandement dans mon travail.
    J’ai déjà posté sur le forum de WordPress mais à ce jour, je n’ai pas eu de réponse (08.03.09) : http://www.wordpress-fr.net/su.....-categorie

    Mon problème : je souhaiterais afficher un début textuel avec un lien « lire la suite » sous chaque sous-catégorie.
    Comme dans le modèle situé dans la colonne de droite de ce thème : http://www.revolutiontheme.com/business/

    Dans la logique, une catégorie rassemble plusieurs articles mais dans mon cas, une catégorie et en l’occurrence une sous-catégorie représente mon article.
    Je ne sais pas s’il existe des plugins qui permettent une gestion plus fine de la hiérarchisation (sections, catégories, sous-catégories, articles).

    Et dans un deuxième temps : je m’aperçois que l’usage du template tags wp_list_cats(‘…’) génère des LI. Mais si j’arrive à injecter un début textuel sous ces sous-catégorie, comment puis-je l’identifier ou le classer par rapport aux LI de la catégorie et sous-catégorie ?

    Pour être plus explicite, en reprenant comme modèle d’exemple le site http://www.revolutiontheme.com/business/

    (LI) Company News (catégorie)
    (LI) Meet Our New Employees (sous-catégorie)
    (LI) This is an example of a WordPress page, you could edit this to put information…
    Read more (article)

    J’espère avoir été assez clair, merci pour votre aide et bonne continuation 🙂

  • jennifer

    Bonjour !

    Je lis avec tout attention vos tutos, vraiment merci, ça me permet de bien avancer (et encore je ne fais que de la customisation d’un thème existant déjà, mais vu que je suis débutante la tache est un peu rude xD). J’avais quelques questions, si vous auriez un peu de temps pour me répondre ce serait super :).
    J’aimerai ranger ma liste de page dans l’ordre que je veux, comment je peux m’y prendre ? De plus je souhaiterai que le terme « pages » disparaissent (en posant ces deux questions, je me dis qu’il me faudrait certainement un autre code que celui que vous avez proposé ^^).

    De plus, une autre petite chose, mais il peut-être que vous y avez répondu dans les tutos suivants, je ne les ai pas encore lus, comment fait-on pour faire disparaître une puce devant un lien ? J’ai mis les liens rss dans le footer.php, avec les balises et il m’affiche un petit rond devant dont j’aimerai me débarrasser.

    Voilà, si vous pouviez m’apporter un peu d’aide, ce serait vraiment sympa !

    Bonne journée !

  • sakura

    salut,

    j’ai une question:

    comment afficher que le dernier article d’une catégorie de façon dynamique sans afficher tous les autre article

    merci

  • carlo

    Bonjour Fran6 !

    Tout d’abord un grand merci pour tout ces tutoriels. Mes recherches sur le css et le webdesign me faisaient passer par ton site mais là je ne le quitte plus depuis 2 jours, et pour cause : j’ai décidé d’arrêter le bidouillage en créant des templates à partir de thèmes existant, et donc, de suite ton tuto. Il est vraiment génial, mais je me pose la même question que ‘Marc’ (tout en haut, le 20 mai 2007 à 10:00) :

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

    Tu lui a répondu que l’on verra ça plus tard mais je n’ai pas trouvé de trace de réponse, ai-je mal cherché ? Mon problème est que j’aimerai adopter WordPress pour développer les sites administrables de clients et j’ai besoin de savoir 3 choses :
    1- comment passer le menu « pages » dans le header pour en faire ma navigation principale.
    2- comment créer une deuxième sidebar pour en avoir une à gauche et une à droite ? (j’ai bêtement créé un fichier sidebar2.php que j’ai appelé via un deuxième tag, mais ça me met une ‘fatal error’ dans le code).
    3- une fois posées mes rubriques principales en vertical dans le menu du header, j’aimerai que les sous-rubriques s’affichent dans un « menu de gauche ». Et donc un menu de gauche diffèrent par rubriques.

    Le thème multi-color associé au widget « Sub Page Menu » m’a permis d’avoir ce genre de rendu mais je voulais un site très propre en démarrant de zéro. De plus j’ai automatiquement les sous-pages qui apparaissent dans un menu déroulant, alors que j’aimerai qu’elles soient uniquement présentent dans le menu de gauche… Aurais-tu un conseil ou un bon lien pour moi ? 🙂

  • Sad

    Salut Fran6

    ça fait une semaine que je suis sur ton blog à créer mon thème wordpress grâce à ton super tuto ! 🙂

    J’ai terminé ton tuto et j’en suis à la partie CSS tous se passe bien mais j’ai un souci et j’arrive pas à trouver le truc il manque un balise quelque part, je m’explique :

    En fait j’ai l’impression qu’il manque une div « content » en effet quand je nomme une catégorie (illustration par ex) dans ma liste Catégorie, je clique pour la tester dans mon navigateur, une nouvelle page s’ouvre avec tout mes post correspondant à la catégorie (illustration). Mais cette page s’affiche sans la balise « content » du coup je perd ma mise en page qui est centré…

    J’ai fait et refait ttes les étapes de ton tuto mais impossible de trouver la solution !
    Est ce qu’il manque effectivement une div « content » et si c’est le cas ou la placer ?
    Ou alors est ce qu’il faut créer une page category.php ???

    Après moult recherche, je ss toujours dans le rouleau !

    Merci beaucoup beaucoup 🙂

  • Uwe

    Bonjour,

    Je me permets de t’écrire car je cherche à faire un widget catégorie pour disposer mes catégories de la manière détaillée ci-dessous en utilisant les possibilités du menu personnalisé (par « bloc » comprenant catégorie mère et catégorie enfant) :

    – catégorie parent (représentée uniquement par une jpeg et pas par du texte)
    – catégorie enfant
    – catégorie enfant
    – ….

    Etant un débutant en programmation/code, je te remercie par avance de toute aide que tu pourras m’apporter.

    Cordialement,

    Uwe

  • Tita

    Bonjour Francis !

    J’arrive un peu comme un cheveu sur la soupe dans les commentaires de votre SUPER blog !! Nous sommes en 2013, alors que vous avez rédigé ces articles de tutoriel en 2007. Que le temps passe vite, me direz-vous ! Et que dire du temps passé à essayer de comprendre le fonctionnement ‘intégré’ de HTML, CSS et PHP quand on essaie de se dépatouiller en autodidacte !!!
    Tout ça pour vous dire que j’ai – grâce à votre tutoriel très progressif (c’est idéal pour les débutant(e)s comme moi) – ENFIN compris !!! En 2 jours, à mes quelques heures ‘perdues’, j’ai réussi à arriver jusqu’ici ! et très sincèrement, je me réjouis déjà de la suite.

    DONC, en grand et en couleur :

    MERCI !!!!!

    Tita

  • Salut programmeurs en herbe – et même ceux en fleur ; )

    un petit mot pour vous prévenir que la fonction décrite dans cette partie du tutoriel pour afficher la liste des catégorie : wp_list_cats() est dépréciée / obsolète !
    Cela signifie qu’elle peut être retirée du code source de WordPress d’ici une prochaine version. Sa remplaçante (qui s’utilise exactement de la même manière, est la suivante : wp_list_categories()

    Rien de grave en soit, c’est juste pour éviter que, suite à une mise à jour, vos Sidebars n’affichent plus vos catégories.

    Vu l’âge du tutoriel (il n’en est pas moins excellent), pensez à aller vérifier que ce n’est pas le cas d’autres fonctions ici : http://codex.wordpress.org/Main_Page
    En tappant le nom de la fonction dans la barre de recherche de la doc en ligne, le premier résultat doit être ldoc de la fonction. Vous pourrez y voir si la fonction est obsolète et, si oui, il vous sera indiqué sa remplaçante.

    sur ce… bon code !

  • Youness

    Merci 🙂

Success, your comment is awaiting moderation.