Comment ajouter une colonne à son thème WordPress

Dernièrement en regardant mon blog,  je me suis dis qu’une colonne de plus à droite à côté de l’autre ne serait pas du luxe… Inutile de vous dire que ça s’est pas fait en 5 minutes, j’ai bien ramé…je me suis aidée de 3 tuto qui parlaient du sujet, mais rien à faire ça ne marchait pas…

Comment ajouter une colonne à son thème WordPress

Pour y arriver il a fallut que je lise et relise tous ces tuto et surtout que j’en comprenne les bases, pour pouvoir adapter tout ça à mon thème, car en fonction des thème pas mal de chose peuvent changer. J’ai bien cru que j’allais abandonner…mais c’est un mot qui me donne des boutons et qui m’empêche de dormir alors pas question lâcher l’affaire…

Dans ce tuto je vais essayer de vous donner le plus de détails possible afin de vous faciliter la tâche, voici l’adresse des 3 sites qui m’ont bien aidé, j’ai vraiment pioché dans les 3, car des fois certains tuto s’adressent à des utilisateurs affirmés…ce qui semble évident ne l’est pas toujours…

Je précise tout de même que le tuto qui va suivre, s’applique sur un blog qui a 2 colonnes, c’est à dire une page centrale #content et une colonne latérale sidebar, leftbar, rightbar etc… en fonction des thèmes vos colonnes peuvent se nommer différemment…

Le principal, c’est qu’elles portent le même nom dans votre feuille de style et dans les autres fichiers que nous allons modifier.

Si votre blog a 3 colonnes, une centrale et 2 colonnes de chaque côté et que vous voulez faire passer la colonne de gauche à droite, pour que les 2 colonnes soient côte à côte comme sur ce blog, il y a juste un terme à changer dans la feuille de style…

Ouvrez votre feuille de style, descendez sur la ligne qui gère votre colonne de gauche, elle peut se nommer l_sidebar ou sidebarleft ou encore leftbar, elle sera facile à reconnaitre…il y a jours le mot bar !

Changez le float: left; en float: right; et votre colonne ira se placer à droite…tout simplement.
Voilà…passons maintenant aux choses sérieuses !
Avant toute chose, faites une copie des fichiers que nous allons modifier…

Commençons par ajouter quelques blocs dans la feuille de style :

[pastacode « markup » manual= »%2Fwp-content%2Fthemes%2Fnom%20de%20votre%20theme%2Fstyle.css » message= » » highlight= » » provider= »manual »/]

Il n’est pas nécessaire d’ajouter tous ces blocs, car certains sont déjà dans votre feuille de style, par contre ce sont des blocs que nous allons modifier en changeant la valeur des  width…(pour éviter de s’embrouiller, ajoutez-les quand même vous pourrez toujours les supprimer pas la suite si ça fait doublon…)

[pastacode « css » manual= »%23main%C2%A0%7B%0Awidth%3A%201200px%3B%0A%7D%0A%23content%C2%A0%7B%0Awidth%3A725px%3B%0Afloat%3A%20left%3B%0A%7D%0A.sidebar%C2%A0%7B%0Awidth%3A%20400px%3B%0Afloat%3A%20right%3B%0A%7D%0A.sidebar-1%C2%A0%7B%0Awidth%3A200px%3B%0Afloat%3Aright%3B%0A%7D%0A.sidebar-2%C2%A0%7B%0Awidth%3A200px%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Le bloc #main, peut se nommer #page ou #container, il est déjà dans votre fds, il gère la taille la page de votre blog, qui contient vos colonnes centrale et latérale.

Le bloc #content c’est votre page des messages, la page centrale, ce bloc est déjà dans votre fds.

Les 3 blocs suivants (sidebar) gèrent vos colonnes latérales, un seul se trouve déjà dans votre fds, puisque vous avez une colonne latérale.

Collez les 5 blocs ci-dessus dans le haut de votre feuille de style, puis vérifier que ces nouveaux blocs portent bien le même nom que vos blocs déjà en place dans votre feuille de style, vous allez devoir modifier la taille des blocs, puisque vous allez ajouter un colonne…dans cet exemple j’ai du ajouter 200px (la taille de ma nouvelle colonne).

Si le bloc #main se nomme #container chez vous, changez le #main en #container dans le bloc que vous venez d’ajouter, même chose pour les colonnes…

Dans ma feuille de style avant les modifications, ma colonne de droite se nommait #sidebar, vu qu’il n’y en avait qu’une, désormais sidebar va devenir siderbar1 et ma nouvelle colonne sera sidebar2.

Maintenant que je veux en ajouter une deuxième, il faut bien les différencier…

La ligne de ma colonne actuelle va donc se transformer en :

[pastacode « css » manual= »%23sidebar1%C2%A0%7B%0Afloat%3A%20right%3B%0Apadding%3A%200px%2010px%2020px%200px%3B%0Awidth%3A%20200px%3B%0Acolor%3A%20%2300FFFF%3B%0Aoverflow%3A%20hidden%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Je vais devoir ajouter une seconde ligne pour ma nouvelle colonne qui se nommera #sidebar2 :

[pastacode « css » manual= »%23sidebar2%C2%A0%7B%0Afloat%3A%20right%3B%0Apadding%3A%200px%2010px%2020px%200px%3B%0Awidth%3A%20200px%3B%0Acolor%3A%20%2300FFFF%3B%0Aoverflow%3A%20hidden%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Pour déterminer la taille de votre #page, et celle de #content, vous devez additionner mes colonnes de façon à ce que tout ce petit monde rentre dans la Page de mon blog…(c’est comme un puzzle) : 200px de colonne1+ 200px de colonne2 + 725px de #content = 1125px de #page

Ma page fait 1200px, elle peut faire plus…mais pas moins, logique si vous faites du 38 vous rentrez dans un pantalon taille 40, mais pas dans un taille 36.

Bon, voilà pour la feuille de style, on y reviendra plus tard pour faire des ajustements…

Nous allons maintenant modifier le fichier sidebar.php celui là contient les colonnes et leur contenu.

Voilà à quoi il ressemblait avant de le modifier :

[pastacode « markup » manual= »%3Cdiv%20id%3D%22sidebar%22%3E%0A%3Cul%3E%0A%3C%3Fphp%20if%20(%20!function_exists(‘dynamic_sidebar’)%20%7C%7C%20!dynamic_sidebar()%20)%20%3A%20%3F%3E%0A%3C!%E2%80%93%20Si%20un%20Widget%20n%E2%80%99est%20pas%20activ%C3%A9%2C%20des%20codes%20s%E2%80%99affichent%20ici%20%E2%80%93%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Après modifications ça donne ça :

[pastacode « markup » manual= »%3Cdiv%20id%3D%22sidebar%22%3E%0A%3Cdiv%20id%3D%22sidebar1%22%3E%0A%3Cul%3E%0A%3C%3Fphp%20if%20(%20!function_exists(‘dynamic_sidebar’)%20%7C%7C%20!dynamic_sidebar()%20)%20%3A%20%3F%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22sidebar2%22%3E%0A%3Cul%3E%0A%3C%3Fphp%20if%20(%20!function_exists(‘dynamic_sidebar’)%20%7C%7C%20!dynamic_sidebar(‘sidebar2’)%20)%20%3A%20%3F%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Alors c’est la que ça se complique…

Le bloc « sidebar » contient les balises suivantes :

[pastacode « markup » manual= »%3Cul%3E%0A%3C%3Fphp%20if%20(%20!function_exists(‘dynamic_sidebar’)%20%7C%7C%20!dynamic_sidebar()%20)%20%3A%20%3F%3E%0A%3C!%E2%80%93%20Si%20un%20Widget%20n%E2%80%99est%20pas%20activ%C3%A9%2C%20des%20codes%20s%E2%80%99affichent%20ici%20%E2%80%93%3E%0A%3C!%E2%80%93%20Scripts%20ici%20%E2%80%93%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Ful%3E » message= » » highlight= » » provider= »manual »/]

Ces lignes permettent d’appeler les widgets dans une colonne, c’est une Zone Widgetisable…il est également possible d’ajouter des scripts directement entre ces balises sans passer pas l’administration WordPress.

Ajouter une colonne c’est facile…mais une fois fait, il faut rendre cette colonne Widgetisable, c’est à dire que dans votre espace d’administration WordPress dans l’onglet Apparence/Widgets il faut faire apparaitre cette nouvelle colonne de façon à pouvoir y ajouter des widgets…

Si vous observez bien le code ci-dessous (sidebar.php) vous remarquerez qu’une nouvelle colonne a été ajoutée  (sidebar2) c’est exactement le même code que pour la première colonne (sidebar1) sauf que dans la ligne de code qui appelle les widgets, il faut différencier le nom de la colonne et mettre dans les () le nom de notre nouvelle colonne.(sidebar2)  :

[pastacode « markup » manual= »%3Cdiv%20id%3D%22sidebar%22%3E%0A%3Cdiv%20id%3D%22sidebar1%22%3E%0A%3Cul%3E%0A%3C%3Fphp%20if%20(%20!function_exists(‘dynamic_sidebar’)%20%7C%7C%20!dynamic_sidebar()%20)%20%3A%20%3F%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22sidebar2%22%3E%0A%3Cul%3E%0A%3C%3Fphp%20if%20(%20!function_exists(‘dynamic_sidebar’)%20%7C%7C%20!dynamic_sidebar(‘sidebar2’)%20)%20%3A%20%3F%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]

Maintenant que votre nouvelle colonne est prête à recevoir les widgets, il faut modifier le fichier functions.php (de votre thème) :

[pastacode « markup » manual= »%2Fwp-content%2Fthemes%2Fnom%20de%20votre%20theme%2Ffunctions.php » message= » » highlight= » » provider= »manual »/]

Pour que votre nouvelle colonne apparaisse dans le menu défilant des Widgets de l’espace d’administration WordPress.

Ouvrez le fichier functions.php

Avant modifications j’avais ceci :

[pastacode « markup » manual= »%3C%3Fphp%0Aif%20(%20function_exists(%E2%80%99register_sidebar%E2%80%99)%20)%0Aregister_sidebar(array(%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B%0A%3F%3E » message= » » highlight= » » provider= »manual »/]

Après modifications :

[pastacode « markup » manual= »%3C%3Fphp%0Aif%20(%20function_exists(%E2%80%99register_sidebar%E2%80%99)%20)%0Aregister_sidebar(array(%E2%80%99name%E2%80%99%3D%3E%E2%80%99sidebar1%E2%80%B2%2C%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B%0Aregister_sidebar(array(%E2%80%99name%E2%80%99%3D%3E%E2%80%99sidebar2%E2%80%B2%2C%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B%0A%3F%3E » message= » » highlight= » » provider= »manual »/]

Comme vous pouvez le voir si vous observez bien ce qui a changé entre ces deux fichiers, j’ai ajouté un nouveau bloc de codes pour ma nouvelle colonne :

[pastacode « markup » manual= »register_sidebar(array(%E2%80%98name%E2%80%99%3D%3E%E2%80%99sidebar2%E2%80%B2%2C%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B » message= » » highlight= » » provider= »manual »/]

Mais il a fallu aussi donner un nom à ma première colonne pour la différencier de la nouvelle :

[pastacode « markup » manual= »register_sidebar(array(%E2%80%98name%E2%80%99%3D%3E%E2%80%99sidebar1%E2%80%B2%2C%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B » message= » » highlight= » » provider= »manual »/]

Donc pour résumer tout ça, les codes d’ouvertures qui contiennent mes 2 colonnes ne changent pas (en rouge) ma colonne 1 est en bleue, ma nouvelle colonne est en gris…et on ajoute un nom aux deux colonnes (en blanc)…

Ok ? vous êtes toujours là ?

[pastacode « markup » manual= »%3C%3Fphp%0Aif%20(%20function_exists(%E2%80%99register_sidebar%E2%80%99)%20)%0Aregister_sidebar(array(%E2%80%98name%E2%80%99%3D%3E%E2%80%99sidebar1%E2%80%B2%2C%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B%0Aregister_sidebar(array(%E2%80%98name%E2%80%99%3D%3E%E2%80%99sidebar2%E2%80%B2%2C%0A%E2%80%98before_widget%E2%80%99%20%3D%3E%20%E2%80%98%3Cli%20id%3D%E2%80%9D%251%24s%E2%80%9D%20class%3D%E2%80%9Dwidget%20%252%24s%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_widget%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fli%3E%E2%80%99%2C%0A%E2%80%98before_title%E2%80%99%20%3D%3E%20%E2%80%98%3Ch2%20class%3D%E2%80%9Dsidebartitle%E2%80%9D%3E%E2%80%99%2C%0A%E2%80%98after_title%E2%80%99%20%3D%3E%20%E2%80%98%3C%2Fh2%3E%E2%80%99%2C%0A))%3B%0A%3F%3E » message= » » highlight= » » provider= »manual »/]

On ferme de fichier functions.php en enregistrant les modifs…

Si tout va bien, vous devez avoir une nouvelle colonne sidebar2 et aussi votre ancienne colonne qui se nomme maintenant sidebar1, qui s’affiche dans les widgets :

Revenons à notre feuille de style, car si maintenant vous avez une nouvelle colonne avec des widgets dedans, ils n’ont aucune mise en forme, et s’affichent tout bizarre…normal il faut les mettre en forme en ajoutant un bloc sidebar2 dans notre feuille de style.

Votre première colonne (la siderbar1) s’appelle toujours #sidebar dans votre feuille de style…

[pastacode « css » manual= »%23sidebar%20%7B%0Afloat%3A%20right%3B%0Apadding%3A%200px%2010px%2020px%200px%3B%0Awidth%3A%20200px%3B%0Acolor%3A%20%2300FFFF%3B%0Aoverflow%3A%20hidden%3B%0A%7D%0A%23sidebar%20h2%2C%20%23sidebar%20.sidebartitle%7B%0Afont%3A12pt%20%E2%80%9CCentury%20gothic%E2%80%9D%2CLucida%20Sans%2C%20arial%3B%0Acolor%3A%20%2300FFFF%3B%0Abackground%3A%20%23000000%20url(images%2FCategories.png)%20%3B%0Amargin%3A%2020px%200px%200px%200px%3B%0Apadding%3A5px%200px%203px%2010px%3B%0Amargin-bottom%3A15px%3B%0Aletter-spacing%3A%200px%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

etc…

Maintenant qu’elle se nomme sidebar1 il faut donc lui ajouter un 1, sinon ça peux pas marcher…

Comme ceci :

[pastacode « css » manual= »%23sidebar1%C2%A0%7B%0Afloat%3A%20right%3B%0Apadding%3A%200px%2010px%2020px%200px%3B%0Awidth%3A%20200px%3B%0Acolor%3A%20%2300FFFF%3B%0Aoverflow%3A%20hidden%3B%0A%7D%0A%23sidebar1%C2%A0h2%2C%C2%A0%23sidebar1%C2%A0.sidebartitle%7B%0Afont%3A12pt%20%E2%80%9CCentury%20gothic%E2%80%9D%2CLucida%20Sans%2C%20arial%3B%0Acolor%3A%20%2300FFFF%3B%0Abackground%3A%20%23000000%20url(images%2FCategories.png)%20%3B%0Amargin%3A%2020px%200px%200px%200px%3B%0Apadding%3A5px%200px%203px%2010px%3B%0Amargin-bottom%3A15px%3B%0Aletter-spacing%3A%200px%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

etc…

Pareil pour notre deuxième colonne sidebar2, il faut ajouter le même bloc que pour notre première colonne et ajouter un 2, comme ceci :

[pastacode « css » manual= »%23sidebar2%C2%A0%7B%0Afloat%3A%20right%3B%0Apadding%3A%200px%2010px%2020px%200px%3B%0Awidth%3A%20200px%3B%0Acolor%3A%20%2300FFFF%3B%0Aoverflow%3A%20hidden%3B%0A%7D%0A%23sidebar2%C2%A0h2%2C%C2%A0%23sidebar2%C2%A0.sidebartitle%7B%0Afont%3A12pt%20%E2%80%9CCentury%20gothic%E2%80%9D%2CLucida%20Sans%2C%20arial%3B%0Acolor%3A%20%2300FFFF%3B%0Abackground%3A%20%23000000%20url(images%2FCategories.png)%20%3B%0Amargin%3A%2020px%200px%200px%200px%3B%0Apadding%3A5px%200px%203px%2010px%3B%0Amargin-bottom%3A15px%3B%0Aletter-spacing%3A%200px%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Bon, voilà…je suis pas certaine d’avoir réaliser ce tuto dans le bon ordre, mais normalement avec mes indications plus celles des autres blogs cités en début de tuto, vous devriez vous en sortir…

Patience, courage, détermination…enfin, surtout patience !

Si vous rencontrez un problème, faites moi signe, si je peux vous aider ça sera avec plaisir…