Francis Chouquet Graphiste Lettering

Customisation de WordPress: ajouter une colonne à votre sidebar

0

En ce moment, je travaille sur le futur thème de Fran6art.com. Je sais exactement ce que je veux et pour cela, j’ai choisi de partir du thème le plus utilisé sur WordPress, c’est-à-dire k2. Un des aspects du thème est qu’il sera en 3 colonnes, une avec le contenu, appelée « primary », et deux autres à droite, qui vont accueillir la sidebar. Le but est d’obtenir un résultat comme celui-ci, en terme d’organisation des colonnes.

Pour modifier un thème, il vous faut tout de même des connaissances en CSS et quelques unes en Php. Sans les connaissances en CSS, vous n’irez pas bien loin ! Si tel est le cas, je vous conseille notamment ces quelques livres ou encore ce site ou celui-ci qui m’ont pas mal aidé au début.

Idem, si vous ne souhaitez pas plonger les mains dans le cambouis, il existe beaucoup de thèmes tous prêts en 3 colonnes. Ici, on va se pencher sur la customisation de k2, mais le principe reste le même pour l’ensemble des thèmes pour WordPress.


Modification du fichier sidebar.php:

Pour ajouter une colonne dans votre sidebar, il va falloir aller toucher au code, aux « templates », et ça, principalement dans sidebar.php. Pour ceux qui ne sauraient pas où trouver ce fichier, il est sous Thèmes (ou Présentation) > Editeur de thèmes > Fichier « Panneau latéral ». Ce fichier comporte tout ce qui compose votre sidebar. Pour le moment, il n’y a qu’une colonne et elle se nomme « secondary« . On va donc rechercher le code et le <div> qui lui correspond:

<div class=?secondary?>

On va donc créer une nouvelle <div> à l’intérieur de celle-ci pour pouvoir avoir créer la première des 2 colonnes. On va, par exemple, lui donner le nom suivant:

<div class="leftsidebar">

On va y mettre tous les plugins et widgets que l’on souhaite voir apparaître. Vous pouvez très bien reprendre le contenu de « secondary » tout en pensant à en laisser pour l’autre colonne, histoire de pouvoir valider que tout fonctionne bien. Une fois la colonne « remplie », pensez à fermer la div (</div>).

On crée alors la deuxième colonne:

<div class="rightsidebar">

Remplissez une nouvelle fois la colonne avec ce que vous souhaitez y voir apparaître. Souvent, c’est dans cette colonne-là qu’on y mets les pubs par exemple, ou encore les blogrolls. Une fois la colonne remplie, vous fermez la div et vous vérifiez que la div de fin de « secondary » se trouve juste derrière. Vous devez avoir le type de schéma suivant:

<div class=?secondary?>

<div class="leftsidebar">
-- CONTENU DE LA COLONNE DE GAUCHE --
</div> (on ferme la leftsidebar)

<div class="rightsidebar">
-- CONTENU DE LA COLONNE DE DROITE --
</div> (on ferme la rightsidebar)

</div> (on ferme la secondary)

Modification des styles du blog (style.css):

Ensuite, il va falloir aller modifier le style de votre blog pour que les colonnes apparaissent comme vous le souhaitez, et surtout, qu’elles soient bien alignées. Allez ouvrir le fichier style.css. Là, il y a pas mal de changements à faire. En effet, votre blog passe de 2 à 3 colonnes. Vous allez devoir l’élargir pour accueillir tout le monde. Par exemple, la largeur de la page va passer à 995px, secondary à 450px et chaque colonne à 200px. Encore une fois, ce ne sont que des exemples, libre àvous de donner les dimensions que vous voulez. Ensuite, on va donner un peu de marge entre les colonnes pour aérer le tout. On va mettre un « float=left » pour la colonne de gauche et un « float=right » pour la colonne de droite. Comme base de travail, vous devriez arriver au code suivant pour les lignes concernées et à modifier:


