Article en plusieurs parties : 1 2 3
Widgets Area Ready ou comment gérer plusieurs « barres latérales » avec les Widgets
Certains thèmes sont prévus pour fonctionner avec deux « barres latérales », bien que ce terme est réducteur puisqu’il s’agit simplement d’une zone que l’on peut placer n’importe où avec les CSS du moment que la structure du code HTML le permet… C’est pourquoi je préfère parler de Widgets Area Ready ou WAR pour les intimes :)
Pour mettre en place plusieurs WAR, il faut apporter des modifications à functions.php :
<?php if ( function_exists('register_sidebar') )
$widgetWrap = array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
);
register_sidebars(2, $widgetWrap); ?>
Notez le « s » à register_sidebars(…) qui a son importance. Je me suis inspiré de ce qui existe dans le thème sandbox :
J’ajoute ensuite le numéro d’ordre dans la fonction dynamic_sidebar() : 1 puis 2 et ainsi de suite pour chaque déclaration de WAR dans les fichiers où j’ai prévu d’afficher des Widgets :
<div id="sidebar">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. /
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
[ Les widgets glissés dans "Colonne latérale 1" s'afficheront ici ]
<?php endif; ?>
</ul> </div> <div id="header-bis">
<ul>
<?php / Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
[ Les widgets glissés dans "Colonne latérale 2" s'afficheront là ]
<?php endif; ?>
</ul>
</div>
Si tout se passe bien, la page d’adminitration des Widgets devrait proposer « Colonnes latérales 1″ et « Colonnes latérales 2″ pour accueillir les modules.
Pour aller plus loin
Oups ! j’ai dit « Colonnes latérales » et non pas WAR ! Et pour cause : l’emplacement est désigné de cette manière dans la page d’administration. Qu’à celà ne tienne, il est possible de modifier l’intitulé des emplacements en suivant les explications données par automattic.
Sauf qu’après quelques essais, l’intitulé est bien modifié mais le %d s’affiche à la place des chiffres. J’ai pourtant essayé deux méthodes :
<?php if ( function_exists('register_sidebar') )
$widgetWrap = array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
'name'=>'Foobar %d',
);
register_sidebars(2, $widgetWrap);
?>
Puis :
<?php if ( function_exists('register_sidebar') )
$widgetWrap = array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
);
register_sidebars(2, $widgetWrap, array('name'=>'Foobar %d'));
?>
Pour continuer dans les améliorations, je cherche comment obtenir un formatage différent selon la WAR utilisée. Pour l’instant, j’ai l’impression que seul un modèle peut s’appliquer. Si vous avez une idée sur la question, n’hésitez pas à vous manifester :)
En guise de conclusion express
Comme la peinture de Stupeflip, WordPress est un outil de blog aux possibilités stupéfiantes que je teste sur différents terrains de jeux que je dévoilerais en temps voulu… Dotclear n’est pas en reste puisque j’ai un billet en cours de finalisation dans les cartons concernant la version 2 bêta 6 (tiens, manquerais plus qu’une version stable sorte avant que je publie mon billet. Pas taper, pas taper ;) )
Stay tuned and mind the gap!
Article en plusieurs parties : Page précédente
Je crois que tu vas avoir des backlinks en plus :)
Allez, je croise les doigts pour que l’intendance suive :)
Très bon article Br1o. Pas forcément facile d’accès pour le commun des mortels ;-) mais important pour la widgetisation de plusieurs colonnes !
Merci Fran6. J’ai essayé d’être précis sur certains aspects du code du thème par défaut, par exemple, le pourquoi du comment de l’ajout de balises li dans un cas et pas dans un autre, ce qui me semble relativement abordable pour un débutant qui suivrait avec le code sous le coude ;)
En revanche, je n’ai pas abordé les possibilités pour personnaliser les appels de fonctions. D’abord parce que le codex n’est pas si mal fait que ça ;) et ensuite, vu les possibilités, c’est sans limite (ou presque).
Tu disais :
– "Pas forcément facile d’accès pour le commun des mortels"
Je dirais (mode je m’la pète) :
– "après la lecture du billet les mortels seront un peu moins communs :p "
a++
L’article est en tout cas très clair et c’est pas forcément facile de le rendre plus accessible, étant donné le sujet à la base ;-) C’est très technique en même temps… Tu as l’avantage de bien expliquer les choses, donc ça rend la pilule plus facile à avaler !! :D En tout cas, j’avais écrit un tuto pour la widgétisation des thèmes mais j’ai zappé le fait d’avoir plusieurs colonnes…zut! Ben, j’en ferai un autre en envoyant vers ton article ! ;-) En tout cas, ton blog est très intéressant !
La seule vraie question est : l’auteur est-il fan de la série The IT Crowd et en particulier du S1E02 !?
ZeuBeuBeu > J’ai cherché sur hdtv.unotherblog.net/ mais je n’ai rien trouvé sur The IT Crowd ;)
Oula tu ne connais pas (encore) !? La saison 2 est en cours de tournage et tu devrais te "procurer" la première (courte, 6 épisodes) saison fabuleuse de cette série de geeks pour les geeks…
WordPress 2.2 – Modifier les widgets originaux
Lors 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 &#…
ZeuBeubeu > Comment ça, me "procurer" la première saison ;)
Génial ! merci beaucoup, c’est dont j’avais besoin …
Super article, merci beaucoup.
A tout hasard tu ne saurais pas comment récuperer le nom de la function de chaque widget ?
@kenny > je crois que tu peux trouver ça dans le fichier functions.php qui fait partie du thème.
Je me suis mal exprimé en fait j’ai le widget pour afficher un flux rss dans ma sidebar (celui de base fourni par wordpress) je l’ai mis en tant que widget dans ma sidebar mais j’aimerai récuperer le code de la fonction pour pouvoir l’integrer dans mon footer. Vu que c un widget de base il est pas dans le fichier fonction du theme.
ok, a priori, c’est justement le sujet du billet ;) En fait, il faut que tu déclare une nouvelle zone widgetisable (WAR dans mon jargon) pour pouvoir ajouter ensuite le widget flux RSS (il est possible d’avoir plusieurs instances des flux, qui est correspond à ton cas).
Oui j’avais bien compris ça merci, mais le truc c’est que je ne veux pas passer par la sidebar car j’aimerai changer l’adresse du flux dynamiquement avec la variable de titre du billet… c’est un peu flou vu comme ça mais j’aurais juste besoin du nom de la fonction pour le faire.
J’ai déjà galerer avec pas mal de plugins pour retrouver les noms de leurs fonction sur certains c’est indiqué mais pour d’autres c’est vraiment galere:/
Enfin c’est pas grave merci quand même pour ton aide bonne journée et encore bravo pour ton blog.
@kenny > oki, je pense que tu trouveras ton bonheur à l’adresse http://codex.wordpress.org/Customizing_Feeds ou alors à l’adresse http://codex.wordpress.org/WordPress_Feeds Merci et à bientôt ;)
Merci je v jeter un oeil à tout ca :)
Tous les codes des widgets sont dans /wp-includes/widgets.php
Sinon, pourquoi ne pas déclarer une sidebar que tu afficherais en tant que contenu du footer ? histoire de pouvoir : 1. la gérer avec les widgets 2. pas t’emmerder à recopier du code pré-existant
Merci pour ces infos utiles, en particulier celles sur les widgets… et bravo pour ce site!
ouch la ça envoi du lourd!
je pense avoir saisi l’essentiel…mais il faudra que je le relise après avoir dormis :D
Super instructif, mais je suis un petit peu déçu de ne voir qu’aucun blog ne propose d’explications pour personnaliser le design des widgets, et non pas le contenu. C’est dommage car je suis sur qu’un petit tuto pourrait en réjouir plus d’un (dont moi evidemment!) :-D
@Jay > Je n’ai pas bien compris ce que tu entendais par « design des widgets, et non pas le contenu » ?
Par exemple, intégrer les widgets dans un cadre (exemple iTheme), changer le background, avoir des icones differentes en fonction des widgets. Pour ma part, je trouve mes widgets trop simples et je voudrais les intégrer dans une « boite » de couleur, aux bords arrondis.
oki, je vois mieux ce que tu veux dire maintenant. Bon, je ferais un tuto dans ce sens lorsque j’aurais installé wordpress 2.5 : j’ai encore un bout de billet sur les widgets qui trainent dans les placards et je pense que je pourrais caser quelques conseils pour stylisationner les widgets ;)
D’acc Bruno, merci beaucoup, je me suis incris a ton RSS pour être sur de pas louper tes tutos ! ;-)
Mon dieu, du boulot en perspective… Rajoutez un élément de sidebar et bientôt les widgets avec un look différent… Bon, je m’abonne au flux, tant pis.
Moi ce que je repproche au WordPress c’est qu’il faut, si j’ai bien compris, pour installer des plugin’s, faire des formulerais de contact, utiliser forcément un hébergeur …
Tout le monde n’a pas les connaissances pour utiliser ce genre de chose … ou n’a pas envie d’aller chercher un hébergeur, de le payer, de se prendre la tete avec un ftp …
J’aimerai bien savoir s’il exciste un moyen de créer un formulaire en n’utilisant pas d’hébergeur et de ftp. Si oui je suis prenneur ! Merci loll
Voilà qui est complet on sait tout sur la sidebar ou presque :P
Est il possible de gérer plusieurs sidebar en fonction du contexte (page, article, recherche…) ?
Merci et bravo ! (et réciproquement) ;)
@Nemico > il est tout à faire possible d’utiliser wordpress sans hébergeur en ouvrant un compte sur http://wordpress.com ;)
@AjT > tout à fait, oui, ça se fait même assez simplement en utilisant les fontions prévues à cet effet (
is_single()is_page(),is_search()etc. ou en créant les pages kivonbien commesingle.php,page.phpsearch.php, etc. dans le premier cas, il suffit de vérifier une condition du genre :if ( is_page() ) { include "sidebar-page.php"; } else { include "sidebar-passe-partout.php"; }Superbe il me semblait bien qu’on avait ce genre d’alternative. Pour pousser le bouchon un peu plus loin (Maurice..) peut on également le faire en fonction de la longueur des articles par ex c’est à dir eune sidebar attitrée à l’article 59,etc ?
Merci de cette promptitude ;)
@AjT > on doit pouvoir s’en sortir en utilisant le numéro identifiant le billet : post-< ?php the_ID(); ?> if ( ‘post-’ . the_ID() == post-18 ) { etc.
Bon, là, je n’ai pas testé et il y a peut-être des restrictions quant à l’utilisation de la fonction the_ID() en dehors de la boucle. A tester, donc ;)
Salut, tout d’abord je tient à vous félicitez pour votre blog qui est une vrai mine d’or, en plus un débutant comme peut aisément comprendre et mettre les mains dans le cambouis comme vous dites souvent ;) !!!
Une fois de plus je cherchais à faire quelque chose de bien spécifique sur ma sidebar de droite et en cherchant sur mon ami GG j’ai encore atterri ici ;) !!!
Je suis débutant et je comprend un peu ce tuto mais pas en totalité, je cherche à gérer le widget « texte » pour qu’il affiche un texte différent dans chaque page de mon blog (que je tient à transformer en site) !!! j’ai donc repris ce tuto mais étant débutant en php, j’ai un peu de mal, donc j’ai ouvert mon fichier fonctions.php de mon thème et j’ai rajouter ces lignes : [code] function widget_mon_theme_Texte() { wp_list_Texte('exclude=jeux,geek,133&title_li=Infos'); }
if ( function_exists('register_sidebar_widget') ){ register_sidebar_widget('Texte', 'widget_mon_theme_Texte'); } [/code]
Mais je ne parviens pas à ce que je veut faire !!!
Pourriez vous me donner quelques pistes s’il vous plait ?
@artfaks > Pour avoir un texte différent sur chaque page à l’aide du widget texte, on peut créer autant de zones widgétisables qu’il y a de textes différents. Voir ce billet sur les widgets dans WordPress 2.5 pour mieux gérer l’intitulé des zones.
merci a vous pour cette réponse !!! ;)
Bonjour et merci pour vos articles si intéresants !
je suis en train de mettre en place mon 1er Blog WordPress et j’aurais une questio très simple (pour vous) dans mon widget « Les derniers articles » je voudrais modifier le style des balises et
quelle feuille css dois-je modifier et dois-je modifier sidebar.php ?
merci de votre réponse à cette (première) question …
@Mike > le widget en question génère une liste imbriquée dans la liste principale de la sidebar. L’élément de liste est identifié par
id="recent-posts"avecclass="widget widget_recent_entries". Pour attendre la liste elle-même puis les éléments de la liste, il faudra donc utiliser :Pour le titre
H2, on pourra utiliser la classe .widgettitle pour uniformiser ce titre avec les autres, ou bien utiliser :pour lui donner un style particulier.
Je n’ai pas regardé la feuille de style, mais en ajoutant les déclarations indiquées plus haut à la fin de style.css, ça ne devrait pas poser de problème ;)
merci pour la réponse rapide et efficace !
en effet, en appliquant exactement tes instructions, c’est nickel !!
maintenant, je comprends mieux l’imbrication des listes et sous-listes dans le sidebar et je vais pouvoir appliquer le design voulu.
Vive le css !
Super, merci, bravo !