WordPress 2.2 – Modifier les widgets originaux

Logo WordPressLors de la conception du thème « NewBurn » pour ce blog, j’ai été confronté à un sérieux problème de conception. Je voulais qu’il soit « widget ready » MAIS les widgets d’origine (et notamment les widgets « Recherche » et « Pages ») ne me convenaient pas du tout.

« Recherche » car il ne tenait pas compte du fichier « searchform.php » du thème (étonnant d’ailleurs vu que ce n’est pas le comportement original de la sidebar, c’est un truc que je ne m’explique toujours pas au niveau de WP2.2) et « Pages » car il ne permet d’exclure des pages de la liste (celle de « Navigations » dans mon cas) ou de personnaliser la moindre l’affichage du listing.

Après moults recherche sur le forum de WordPress-fr et dans le Codex WordPress ainsi qu’avec l’aide de l’article de CSS4Designr, j’ai trouvé une solution qui ne me convenait guère (solution 1) et qui ne permet d’ajouter des éléments « perso » à la sidebar. C’est finalement dans la documentation de l’API du moteur de widget de WP2.2 que j’ai trouvé la solution que j’ai adopté pour ce thème (solution 2).

Solution 1 – Editer le fichier « wp-include/widget.php« 

C’est une solution radicale et qui sera valable pour tous les thèmes de votre blog. A effectuer avec beaucoup de précaution donc et bien sûr, commencez par sauvegarder le fichier original « wp-include/widget.php ».

Pour l’exemple, nous allons éditer ce fichier afin de faire en sorte que le widget « Recherche » se comporte comme la partie « Recherche » originale de la Sidebar, à savoir en utilisant le « searchform.php » du thème et non un code à part.

Commencer par ouvrir le fichier « wp-include/widget.php » dans votre éditeur préféré et aller à la ligne 369, c’est là que se trouve le code de ce widget.

fonction originale

function wp_widget_search($args) {
    extract($args);
?>
        <?php echo $before_widget; ?>
            <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
            <div>
            <input type="text" name="s" id="s" size="15" /><br />
            <input type="submit" value="<?php echo attribute_escape(__('Search')); ?>" />
            </div>
            </form>
        <?php echo $after_widget; ?>
<?php
}

Nous allons modifier ce code ainsi :

fonction modifiée

function wp_widget_search($args) {
    extract($args);
    echo $before_widget;    include ( TEMPLATEPATH . "/searchform.php" );
    echo $after_widget;
}

Voilà comment on peut ré-définir l’affichage global des widgets originaux de WordPress 2.2. Le seul avantage que je trouve de la méthode est que c’est rapide. Par contre, ce n’est guère propre, cela impactera tous les thèmes que vous pourriez installer/faire par la suite ET surtout, ce sera à recommencer à chaque mise à jour de votre blog… Autant dire que c’est plutôt contraignant et que ça manque vraiment d’élégance !

Solution 2 – re-définir les fonctions pour le thème seulement

La documention de l’API des widgets nous explique qu’un widget peut être défini dans un plug-ins ou dans le fichier « functions.php » d’un thème et qu’il doit finalement être enregistré (registered) avec un nom d’appel à l’aide de la fonction « register_sidebar_widget » (ou supprimer à l’aide d’ »unregister_sidebar_widget« ). Grâce à cette méthode, on peut également ré-définir (ou plutôt remplacer) les fonctions des widgets originaux.

Un plug-ins ne m’arrangeait pas forcément vu que l’organisation de ma sidebar est induite par mon thème, c’est donc tout naturellement que je me suis plutôt intéressé à la méthode consistant à modifier le fichier « functions.php » de mon thème.

Nous allons utiliser cette méthode afin de faire en sorte que le widget « pages » exclu certaines des pages de notre blog de son listing.

Je voulais exclure les liens vers « Archives », « Liens » et « Nuage de tags » afin de de les séparer dans une rubrique à part. Ces pages sont identifiées respectivement par les n°131, 132 et 133.

Le code dans une sidebar classique serait donc :

<?php wp_list_pages('exclude=131,132,133&title_li='); ?>

Je vous renvoie à la page du codex pour détails de la fonction « wp_list_pages« . Nous allons donc définir un widget pour notre thème qui renverra le même affichage. Pour cela ouvrons le fichier « functions.php » situé à la racine de notre thème et ajoutons une fonctions « widget_montheme_pages »

function widget_newburn_pages(){
    wp_list_pages('exclude=131,132,133&title_li=<h2>Et encore...</h2>');
}

Et pour que WordPress en tienne compte en lieu et place du widget « Pages » normal, ajoutons également la condition suivante :

if ( function_exists('register_sidebar_widget') ){
    register_sidebar_widget('pages', 'widget_newburn_pages');
}

