Afficher différentes sidebar dans votre thème WordPress

Publié par Fred Le

Catégorie(s): Tutoriel Wordpress
 

Dans se tutoriel vous allez apprendre créer plusieurs sidebar et comment les affichés sur vos pages et articles, sans ajouter de ficher supplémentaire.

 

La première étape est de déclarer les sidebar(colonnes latérale) dans le fichier function.php de votre thème, ouvrer le fichier puis ajouter le code ci-dessous :


function register_my_widget_theme()  {

// sidebar pour les pages

	register_sidebar(array(

		'id' => 'page-sidebar', // identifiant

		'name' => 'Sidebar Page', // Nom a afficher dans le tableau de bord

		'description' => 'Sidebar pour mes pages.', // description facultatif

		'before_widget' => '<li id="%1$s" class="widget %2$s">', // class attribuer pour le contenu (css)

		'after_widget' => '</li>',

		'before_title' => '<h2 class="widgettitle">', // class attribuer  pour le titre (css)

		'after_title' => '</h2>',

	));

// sidebar pour lers articles	

	register_sidebar(array(

		'id' => 'article-sidebar', // identifiant

		'name' => 'Sidebar Article', // Nom a afficher dans le tableau de bord

		'description' => 'Sidebar pour mes articles.',// description facultatif

		'before_widget' => '<li id="%1$s" class="widget %2$s">', // class attribuer pour le contenu (css)

		'after_widget' => '</li>',

		'before_title' => '<h2 class="widgettitle">', // class attribuer  pour le titre (css)

		'after_title' => '</h2>',

	));

}

add_action( 'init', 'register_my_widget_theme' );

‘id’ => ‘page-sidebar’  est l’identifiant  qui va permettre afficher la sidebar.

‘name’ => ‘Sidebar Article’ est tous simplement le nom de la sidebar  qui s’affichera dans le tableau de bord.

‘description’ => ‘Sidebar pour mes pages.’ Ici vous pouvez ajouter une description  de la fonctionnalité de la sidebar

‘before_widget’ => ‘<li id= »%1$s » class= »widget %2$s »>’ est le début de la balise ou sera placer le contenu des widget.

‘after_widget’ => ‘</li>’ Fermeture la balise

‘before_title’ => ‘<h2>’ est le débute de la balise h2 qui va contenir les titres des widgets

‘after_title’ => ‘</h2>’ fermeture de la balise h2.

Vous pouvez changer les class et les identifiants si vous avez besoin de créer un style différent  pour vos sidebar.

Affichage des sidebar

Maintenant que vos sidebar son déclarer dans le thème  vous allez ajouter le code suivant pour les affichés.

Pour les page ouvrez le fichier page.php et remplacer <?php get_sidebar(); ?> par :

<div <div id="sidebar">

<ul>

<?php dynamic_sidebar('page-sidebar'); ?>

</ul>

</div>

Pour les articles même procédure ouvrez le fichier single.php et remplacer par :

<div <div id="sidebar">

<ul>

<?php dynamic_sidebar('article-sidebar'); ?>

</ul>

</div>

Astuce

Si voulez pour quelque raison que ce soit ne plus afficher une sidebar différente pour vos pages et articles et remetre celle par défaut il vous suffi d’ajouter le code ci-dessous dans les fichiers single.php et page.php en remplacement de celui que je vous ai indique plus haut.

<div id="sidebar">

<ul>

<?php if ( is_active_sidebar('page-sidebar')) : ?> <!--  si il y a des Widgets dans cette sidebar elle sera afficher -->

<?php dynamic_sidebar('page-sidebar'); ?>

<?php else : ?> <!-- si cette sidebar est sans widget afficher la sidebar par défaut -->

</ul>

</div>

<?php get_sidebar(); ?> <!-- la sidebar par défaut -->

<?php // ou un autre contenu ?>

<?php endif; ?>

Vous pouvez ajouter autant de sidebar que vous avez besoin si vous avez des page template, en ajoutant un nouvel identifiant pour chaque nouvelle sidebar.

