6) Intégrer la sidebar

La sidebar contient toutes les informations de contexte, le formulaire de recherche et quelques autres bricoles.

Précédent | 6/20 | Suivant

Débuter le fichier

Il faut choisir une option de codage. Soit une liste de liste, soit un ensemble de blocs "div". Pour cet exemple nous prendrons l’option d’une liste de liste, soit des ul dans un ul.
On place ce code dans la page sidebar.php

<div class="sidebar">
<ul>
<!-- placer ici les bloc dans l'ordre désiré -->

</ul>
</div>

Ensuite, on place dans l’ordre désiré ces blocs. On peut évidemment en coder d’autres. Remarquez que si le code est similaire (un li, un h2, un ul) on place pour chaque li du premier niveau un id qui permettra de personnaliser au besoin le comportement visuel de chaque élément.

Remarque 1 : il est possible de "widgetiser" la sidebar, c’est à dire de la rendre gérable par l’administration de wordpress. Un code simple est alors ajouté, qui remplace le code de la sidebar par des blocs précodés de wordpress (et d’autres chargés sous forme de plugin).

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<!-- Placer ici tout le code de la sidebar -->

<?php endif; ?>

Ceci s’accompagne d’une description pour wordpress du nombre de sidebar utilisée (car on peut en définir plusieurs) dans une page function.php que l’on doit créer au besoin dans le dossier du thème, et qui contiendra ceci :

<?php
/**
* @package WordPress
* @subpackage -votre theme-
*/

if ( function_exists('register_sidebar') )
        register_sidebar(array(
                'before_widget' => '<li id="%1$s" class="widget %2$s">',
                'after_widget' => '</li>',
                'before_title' => '',
                'after_title' => '',
        ));

?>

Voir l’article spécifique à l’ajout de plusieurs sidebars.

Remarque 2 : il est possible d’externaliser d’autre fichiers que le header, le footer, etc. Il faut alors employer la fonction php include comme suit :

<?php include (TEMPLATEPATH . '/mon_fichier.php'); ?>

Placer le formulaire

<li id="search">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
 <div>
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
   <input type="submit" id="searchsubmit" value="Chercher" />
 </div>
</form>
</li>

placer les pages

<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

Voir la documentation de wp_list_pages

Placer le calendrier

<li id="calendrier">
 <h2>Calendrier</h2>
 <?php get_calendar(); ?>
</li>

Placer les catégories

<li id="categories"><h2>Categories</h2>
   <ul>
   <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
   </ul>
 </li>

Voir la documentation de wp_list_cats

Placer les archives

<li id="archives">
 <h2>Archives</h2>
 <ul>
   <?php wp_get_archives('type=monthly'); ?>
   </ul>
</li>

Placer les métas

<li id="metas"><h2>Infos Meta</h2>
<ul>
<?php wp_register(); ?>
   <li><?php wp_loginout(); ?></li>
   <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML valide</abbr></a></li>
   <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
   <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
 <li><a href="http://wordpress-fr.net/" title="Communauté française de WordPress et WPmu.">WordPress Francophone</a></li>
   <?php wp_meta(); ?>

</ul>
</li>

Placer les feed

<li id="feed">
<h2>RSS feed</h2>          
<ul>  
<li><a href="<?php bloginfo('rss2_url'); ?>" title="Flux RSS des articles">Flux RSS des articles</a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="Flux RSS des commentaires">Flux RSS des commentaires</a></li>
</ul>
</li>