#page {
background: white;
text-align: left;
margin: 0 auto;
padding: 20px 0 10px;
position: relative;
width: 995px;
border: 1px solid #ddd;
border-top: none;
}

#primary {
width: 500px;
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 30px;
display: inline;
}

.secondary {
font-size: 1em;
line-height: 1.5em;
padding: 10px 0;
margin: 0 25px 0px 560px;
width: 410px;
color: #666;
position: relative;
}

.leftsidebar {
font-size: 1em;
line-height: 1.5em;
padding: 10px 0;
margin: 0 20px 0 0;
width: 195px;
float: left;
color: #666;
position: relative;
}

.rightsidebar {
font-size: 1em;
line-height: 1.5em;
padding: 10px 0;
margin: 0 0 0 0;
width: 195px;
float: right;
color: #666;
position: relative;
}

Je le répète, ce ne sont que des valeurs à titre d'exemple. Il vous faudra ensuite jongler avec toutes ces données pour arriver au résultat que vous cherchez. Une fois que vous avez enregistré le tout, visualisez le blog et si tout a bien été paramétré, vous devriez avoir maintenant 2 colonnes pour former votre sidebar. Maintenant à vous d'être créatif !

Si vous utilisez un module pour gérer vos widgets:

On voit de plus en plus de thèmes qui sont "widgets ready". Ca veut dire qu'ils peuvent accueillir des widgets dans la sidebar, notamment grâce à un module, qui vous permet de gérer tout ça très facilement. Si vous avez modifié votre thème, ce module ne va pas reconnaître votre nouvelle colonne. Il va falloir aller "lui dire" en modifiant un autre fichier. Et ce fichier, c'est functions.php.

Tout ce qu'il va falloir faire, c'est modifier la commande "register_sidebar" qui permet au module de reconnaître le nombre de colonnes, et donc de sidebars. Les lignes à modifier vont être les suivantes:

// Sidebar registration for dynamic sidebars
if(function_exists('register_sidebar')) {
register_sidebar(array('before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>'));
}

Vous allez les remplacer par

// Sidebar registration for dynamic sidebars
if(function_exists('register_sidebar')) {
register_sidebars(2, array('before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>'));
}

Qu'est ce qui a changé ? Et bien, on a modifier la commande. On a mis une "register_sidebars" à la place de "register_sidebar". Et on y a ajouté une donnée, le nombre de sidebars, c'est-à-dire 2. Chez moi, ça fonctionne très bien. Mais j'ai lu ici qu'on pouvait tout de même avoir quelques soucis. Dans ces cas-là, gardez la commande "register_sidebar" et ajoutez-y uniquement les noms des colonnes:

// Sidebar registration for dynamic sidebars
if ( function_exists('register_sidebar') ) {
register_sidebar(array('name'=>'leftsidebar'));
register_sidebar(array('name'=>'rightsidebar'));
}

Mais bon, je n'ai pas essayé cette méthode, la première fonctionnant parfaitement bien chez moi. Une fois tout enregistré, retournez dans le module de gestion des widgets et vous avez désormais deux sidebars, "sidebar 1" et "sidebar 2" !

Les prochaines semaines, je devrais pas mal communiquer sur la customisation sur WordPress, étant à fond dedans en ce moment. Pour être tenu au courant des prochains articles, n'hésitez pas à vous abonner au blog, si ce n'est pas déjà fait ! 😀 Et n'hésitez pas à poser des questions. J'essaierai 'y répondre de mon mieux !

Fran6