Mots clés: , ,





15 Commenataires pour :

“Afficher différentes sidebar dans votre thème WordPress”

  1. Rafa dit :

    Salut Fred et bravo pour cet article vraiment interessant.
    Je suis en train de préparer en local un nouveau blog mais je ne suis absolument pas bon en programmation.
    Pour ce blog j’ai besoin de mettre du contenu différent dans les sidebars de chacune de mes pages et j’ai donc essayé de suivre tes conseils à la lettre pour pouvoir les mettre en place.
    Au final quand je vais dans la partie « apparence » puis « widget » j’ai bien mes 5 sidebar différentes qui apparaissent mais en revanche quand j’essaie de mettre du contenu différent dans chaque sidebar ça ne fonctionne pas.
    Car après quand je regarde page par page du blo j’ai tout le contenu cumulé qui apparait dans chaque sidebar.
    Je pense donc qu’il me manque un truc dans ma manip pour que ce que j’intègre dans le tableau de bord apparaisse bien ensuite sur le site mais franchement j’ai beau cherché je ne sais pas comment faire.

    Je ne sais pas si je suis très clair mais j’aurai vraiment besoin de ton avis d’expert pour y parvenir.

    J’espère que tu trouveras quelques minutes pour me répondre assez vite.

    Merci par avance,

    Raphaël

  2. Fred dit :

    Salut Raphaël,
    J’ai testé le code j’ai mis pour l’article et j’ai ajouté 5 sidebars et ca fonctionne bien maintenant a mon avis le problème vient de tes identifiants il faut bien les nommé comme ceci :

    ‘id’ => ‘page-sidebar-1’
    ‘id’ => ‘page-sidebar-2’
    ‘id’ => ‘page-sidebar-3’
    ‘id’ => ‘page-sidebar-4’
    ‘id’ => ‘page-sidebar-5’

    Il ne faut pas que tu es d’espace dans les identifiants et bien sur il faut en mettre un nouveau pour chaque nouvelle sidebar.
    Et est ce-que tu ajoute bien le code entier pour déclarer une nouvelle sidebar :

    register_sidebar(array(
    'id' => 'nouvelle-sidebar', // identifiant
    code code code
    )

  3. Max dit :

    Salut,

    J’ai essayé d’utiliser ton code pour mettre une sideBar en page d’accueil (J’ai remplacé la page d’accueil normale par une page que j’ai crée donc plus de sidebar par défaut), mais en suivant ta démarche je n’ai aucune sidebar qui s’affiche. Est ce que le fait d’avoir utilisé une page comme page d’accueil est un problème ?

    • Fred dit :

      Salut Max,
      Le fait d’utiliser une page comme page d’accueil sa ne pose aucun problème essaye appelé la sidebar par défaut avec le code suivant soit avant le footer après la fermeture des balises ou après le header avant l’ouverture des balises :

      <?php get_sidebar(); ?> 
      
  4. Corinne dit :

    Bonjour,

    Tuto très utile et très simple (parfait pour moi).
    Question: est-il possible d’attribuer 1 sidebar spécifique à 1 catégorie spécifique ainsi qu’aux articles qui la compose par exemple?

    Actuellement, j’utilise multiple sidebar: http://wordpress.org/extend/plugins/multiple-sidebars/ mais le CSS du thème n’est pas respecté/ repris et cela créé des articles 🙁

    Avez vous une petite idée? J’aimerai bien car votre astuce à l’air assez simple à mettre en oeuvre 🙂

    Exemple:
    Article wordpress = sidebar wordpress
    article joomla = sidebar joomla
    Si article n’est pas wordpress, ni joomla, alors sidebar par défaut.

    C’est peut-être compliqué à réaliser?

    • Fred dit :

      Bonsoir Corinne,
      Oui c’est possible d’attribuer une sidebar spécifique pour une catégorie et pour vous répondre a votre question le plus clairement possible j’ai réalisé un tuto sur se sujet qui est intéressant.

      Afficher une sidebar en fonction de la catégorie de l’article consulté

      Pour le plugin comme beaucoup d’autre vous avez une chance sur deux que cela convienne à votre thème après il faut ce lancer dans les modifications une chose qui n’ai pas toujours facile même quant on connait les langages de programmations.

  5. Corinne dit :

    Super, vous êtes extra!
    Impossible de trouver sur le net un article simple qui explique comment attribuer une sidebar à une catégorie spécifique, ce n’est pas faute d’avoir cherché pourtant..
    Merci infiniment, je vais pouvoir redonner un bel aspect à mon blog 🙂

  6. al3ab dit :

    super, tres joli site
    merci beaucoup pour cette article tres important pour tous les webmaster
    nerci une autre fois

  7. salut
    merci beaucoup pour cette article
    Oui c’est possible d’attribuer une sidebar spécifique pour une catégorie et pour vous répondre a votre question le plus clairement possible j’ai réalisé un tuto sur se sujet qui est intéressant.

  8. kachalot dit :

    bonjour,

    Super ton tuto, j’ai testé, cela fonctionne bien mais je n’arrive pas à bien positionner la sidebar dans les pages articles. Une info pour cela. J’ai bidouillée peu le CSS mais sans succès; Merci pour le retour si tua une minute.

  9. Alain dit :

    Bonjour Frédéric,

    Merci pour vos explications, mais j’ai du manquer une étape.

    Pour le fichier function.php de mon thème j’ai ajouté ce script :
    function register_my_widget_theme() {

    // Soiree Sidebar
    register_sidebar(array(
    ‘id’ => ‘soiree-sidebar’,
    ‘name’=>’Soiree Sidebar’,
    ‘before_widget’ =>  »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »
    ));

    // Location salle Sidebar
    register_sidebar(array(
    ‘id’ => ‘location-sidebar’,
    ‘name’=>’Location Salle Sidebar’,
    ‘before_widget’ =>  »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »
    ));
    }

    add_action( ‘init’, ‘register_my_widget_theme’ );

    Dans mon tableau de bord widget apparait bien mes deux nouvelles sidebar.

    Dans mon fichier page.php j’ai supprimé que j’ai remplacé par le script du dessous :
    <div

    Malheureusement les sidebar avec leurs widgets n’apparaissent pas dans leurs pages respectives et je n’arrive pas à comprendre d’où vient le problème.

    J’espère que vous aurez un moment pour m’aider à résoudre ce problème, merci,

    Alain

    • Fred dit :

      Bonsoir Alain,
      Avez-vous des pages tempates ? Si c’est le cas il faut ajouter votre code pour les nouvelles sidebar dans le modèle de page respective

      • Alain dit :

        Bonsoir Fed,

        Merci pour votre réactivité.

        Avez-vous des pages templates ? Je pense que non, je n’ai qu’un seul fichier page.php dans le dossier template.

        Par contre j’ai trouvé mon erreur concernant le script à changer dans la page.php, j’ai remplacé ‘page-sidebar’ par le nom que j’ai utilisé dans ‘id’ du fichier functions.php. Bref je n’utilisais pas le bon identifiant.

        Donc cela fonctionne pour une page.
        Par contre j’ai 3 pages ou j’aimerai faire apparaître leur sidebar personnalisée et qui sont programmées dans mon fichier functions.php, mais pour le fichier page.php je ne sais pas comment modifier le script

        <div <div id="sidebar">
        		<ul>
        		<?php dynamic_sidebar('location-sidebar'); ?>
        		</ul>
        		</div>

        pour que dans chacune de mes pages apparaisse sa sidebar personnalisée.

        Merci, Alain

  10. cartooni dit :

    tres important pour moi comme un novice dans le monde de webmastring

  11. laha24 dit :

    j’ai un petit probleme avec le side bar mais en generale ce fonctionne bien merci pour le tuto .

Laisser un commentaire

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pour affiché du code HTML, CSS, PHP, JAVASCRIPT utilisé le marqueur : [code][/code]