Francis Chouquet Graphiste Lettering

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

  • Bonjour,
    C’est encore moi. J’ai 2 problèmes avec ma construction de sidebar en suivant ce tuto n°11.
    J’ai bien un point noir :
    * pour la recherche
    * le calendrier
    * les catégories
    * le lien bleu « non classé
    Puis, dessous, un point noir tout seul (?) premier problème
    Ensuite :
    * pages
    puis le lien bleu
    * page d’exemple (mais là, c’est décalé vers la droite et je ne vois pas comment l’aligner…)

  • C’est OK ! A force de tout tripatouiller, c’est résolu.

    Mais c’est parfait que tout ne soit pas pré-mâché : ça oblige à chercher et ça permet de mieux comprendre !!

Success, your comment is awaiting moderation.