Afficher différentes sidebar dans votre thème 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.

0 0 votes
Évaluation de l'article
S’abonner
Notification pour
guest

15 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Rafa
Rafa
12 années il y a

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

Fred
Fred
12 années il y a

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
)

Max
Max
11 années il y a

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
Fred
Répondre à  Max
11 années il y a

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 :


&lt;?php get_sidebar(); ?&gt;
Corinne
11 années il y a

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?

Corinne
11 années il y a

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 🙂

al3ab
10 années il y a

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

العاب كرتون نتورك
10 années il y a

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.

kachalot
kachalot
10 années il y a

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.