F8EOZ

Objet
Ce template prend en charge l’affichage du sidebar.
Sidebar statique ou dynamique?
Le sidebar dynamique permet d’ajouter des widgets. Dans notre cas c’est peu utile puisque nous en maîtrisons la programmation. Il est possible d’en ajouter ou d’en retirer en modifiant le sidebar.php . Cependant si vous souhaitez diffuser votre thème cela offre à son utilisateur potentiel une possibilité d’adaptation qu’il ne faut pas négliger.

Structure du Sidebar statique
Un sidebar est composé de blocs: calendrier, pages, tags, etc.., affichés en colonne les uns à la suite des autres. Chaque bloc comporte un titre suivi d’une liste d’éléments. Pour obtenir un simple sidebar insérer dans sidebard.php entre les ligne <div id= »sidebar »> et </div><!–END sidebar–> les lignes suivantes:

<ul>
    <li><h2><?php _e('Pages', 'montheme') ?></h2>
        <ul>
            <?php wp_list_pages('title_li='.__('').'' ); ?>
        </ul>
    </li>

    <li><h2><?php _e('Calendrier', 'montheme') ?></h2>
        <ul>
            <?php get_calendar(); ?>
        </ul>
    </li>

    <li><h2><?php _e('Cat&eacute;gories', 'montheme') ?></h2>
        <ul>
            <?php wp_list_categories('orderby=name&title_li='); ?>
        </ul>
    </li>

    <li><h2><?php _e('Posts r&eacute;cents', 'montheme') ?></h2>
        <ul>
            <?php wp_get_archives('type=postbypost&limit=15'); ?>
        </ul>
    </li><!--END POSTSRECENT-->

    <li><h2><?php _e('Archives', 'montheme') ?></h2>
        <ul>
            <?php wp_get_archives('type=monthly&show_post_count=1'); ?>
        </ul>
    </li><!--END ARCHIVES-->

    <?php if ( function_exists('wp_tag_cloud') ) : ?>
        <li><h2><?php _e('Tags', 'montheme') ?></h2>
            <ul>
            <?php wp_tag_cloud('smallest=8&amp;amp;amp;largest=22'); ?>
            </ul>
        </li><!--END TAGS-->
    <?php endif; ?>

</ul><!--END UL SIDEBAR-->

Pour habiller les titres et les éléments de la liste insérer à la fin de style.css les lignes suivantes:

/* SIDEBAR */

#sidebar h2 {
margin:1em 0 0 0; /* espace en haut de chaque chaque tête de chapitre */
padding:0 0 0.3em 0; /* esace entre la tête de chapitre et la 1ère ligne de la liste */
font-weight:normal;
font-size:1.4em;
font-family: Arial;
}

#sidebar ul {
margin: 0 0 0 2em; /* marge de liste générale */
padding:0 0 0 0;
list-style: none; /*enlève les bullets de la liste */
font-size: 1.0em; /* très important pour garder la même taille: taille des caractères X 1 */
}

#sidebar li ul, #sidebar ul li { /* s'applique à toutes les sous-listes */
margin: 0 0 0 0; /* marge d'indentation */
padding:0 0 0 0;
list-style:none;
font-size:1em; /* très important pour garder la même taille: taille des caractères X 1 */
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le sidebar s’affiche sur fond blanc. Regarder aussi l’imbrication des balises <ul> et <li>. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Sidebar variable
Il est possible de faire varier le contenu du sidebar en fonction du contexte dans lequel on se trouve. Le sidebar devient aussi dynamique mais sans action de l’utilisateur, uniquement par la programmation. Par exemple, pour afficher uniquement sur la page d’accueil ou une autre page, la liste des liens du blogroll et méta insérer dans sidebar.php juste avant </ul><!–END UL SIDEBAR–> les lignes suivantes:

<?php if ( is_home() || is_page() ) { /* si page ou accueil */?>

    <li><h2><?php _e('Blogroll', 'montheme') ?></h2>
        <ul>
            <?php get_links(-1, '<li>', '</li>', ' - '); ?>
        </ul>
    </li><!--END BLOGROLL-->

    <li><h2><?php _e('M&eacute;ta', 'montheme') ?></h2>
        <ul>
            <?php wp_register(); ?>
            <li><?php wp_loginout(); ?></li>
            <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional') ?>">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</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="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
            <?php wp_meta(); ?>
        </ul>
    </li><!--END META-->

<?php } ?>

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier que le sidebar affiche les blocs que nous venons d’ajouter. Cliquer maintenant sur un Post, les blocs ont disparu du sidebar.

Personnalisation du sidebar
Il est possible d’ajouter des bouts de code et des fonctions. Par exemple, une fonction qui affiche les n commentaires les plus récents. Cette fonction existe probablement quelque part mais je l’ai programmé pour le « fun ». Dans sidebar.php sous le bloc des catégories, par exemple,  insérer les lignes suivantes :

<li><h2><?php _e('Commentaires r&eacute;cents', 'montheme') ?></h2>
    <ul>
        <?php
        $comment_array = get_comments('number=15');
        foreach($comment_array as $comment):
            $post_id = get_post($comment->comment_post_ID); ?>
            <li><?php echo($comment->comment_author); ?>
                <a href="<?php echo get_permalink($post_id); ?>#comment-<?php echo($comment->comment_ID) ?>">-<?php echo($post_id->post_title) ?></a>
            </li>
        <?php endforeach; ?>
    </ul>
</li><!--END COMMENTSRECENT-->

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’affichage du commentaire et de son émetteur. A ce stade de la programmation il n’est pas encore possible d’écrire un commentaire mais il devrait y avoir au moins le commentaire Hello world! de WordPress.

Sidebar dynamique
Pour rendre dynamique le contenu de sidebar il faut:
- ajouter la fonction register_sidebar() dans le fichier functions.php ,
- ajouter une instruction conditionnelle dans sidebar.php .

Le fichier functions.php est chargé automatiquement par WordPress lorsqu’il est présent à la racine du thème.  La fonction register_sidebar(), permet d’indiquer les balises dans lesquelles seront emboîtées les Widgets activés. Vous pourrez ensuite les habiller avec le style de votre choix dans style.css. Avec votre éditeur, créer un nouveau fichier functions.php (attention à l’écrire avec la bonne orthographe, sinon il ne sera pas pris en compte et votre sidebar restera statique!). Insérer les lignes suivantes:

if (function_exists('register_sidebar') )
// est utilisé quand on ajoute un widget
    register_sidebar(array(
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
        )
    ); // ici tous les paramètres ont la valeur par défaut

Enregistrer ce fichier sous /montheme.

Tous les blocs du sidebar statique seront emboités dans l’ instruction conditionnelle suivante :
- si les Widgets sont activés ET si la fonction PHP dynamic_sidebar() , les Widgets sélectionnés dans l’interface d’administration du site seront affichés,
-sinon, les blocs du sidebar statique seront affichés.
Pour faire cela, sidebar.php sera modifié ainsi:

<div id="sidebar">
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
            Le code du sidebar statique
        <?php endif; ?>
    </ul><!--END UL SIDEBAR-->
</div><!--END sidebar-->

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Dans la barre d’administration, choisir Apparance Widgets, ajouter un Widget dans le sidebar. Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Le Widget a remplacé le sidebar statique.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Traduction
Noter qu’il est facile de franciser le sidebar. Les titres sont affichés par la  fonction_e()  qui permet le texte de votre choix.

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction