Accueil > Wordpress > WordPress : de l’usage créatif des widgets

WordPress : de l’usage créatif des widgets

widgetsL’excellent Smashing Magazine à publié récemment un article très détaillé sur l’utilisation des Widgets de WordPress. Ces petites briques fonctionnelles que l’on ajoute à son gré dans un menu permettent d’apporter des fonctionnalités, sans devoir faire du développement.

Mais au delà de cet utilisation classique et simple, les widgets de WordPress permettent beaucoup plus, comme d’ajouter de nouvelles zones dynamiques, de gérer la page d’erreur 404 , insérer des widgets entre des articles ou de personnaliser l’affichage des articles.

1. Utiliser plusieurs zones pour afficher des Widgets

sidebar

iNove propose en standard quatre zones

Un thème « Widget -ready » devient incontournable aujourd’hui. Mais une seule zone pour afficher des widgets n’est souvent pas suffisante. Il est possible en insérant le bon code au bon endroit de facilement ajouter de nouvelles zones pour afficher des Widgets dans le theme.

Déclarer les zone de Widgets

Pour avoir plusieurs zones de Widgets, la première chose à faire est de déclarer ces zones dans le fichier functions.php de votre thème WordPress.

Par exemple, le thème iNove utilise quatre zone de Widgets, déclarés comme ci-dessous.  Ajoutons une cinquième zone, intitulée demo_sidebar.

/** widgets */
if( function_exists('register_sidebar') ) {
 register_sidebar(array(
 'name' => 'north_sidebar',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 register_sidebar(array(
 'name' => 'south_sidebar',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 register_sidebar(array(
 'name' => 'west_sidebar',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));

 register_sidebar(array(
 'name' => 'east_sidebar',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));

 demo_sidebar(array(
 'name' => 'east_sidebar',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
}

Activer les zones de Widgets

L’étape suivante consiste à intégrer le code dynamique de la barre latérale dans le fichier sidebar.php de votre thème.

register_sidebar(array(
 'name' =&gt; 'demo_sidebarr',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));

demoside

Le code entre les deux balises PHP sera exécuté si aucun widgets n’a été utilisé dans cette zone.

Widget Par defaut

default

2. De la logique dans les Widgets

logic Une force des widgets est de pouvoir conditionner l’affichage en fonction de certaines conditions, pour permettre au même Widget de s’afficher différemment en fonction du contexte.

C’est là qu’intervient l’extension Widget Logic . Lorsqu’elle est installée sur WordPress, une nouvelle option apparait dans tous les Widgets coté administration, afin d’utiliser des tags conditionnels WordPress pour contrôler où le widget est affiché.

Exemples

  • Affiche uniquement sur la page d’accueil : is_home()
  • Affiche uniquement sur les articles seuls : is_single()
  • Affiche uniquement sur des pages : is_page()
  • Affiche uniquement sur les pages d’archives : is_archive()
  • Affiche uniquement dans la page de résultats de la recherche : is_search()
  • Affiche sur toutes les pages sauf la page d’accueil : !is_home()
  • Affiche sur les pages appellées “Pub” et “Contact” : is_page('pub') || is_page('contact')

Plus de détails :

3. Un requêteur d’articles : Query Posts

Si vous désirez contrôler l’affichage des articles et des pages, vous pouvez utiliser dans votre code les tags query_posts. Si vous ne voulez pas développer, une extension intéressante vous permet de maîtriser comment les articles et pages sont affichées : Query Posts . Le Widget associé vous permettra d’afficher articles et pages de toutes les façons imaginables.

querypost

Les réglages multiples de Query Post

Fonctionnalités

  • Affiche les articles par mot clé, catégories, auteur, date ou champ personnalisé,
  • Affiche n’importe quel nombre d’artciles,
  • Classe les articles par date, titre ou  ID,
  • Affiche les articles en entier, en liste ou en résumé,
  • Affiche les pages.

4. Gérer la page d’erreur 404

Beaucoup de thèmes pour WordPress ne gèrent pas proprement la page d’erreur 404, affichant simplement le laconique message : “Error 404 – Not Found”.

Il est simple d’améliorer cette situation en affichant par exemple les widgets des dernières articles ou les archives d’une catégorie.

Un peu de code

Comme pour les zones de widgets, il  faut enregistrer dans WordPress une zone, dans le fichier functions.php.

<?php  
 register_sidebar( array(  
 'name' => '404',  
 'id' => '404',  
 'before_widget' => '<div id="%1$s">',  
 'after_widget' => '</div>',  
 'before_title' => '<h3>',  
 'after_title' => '</h3>'  
 ) );  
?>

Il faut ensuite modifier le fichier 404.php de votre thème et ajouter le code suivant:

<?php dynamic_sidebar( '404' ); ?> 

Vous pouvez ensuite ajouter les widgets de votre choix dans votre widget  “404″. Vous pouvez y placer au choix un widget de recherche, une requête personnalisée de Query Posts ou une archive d’articles.

Le résultat permet ensuite de mélanger du texte explicatif avec un affichage personnalisé des articles par Query Posts et une recherche sur Google.com :

404custom

Plus de détails:

5. Insérer des widgets entre les articles

L’exemple le plus évident est l’insertion de publicité entre des articles. Mais il ce n’est pas limité à ça, et tout est possible.

Un peu de code

Comme pour le template de l’erreur 404, il faut modifier le fichier functions.php pour insérer un code de déclaration de zone :

<?php 
register_sidebar( array( 
'name' => 'index-insert', 
'id' => 'index-insert', 
'before_widget' => '<div id="%1$s">', 
'after_widget' => '</div>', 
'before_title' => '<h3>', 
'after_title' => '</h3>' 
) ); 
?>

Il faut ensuite modifier le fichier index.php de votre thème pour insérer dans la boucle d’affichage des articles le code suivant, avant l’instruction “endwhile”.

<?php if ($count==2) { ?>
<?php dynamic_sidebar('index-insert') ?> 
<?php } ?> 
<?php $count = $count + 1; ?> 
<?php endwhile; ?>

Le code ci-dessus va ajouter la zone “index-insert” après le second article.  Vous pouvvez chnager la valeur $count==2 pour ajuster à votre besoin.

Vous pouvez ensuite utilisercomme précédemment tout widget pour afficher un contenu de votre choix à cet emplacement.

  1. qsdqsd
    13/08/2009 à 15:41 | #1

    Merci beaucoup, c’est limpide !

  1. Pas encore de trackbacks