Créer un thème WordPress intégralement N°5 : la sidebar

En espérant ne pas avoir perdu de lecteurs en cours de route, nous allons ici aborder la sidebar ou barre latérale. Pour les voir les 4 premières parties de notre guide création de thème wordpress, c’est par ici :

Principes de bases de la sidebar

Elle a de multiples intérêts : ergonomie (facilite la navigation interne de votre site), référencement, revenus publicitaires, partage via les réseaux sociaux… Elle doit donc être affinée après sa mise en place pour tirer un maximum de bénéfices de ces fonctions. Entrons dans le vif du sujet : comme d’habitude, créez votre fichier sidebar.php.

Création de la barre latérale pour WordPress

Voici une ébauche de code php que vous allez coller dans votre fichier. Pour pouvoir le personnaliser par la suite, nous allons expliquer les fonctions de chaque balise.

  • ul : cela impose la forme de liste. En effet dans une colonne latérale les éléments s’affichent en colonne.
  • li : concerne le titre de la liste (catégorie, articles récents…) Dans notre exemple, la balise li joue un rôle pour le référencement de votre site : remarquez-vous la présence des balises h2? Elles indiquent aux robots des moteurs de recherche quels sont les mots-clés qui définissent le site. Vous pouvez modifier h2 en h3 si vous voulez donner moins d’importance à ces termes.
  • div : nous l’avons déjà utilisée dans les fichiers précédents et puisque vos notions sont désormais suffisantes, nous allons pouvoir vous expliquer leur intérêt! Les div sont un « cadre » imaginaire : lorsqu’on utilisera la feuille de style et qu’on indiquera la police de cette div, celle-ci sera attribuée à tout le texte inclu dans la div. Ainsi vous pouvez personnaliser chaque élément de votre site.

Intégration des widgets WordPress dans votre sidebar

Pour que la colonne latérale fonctionne, elle doit appeler function.php. Dans ce fichier nous allons indiquer la fonction widget selon l’image ci-dessous.

Grâce à ces quelques simples manipulations, votre thème supporte les réglages de widgets directement depuis l’interface de WordPress : très pratique!

Utilisations des Widgets de WordPress

C’est tout simple : cliquez sur « Apparence », « Widgets » et choisissez par exemple « calendrier » : glissez le dans la colonne latérale qui est affichée à droite. Sauvegardez si demandé et le calendrier apparaît dans votre sidebar.

Très bientôt nous aborderons le footer qui est le dernier élément que nous proposons dans ce tutoriel. Ensuite nous apprendrons à customiser l’apparence de votre style grâce à la feuille de style et le langage css : lorsque vous aurez compris cela vous pourrez maîtrisez tout fichier similaire et donc intervenir sur les thèmes gratuits proposés sur WordPress!

Catégorie: Création de sites web, Spécial débutants
6 février 2012
O2switch Hébergement web