16 Commentaires

  • Salut,

    très intérressant ton article. Je suis moi-même en train de bosser sur WordPress et j’y prend bcp de plaisir.

    J’avais une petite question à te poser. Lorsque j’effectue une recherche « index.php?tag=xxxx » par exemple il m’afiche une side bar avec la fonction recherche et un texte about (la page par défaut je suppose). Je n’ai pas la possibilité de paramétrer ça dans la customisation du thème. Pour info j’utilise le thème K2 classique.

    Dans K2 Sidebar Modules , partie Module’s option je ne vois que les pages suivante :
    Homepage
    Archives
    Single posts
    Search results
    Static pages
    Error page

    connaitrais-tu un moyen pour rajouter la page tag dans cette liste et ainsi avoir accès à la sélection des modules pour cette page ?

    Merci pour ton aide

  • Salut Denis,

    Je vais regarder ça ce soir et je te tiens au courant !

  • Salut Denis,

    Désolé pour le retard, mais je suis extrêmement débordé en ce moment….;-)
    Pour ce qui est du rajout de la page tag, il me semble que ça fonctionne bien sur ton blog, je me trompe ?? Sinon, je pense qu’il faut utiliser un widget Text et y insérer la ligne de code pour le nuage de tags. Par contre, je ne vois pas trop comment faire en sorte qu’elle apparaisse sur ta page « tags ». Peut-être faudrait-il créer une nouvelle page et la paramétrer comme tu le veux…A voir…

  • (function_exists(‘register_sidebar’)) {
    register_sidebars(………….

    ce ne serai pas plutôt :

    (function_exists(‘register_sidebarS’)) {
    register_sidebars(………….

    ?

    Sinon, sympa le tuto.

  • Encore un excellent article!

    Depuis que j’ai commencé à utiliser WP, ton site est une mine d’info que j’utilise très régulièrement.

    Merci pour toutes ces infos!

    Garry

  • Hello!

    Tout d’abord merci beaucoup pour la mine d’infos que tu nous propose!

    J’avais 2 questions à poser =

    1 – Je souhaite widgetiser mon footer mais je ne sais pas si je dois créer une 3ème colonne dans mon sidebar.php ou s’il existe une fonction afin de modifier directement le footer. (comme le theme « Dkret3 » utilisé sur le blog de Lise = « http://liseweb.fr/BLOG/ »)

    2 – Je souhaite aussi créer des menus en css basés sur les pages (parents et enfants) que je souhaite faire apparaitre en bas de mon header (comme le theme « Dkret3 » utilisé sur le blog de Lise = « ). Cependant je ne sais comment appeler l’intituler des pages parents, ni des pages enfants que ce soit au premier, deuxième ou 3ème niveau…

    Si tu as des sources dont je peux m’inspirer ou si tu as le temps (et dieu sait que c’est cher cette chose là lol ;-)) de faire un tuto je suis preneur. j’arrive a me dépatouiller entre les loop, le php, le css mais ce n’est pas facile de tout maitriser en mm temps qd on débute 🙂

    Bon courage et merci bcp pour tout ton travail.

    FABIEN

  • Oliv

    Salut j’ai suivi tes 23 tutos pour créer son thème et j’aimerais avoir 2 sidebars, 1 à droite et 1 à gauche. Mais elles sont toutes les 2 à droite à cause du float:right; pour la sidebar et du float:left; pour le contenu.

    Comment je peux faire pour avoir le contenu entre les 2 sidebars ?

    merci, et encore super tes tutos!!

  • Salut tout le monde !
    Déjà bravo fran6, je viens de créer mon blog (encore un peu en construction) et c’est grâce à tes tutos et tes conseils que j’y suis parvenu…
    Un petit commentaire pour apporter une précision à ton post et aussi répondre à la première question de Yinyin (désolé j’ai pas trop compris la deuxième…).

    Tout d’abord, j’ai essayé la première méthode mais je n’ai pas réussi, la deuxième marche à merveille, pour ma part, j’ai ceci:

    <?php
    if ( function_exists(‘register_sidebar’) )
    {
    register_sidebar(array(‘name’=>’leftsidebar’));
    register_sidebar(array(‘name’=>’rightsidebar’));
    register_sidebar(array(‘name’=>’footer’));
    }
    ?>

    Ca me fait donc 3 blocs widgetisables (leftsidebar, rightsidebar et le footer…)

    Par contre Fran6 a oublié de préciser comment tu les insères (parce que c’est bien de faire une fonction qui indique qu’il y a 3 blocs widgetisable, mais maintenant il faut indiquer sur les templates où sont ces blocs !)

    Tu obtiens donc ceci:

    //Dans la sidebar//

    //Dans ton footer//

    On peut aussi préciser que si vous souhaitez afficher un texte ou autre (une fonction php qui liste vos catégories ou autre…) qui s’affiche lorsqu’il n’y a pas de widget, écrivez le code entre les lignes et ; et que si à l’inverse vous voules affichez quelque chose au dessus ou en dessous de vos widget, vous pouvez écrire le code au dessus ou en dessous des deux lignes php.

    Bien sûr après il faut tout positionner en CSS, mais Fran6 a très bien expliqué la méthode 😉

    Bonne continuation !!

  • Ooops désolé, j’ai mal écrit la deuxième partie du message en laissant les balises html telles qu’elles…

    //Code de la sidebar//
    <div id= »leftsidebar>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘leftsidebar’) ) : ?>
    <?php endif; ?>
    </div>

    <div id= »rightsidebar »>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘rightsidebar’) ) : ?>
    <?php endif; ?>
    </div>

    //Code du footer//
    <div id= »footer »>
    <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer’) ) : ?>
    <?php endif; ?>
    </div>

    Je rappel que le code est simplifié…

  • Christophe

    Salut,

    Tout d’abord, un grand merci pour l’aide sur les sidebars, cela m’a bien aidé dans la construction de mes deux sidebars à droite de ma page.

    J’ai toutefois un petit problème. J’utilise WordPress 2.7 et K2 RC7.

    Voici le code que j’ai ajouté dans mon sidebar.php:

    J’ai adapté mon fichier style.css et mes colonnes sont toutes les deux bien placées à droite.

    Mais je ne parviens pas à y glisser des widgets via l’interface administrateur –> appearance –> widgets.

    J’ai ajouté ce code au fichier functions.php du répertoire K2:

    ’leftsidebar’));
    register_sidebar(array(’name’=>’rightsidebar’));
    }
    ?>

    Je dis bien « ajouté » car le fichier functions.php du répertoire K2 ne comportait aucune fonction « register_sidebar ». Mais malgré l’ajout de ce code, quand je suis dans l’onglet « widgets », je ne vois pas mes « rightsidebar » et « leftsidebar »…

    Pourrais-tu m’aider ? Je me sens un peu perdu O_o »

  • Christophe

    tiens, bizarre, mon code n’est pas apparu dans mon message précédent:

    sidebar.php:

    [code]

    [/code]

    functions.php

    [code]’leftsidebar’));
    register_sidebar(array(’name’=>’rightsidebar’));
    }
    ?>[/code]

  • Bonjour !
    Merci pour cet article, je commence à avoir pas mal de bannière, liens et autres, utiles pour le référencements et la navigation, mais c’est vrai que tout mettre dans une seule colonne devient très compliqué !
    Je vais essayer sur mon blog de test ton Tuto.
    Merci d’avance !
    (ps : j’ai cliqué sur tes pubs (je fais toujours ça pour « remercier » le blogeur si l’article me plait ! ^^)
    (ps 2 : utilises-tu le plugin doFollow ? -> dsl ça n’a rien à voir avec le sujet…)

  • Nanou

    Trés bon tuto !!
    Seulement, je n’ai pas réussis à mettre la sidebar à droite du site ! Elle est toujours en dessous du contenu je ne sais pas comment faire ?
    Merci d’avance

  • Constance

    Bonjour, super tutoriel, mais j’ai le même problème que Nanou, impossible de mettre la sidebar à droite, elle reste en dessous des posts (pourtant il y a la place), je ne comprend pas d’ou viens le problème, d’ou cela peut-il venir ?

    Merci merci pour le tutoriel, j’ai déjà suivi celui pour créer un thème et j’ai réussi sans aucun problème, ton tuto est vraiment simple et didactique !

Success, your comment is awaiting moderation.