Cette dernière va simplement dire à WordPress que le widget « pages » à utiliser n’est pas celui d’origine mais celui que nous venons de définir avec la fonction « widget_newburn_pages« .

Conclusion

On pourrait utiliser la même méthode pour créer un nouveau widget spécialement dédié pour ce thème (et donc non-réutilisable directement pour un autre). Il suffirait de créer une autre fonction « widget_nom-de-mon-widget » et de l’ajouter à la condition en faisant un register_sidebar_widget('Mon Widget', 'widget_nom-de-mon-widget'); et c’est tout !

Voilà, j’espère que ce (long) billet vous aura plu et qu’il pourra peut-être vous aider lorsque vous voudrez modifier simplement et rapidement les widgets originaux de WP2.2 afin qu’ils collent plus à l’esprit du design de votre blog.

Continuez votre lecture

11 commentaires

br1o a dit le 9 juin 2007 à 19:55

Whoa! Excellent, c’est exactement la réponse à la question que je me posais à la fin du billet que tu cites, pour éviter de modifier widget.php. Well done ^_^

RépondreRépondre
burningHat a dit le 10 juin 2007 à 11:45

Yep merci…

C’est bien parce qu’on se posait les deux la même question que je me suis permis de détailler la méthode que tu exposais dans ton article (surtout qu’elle m’a bien aidé à trouver la suite… et à me dépanner dans un 1er temps) et qui également celle proposée un peu partout sur les fora (dont wordpress-fr).

Je suis content et flatté que cet article t’ai plu du coup ! :D

RépondreRépondre
br1o a dit le 12 juin 2007 à 1:09

En ce moment je triture le thème sandbox qui redéfinit quasiment tous les widgets d’origine en leur apportant des petits plus. Je comptais m’en inspirer, mais voilà, quand je dois bidouiller dans des lignes où je ne comprend pas tout, j’hésite. D’autant plus quand je fais un billet : la moindre des choses est de savoir de quoi on parle ;)

Grâce à ton article, je vais revoir tout ça avec un oeil plus avisé.

Merci encore. Du coup, je me dis que je pourrais, si tu es d’accord, faire un edit de mon billet en citant le tien ou alors faire un nouveau billet en expliquant que tu as trouvé la réponse ^_^

Allez, dis-moi oui… :)

RépondreRépondre
burningHat a dit le 12 juin 2007 à 12:47

yep bien sûr, pas de soucis pour l’édition de ton billet ou l’ajout d’un nouveau ! c’est bien ça l’entr’aide sur le net non ??? ;) :D

RépondreRépondre
quiche a dit le 17 juillet 2007 à 12:17

merci pour ce tuto, mais j’ai un petit souci, j’aimerai pouvoir afficher un widget text selon la langue choisie, et je pense que c’est une modification qui se rapproche de la tienne mais je ne trouve pas.
si tu as une idée…. :p

RépondreRépondre
br1o a dit le 15 août 2007 à 17:55

Mieux vaut tard que jamais, j’ai mis mon billet à jour avec ta solution (citation de ton billet et extrait. Dis moi si ça te convient. a++

RépondreRépondre
burningHat a dit le 15 août 2007 à 22:02

C’est absolument parfait ! Merci ! ;)

RépondreRépondre
jery78 a dit le 30 avril 2008 à 10:22

Alors là chapeau, grâce à vous j’ai franchi un niveau de plus sur wordpress.
ça m’a servi pour le widget méta pour n’afficher que les flus RSS.

Merci

RépondreRépondre
burningHat a dit le 30 avril 2008 à 22:50

Yep merci Jery ! Content d’avoir pu vous être utile !

RépondreRépondre
replay a dit le 13 février 2011 à 15:34

J’ai piquée quelques bouts de codes qui devraient bien me servir. un grand merci :)

RépondreRépondre
burninghat a dit le 13 février 2011 à 17:33

Mais c’est fait pour! Je suis content de voir que ce tuto sert encore ;-)

RépondreRépondre

3 trackbacks

» Tutoriel WordPress 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" « css4design : des css pour votre design html - 23 avril 2008 à 16:47

[...] qui est attaché au thème et non au moteur. Voici un extrait de l’article original : WordPress 2.2 – Modifier les widgets originaux que je vous invite à lire sans tarder : Nous allons utiliser cette méthode afin de faire en [...]

WordPress : des archives à la façon de ShaunInman.com « burningHat - 12 août 2008 à 21:51

[...] widget personnalisé, par exemple dans le fichier “functions.php” de votre thème afin de surcharger le [...]

Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" - 18 septembre 2010 à 2:28

[...] qui est attaché au thème et non au moteur. Voici un extrait de l’article original : WordPress 2.2 – Modifier les widgets originaux que je vous invite à lire sans tarder : Nous allons utiliser cette méthode afin de faire en sorte [...]