Magazine Blog

WordPress : comment widgetiser un thème

Publié le 21 janvier 2010 par Maccimum

Depuis la sortie de la version 2.2 de Wordpress, la quasi totalité des thèmes sont widget ready, ce qui signifie que vous pouvez ajouter des gadgets à votre blog directement depuis l’interface d’administration, et donc sans avoir à mettre les mains dans le code. Pour rappel, cette fonctionnalité permet d’organiser facilement la sidebar de votre thème (ou le footer) grâce à un système de glisser-déposer très astucieux. Toutefois, si vous souhaitez créer votre propre thème — ou personnaliser un thème qui n’est pas widget ready — vous devrez effectuer quelques manipulations fort simples pour rendre vos sidebars et vos footers « widgetisables ». Cet article vous explique la marche à suivre.

Widgetiser un thème WordPress

Pour widgetiser un thème WordPress, il convient de procéder en deux étapes :

1. Création du template functions.php

Situé dans le répertoire de votre thème, le fichier functions.php permet d’ajouter différentes options et paramètres à votre thème. Puisqu’il n’est pas obligatoire, il se peut que vous deviez en créer un, avant de poursuivre. Si votre thème en possède déjà un, ouvrez-le puis copiez-collez le code ci-dessous dans le fichier.

<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>

Si vous avez plus d’une colonne dans votre sidebar, précisez le nombre de colonnes dans le code. Par exemple, si vous avez deux colonnes, vous devez avoir le code suivant:

<?php if ( function_exists('register_sidebar') ) register_sidebar(2); ?>

Pour améliorer la mise en page de votre sidebar, utilisez le code ci-dessous :

<?php
   if ( function_exists('register_sidebar') )
   register_sidebar(array(
   'name' =&gt; 'sidebar 1',
   'before_widget' =&gt; '',
   'after_widget' =&gt; '',
   'before_title' =&gt; '

', 'after_title' =&gt; '

'
, )); ?>

Sous le nom de la sidebar (ici sidebar 1) s’affiche la structure du widget. En utilisant les sélecteurs de classes (.widget et .widgettitle) il est possible de personnaliser la présentation de votre sidebar grâce à la feuille de style. Bien évidemment, vous pouvez modifier les noms de ces classes et d’adapter la structure de vos widgets en fonction de vos besoins.

  • ‘before_widget’ et ‘after_widget’ : permettent d’encadrer votre sidebar d’une balise div pour la styliser ;
  • ‘before_title’ et ‘after_title’ : permettent d’appliquer un style aux différents intitulés de vos widgets (archives, catégories, articles récents, articles populaires…).

Vous avez également la possibilité de créer plusieurs sidebars. Par exemple pour en créer deux, dupliquez le premier code et modifiez le nom de la deuxième sidebar.

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'name' =&gt; 'sidebar 1',
 'before_widget' =&gt; '',
 'after_widget' =&gt; '',
 'before_title' =&gt; '

', 'after_title' =&gt; '

'
, )); if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' =&gt; 'sidebar 2', 'before_widget' =&gt; '', 'after_widget' =&gt; '', 'before_title' =&gt; '

', 'after_title' =&gt; '

'
, )); ?>

Sauvegardez votre fichier, puis rendez-vous sur le panneau d’administration, à la section Widgets (Apparence > Widgets). Là vous devriez voir apparaître votre nouvelle sidebar. Mais avant d’y ajouter les widgets de votre choix, vous devrez effectuer une dernière manipulation, tout aussi simple.

2. Modifications du modèle sidebar.php

Nous allons donc ajouter quelques lignes de code dans le fichier de modèle sidebar.php pour permettre aux widgets de s’afficher correctement. La plupart des thèmes possèdent un div nommé « sidebar » (<div id= »sidebar »>). Placez le code suivant à l’intérieur de ce div :

<ul><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?&gt;
ICI CONTENU DE LA SIDEBAR
<?php endif; ?> </ul>

Enregistrez votre fichier sidebar.php. Votre thème est maintenant prêt à prendre en charge les widgets WordPress. Pour les activer, rendez-vous dans l’administration de votre blog et sélectionnez ceux de votre choix ; ils sont disponibles dans la partie gauche de la page Widgets (Apparence > Widgets).

Sidebar widget ready

En ajoutant vos propres Widgets, vous remplacez tout ceux qui y étaient auparavant et qui n’étaient autres que les widgets par défaut prévus par le créateur du thème. Pour les retrouver, il suffit de les désactiver à nouveau en les retirant de(s) colonne(s) latérale(s) située(s) sur la partie droite de la page Widgets (Apparence > Widgets).

Retour à La Une de Logo Paperblog

A propos de l’auteur


Maccimum 4 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte