Installez facilement un système d’onglets sur votre blog

Comme promis depuis plusieurs semaines, voici un petit tutoriel pour installer facilement DOMtab sur votre blog. Alors qu’est-ce donc que ce DOMtab ?

En fait, DOMtab est un Javascript qui vous permet de gérer des onglets sur les pages de votre blog sans avoir à recharger celle-ci. Sur les blogs, on l’utilise principalement pour la sidebar, pour diffuser différentes listes d’articles comme les préférés, les derniers parus ou encore ceux qui ont eu le plus de commentaires par exemple. L’utilité de ce genre de javascript réside dans le fait de placer plusieurs informations sur une même surface et donc de gagner de la place dans la sidebar. Un des exemples le plus connu de l’utilisation de DOMtab est sûrement le blog de Darren Rowse:

domtab onglets blog wordpress

Le point négatif des Javascript est souvent leur poids qui ralentissent le temps de chargement d’une page web. Ici le script est léger puisqu’il ne fait que 12ko. Ensuite, tout dépend de ce que vous mettrez dans chacun des onglets.

1. Téléchargez le script

Tout d’abord, vous allez devoir vous rendre sur le site du script pour le télécharger. Vous récupérez ainsi 3 fichiers:



domtab.css
est la feuille de style du script que vous viendrez modifier pour lui donner l’allure que vous souhaitez.
domtab.js est le fichier du script.
index.html reprend le contenu de la page web du script.

Vous allez placer ces fichiers dans le dossier de votre thème. En effet, ce système d’onglets est directement lié au thème choisi. Il est donc normal et préférable que les fichiers soient au sein de ce même dossier. On va donc placer un dossier “domtab” directement sous le dossier de votre thème, avec ces 3 fichiers à l’intérieur.

2. Installez le script

Personnellement, je vous conseille fortement de tester et de customiser votre système d’onglets avant de le mettre directement sur votre blog. Une bonne occasion pour utiliser le plugin dont je vous ai parlé il y a quelques semaines ! ;-)

Ici, il va falloir tout d’abord insérer une ligne de script dans le “head” de votre blog ou sur la page web de test qui va appeler le script de DOMtab. Sur le site, on vous propose d’installer ce script:

1
<script type="text/javascript" src="domtab.js"></script>

Nous, nous allons utiliser une URL différente pour que WordPress comprenne où aller chercher le script. On va donc insérer le script suivant dans le header de notre thème:

1
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab/domtab.js"></script>

3. Installez le code HTML

Maintenant, il vous faut insérer le code HTML du script où vous souhaitez le voir apparaître sur votre blog. Regardons d’un peu plus près de quoi est composé ce code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Test 1</a></li>
<li><a href="#t2">Test 2</a></li>
[... and so on ...]
</ul>
<div>
<h2><a name="t1" id="t1">Proof 1</a></h2>
<p>Test to prove that more than one menu is possible</p>
<p><a href="#top">back to menu</a></p>
</div>
<div>
<h2><a name="t2" id="t2">Proof 2</a></h2>
<p>Test to prove that more than one menu is possible</p>
<p><a href="#top">back to menu</a></p>
</div>
[... and so on ...]
</div>

En fait, Domtab reprend un système classique de liste “ul” avec un nombre de lignes correspondant au nombre d’onglets. Le nom de chacun de ses onglets est indiqué dans le “href” qui est réutilisé plus bas pour chaque contenu de ces onglets. Ainsi “t1″ est le premier onglet, “t2″ le suivant et ainsi de suite… Les h2 correspondent aux titres que vous pouvez insérer dans le contenu de chaque onglet. Les titres des onglets sont eux au niveau de la classe “domtabs”. Ensuite, vous mettez ce que vous voulez comme contenu. Ici, ils sont représentés par des paragraphes. Le tout est “enveloppé” par une classe “domtab”.

Comme vous pouvez le constater, il n’est pas très difficile de manipuler ce code et de le personnaliser pour correpondre à vos besoins.

4. Personnalisez la feuille de style CSS

Comme vous avez pu le remarquer plus haut, une feuille de style de base vous est fournie avec le script. Le résultat obtenu est certes très moche mais il vous donne déjà des bases pour la customisation de vos onglets. Vous pouvez très n’utiliser que des couleurs de fonds et des bordures, ou encore utiliser des images. Attention toutefois à ne pas trop alourdir le tout et le temps de chargement. Les images oui, mais avec modération ! ;-)

Vous trouverez facilement des exemples sur Internet comme ces menus d’Explodingboy, ou encore ce système simple de SimpleBits:

css tabs wordpress
Vous n’avez qu’à taper “CSS Tabs” ou “CSS menu navigation” sur Google pour trouver la tonne de références à ce niveau-là.

Voilà, c’est pas plus compliqué que ça !! Personnellement, je vais en installer prochainement sur ce blog pour aérer un peu la sidebar. On verra bien si l’incidence sur le nombre de pages vues change, en positif ou en négatif… En attendant, n’hésitez pas à venir me dire si vous avez installé ce système pour que j’aille voir ce que ça donne !! ;-)

24 Commentaires pour “Installez facilement un système d’onglets sur votre blog”


  1. 1

    Solution que j’ai voulu mettre en place sur mon blog il y a quelques mois mais mon thème merdouille pas mal avec le Js, donc j’ai zappé :)
    Mais c’est clair que si on regarde par exemple les thème magasine ça rend bien et c’est propre comme système ;)

  2. 2

    Lors d’essais au boulot, j’ai fini par renoncer à ce script, dans une variation sur le thème Mimbo. A cause de très désagréables effets de FOUC : les onglets commençaient par s’afficher les uns sous les autres avant de se mettre en place correctement. Ni très joli, ni très propre, tout ça.
    As-tu expérimenté quelque désagrément dans ce genre-là ?

  3. 3

    J’ai fait plusieurs essais avec ce script qui se sont avérés concluants mais il faut bien gérer les CSS. C’est le plus délicat parce qu’il faut bien différencier les CSS de Domtab des autres. Donc, j’ai viré la plupart du contenu de la feuille de style de DOmtab pour mettre mes propres balises et tout est rentré dans l’ordre. Mais comme toi Pierre K. j’ai eu quelques soucis de superposition dûs entièrement aux CSS…

  4. 4

    Pile poil ce qu’il va me falloir pour un nouveau design. Merci francis ;)

  5. 5

    J’avais testé un truc similaire avec prototype mais c’était plutôt lourd.
    @Guillaume: Tu vas encore changer de design ???? Pfff tu n’arrêtes pas :) Moi je l’aime bien celui là ^^

  6. 6

    dès que je sais quoi mettre dedans, je l’utilise pour tester. mais j’ai peur que bon nombre de lecteurs passent à côté et ne remarque pas les onglets.

  7. 7

    starkhay > C’est toujours un peu le même problème mais de l’autre côté, je pense que si ça rend ta sidebar plus claire, ça va inciter le visiteur à cliquer… De toute façon, on est plusieurs à bientôt tester le truc, on pourra en faire un retour soit positif, soit négatif…

    Guillaume > Tu modifies encore ton design ?? Passage sur WordPress peut-être ?? :mrgreen: ok, je sors…. ;-)

  8. 8

    Merci c’est vraiment très sympa ;)

    J’ai l’impression d’avoir vu ça sur 2803 et ça fonctionne bien!

  9. 9

    Trop bien je cherchais exactement ca !
    Merci Francis

  10. 10

    Article intéressant sur les fameux onglets qui posent un vrai dilemm pour les webmasters: à savoir s’il vaut mieux condenser certaines news à travers des onglets ( thème wordpress magazine) ou préférer une page d’accueil toute en longueur avec les articles les uns à la suite des autres.

  11. 11

    Piero > tout dépend de ce que tu veux en faire et où tu veux mettre ces onglets. Personnellement, je pense qu’ils peuvent être utile sur la page d’accueil pour insérer des articles en fonction des catégories par exemple, mais il peut également être très intéressant pour la sidebar des pages d’articles pour diminuer le contenu de cette sidebar qui est parfois trop condensé…

  12. 12

    On peut aussi utiliser jquery et ses UI Tabs” : http://docs.jquery.com/UI/Tabs qui sont également très simple d’utilisation et qui propose en plus encore en plus quelques options sympatiques au niveau des transition au passage d’une tab à l’autre (jquery, quoi ;) )

  13. 13

    Bruno > Effectivement, c’est également une TRES BONNE alternative. Merci pour l’info. J’ai essayé également d’autres solutions du même type mais je n’aimais pas… Je vais essayer celle-là !! ;-)

  14. 14

    Et pourquoi pas utiliser un systeme de tab avec une librairie deja disponible dans wordpress?
    C’est pas comme si ca manquait!!! On y retrouve prototype et scriptaculous (avec quelques extensions), et pas besoin de modifier le header, une petite ligne de commande:

    ou encore

    Pour plus d’info, faut aller dans le codex !

    http://codex.wordpress.org/Fun.....eue_script

  15. 15

    Mat_> tout simplement parce qu’aujourd’hui, il y a plein de possibilités pour faire des tabs et que justement, on n’est pas obligé de se cantonner avec ce qui existe déjà sur WordPress. Mais le truc c’est que j’ai utilisé le système d’onglets le plus léger et le plus simple à installer. Voilà pourquoi ! ;-)

  16. 16

    Prototype + Scriptaculous, ça frise l’obésité maladive. Dans les versions “officielles” non compactées, on dépasse allégrement les 100 ko de script à télécharger.
    La solution que propose Francis est vraiment plus raisonnable, et il a bien raison de faire ce choix.

  17. 17

    Pierre K> Ca frise l’obésité ? Les librairies ne sont pas chargées si tu n’en as pas besoin. Et puis, lorsque tu commences à ajouter des plugins sur ton blog (mêmes les plus utiles), eux aussi font appel à des librairies deja dans WP. Elles sont donc appellées dans le header (il suffit de regarder dans son code source après avoir activé ses plugins).
    Par exemple ici, fran6 utilise mootools, utilisé avec slimbox.

    Je ne prêche pas la parole WP, “tout est bon dans wp”, loin de là. C’est juste que rajouter quantité de librairies dans son site ralentit probablement le tout.

    Fran6> J’ai tout a fait compris ton point de vue, et je vais aller regarder de plus près domtabs. Je disais ça justement pour parler d’autres outils qui sont disponibles.

  18. 18

    Pas des soucis Mat_ , je ne dis pas détenir la vérité !! :mrgreen: et je ne suis pas un pro de ce genre de script non plus… Ma démarche a été simple. J’ai cherché le script le plus facile à installer, à customiser et le plus léger possible. Et pour ce qui est de Mootools, il me semble que c’est pour cForms, non ? Faut que je vérifie… D’ailleurs, si je pouvais m’en passer…

  19. 19

    A partir du moment où tu mets un lien vers un fichier .js dans ton header, la librairie est chargée sur chaque page de ton blog, réellement utilisée ou pas. Sauf à introduire une condition dans le style is_home.
    La Mootools utilisée par Francis est vraiment beaucoup plus légère que le duo Protoype + Scriptaculous. Historiquement, Prototype était le premier framework js largement répandu, mais en déclin aujourd’hui à cause de sa taille et de sa non-modularité.

  20. 20

    Bonjour, j’essaye domtab et j’ai un petit probleme avec la feuille css qui semble ne pas être prise en charge. j’ai pourtant insérer ”
    dans mon head, mais quand j’y fait des changements,rien ne change, pouvezvous m’aider à résoudre cela? merci

  1. 1 Hot Links for 12/01/08 | Nowhere Else 2.0 Pingback on 12 jan, 2008 à 5:35
  2. 2 Liens pêle-mêle : tv, wordpress, ubuntu » daria blogue Pingback on 18 jan, 2008 à 21:52
  3. 3 DyBlog Trackback on 11 fév, 2008 à 19:36

Laisser un commentaire