Wordpress: Menu de catégories style “magazine”
Posté par jbj le 8 jan 2008 dans Wordpress • 42 commentairesEn ce moment, la mode semble être au thèmes estampillés Magazine. La particularité de ces thèmes est de présenter vos articles non pas de la manière classique, mais d’une façon rappellant un magazine, d’ou son nom. Après quelques recherches sur ces thèmes, je suis tombé sur le thème “Revolution” qui se révèle être particulièrement efficace, mais honteusement payant.
J’ai refait le menu Categories/Sous categories de ce thème, que je trouvais particulièrement sympa, et vous le fait partager. Gratuitement, comme il se doit 
Plutôt sympa, non? L’idée est de créer un menu déroulant avec vos catégories: Au survol de l’une ou l’autre, une liste apparaitra avec vos sous catégories.
Dans Wordpress
La première chose à faire est de créer plusieurs catégories et sous catégories. (si vous n’en avez pas déja) Il faudra ensuite classer vos posts dans vos catégories et sous catégories: En effet, si une catégorie ne compte aucun post, elle ne sera pas affichée même si elle existe.
Le code PHP
Editez votre fichier header.php (ou autre, tout dépends ou vous souhaiter voir le menu apparaitre) et insérez-y le code suivant:
<ul id="nav2" class="clearfloat">
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
Si vous actualisez votre site, vous devriez désormais voir des listes imbriquées montrant l’arborescence de vos catégories.
Il ne nous reste plus maintenant qu’à utiliser CSS afin de créer notre effet dropdown.
La CSS
Cette CSS est tiré de l’excellent thème Mimbo par Darren Hoyt et convient à merveille à ce que nous voulons faire. La voici:
#nav2 {
background:#777;
font-size:1.1em;
}
#nav2, #nav2 ul {
list-style: none;
line-height: 1;
}
#nav2 a ,#nav2 a:hover{
display: block;
text-decoration: none;
border:none;
}
#nav2 li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav2 a,#nav2 a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav2 a:hover, #nav2 a:active
{
background:#000;
text-decoration:none
}
/* Dropdown Menu */
#nav2 li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav2 li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav2 li li a,#nav2 li li a:visited{
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav2 li li a:hover,#nav2 li li a:active{
background:#000;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul{
left: auto;
}
a.main:hover{
background:none;
}
Et voilà le résultat! Pour la petite histoire, ce menu integrera mon prochain thème wordpress que j’espère proposer au téléchargement d’ici une ou deux semaines.
Une petite variante…
Suite aux nombreux commentaires sur cet article et une suggestion d’un lecteur, j’ai développé une variante de ce menu qui affichera vos page ainsi que vos catégories. Pour les intéréssés, ça se passe ici.
Bonne idée cet article, et surtout merci de faire ça gratos là ou d’autres font payer.
Les mecs qui ont créé Wordpress ne le font pas payer…alors rien de plus normal que de faire partager gratuitement ses idées et améliorations à la communauté.
Payer pour un thème unique, pourquoi pas. Payer pour un thème -même si il est bien- que tout le monde peut avoir…bof quoi.
vraiment sympa, tu devrais en faire un plugin WP!
+1 pour le plugin…j’ai envie de faire un blog mais je ne connais rien au code et tout celà me parait bien compliqué…o moins un plugin tu l’installe et hop ça marche
Pourquoi pas pour le plugin…J’en ai jamais créé et pour être honette j’ai pas la moindre idée de la marche à suivre. ça pourrait être l’ocasion
Merci pour ce tuto trés bien ficelé, va falloir que je réserve mon week-end pour le mettre en pratique.
Je fais parti des gars qui ont acheter, je comprends qu’il soit payant étant donné la qté et l’étendue des templates fournis avec ce “pack”
@sam:
Si je suis effectivement d’accord que le thème Revolution est super bien foutu, je ne comprends pas qu’il soit payant (à moins que l’auteur sot au chomage, ce qui m’étonnerais)
Wordpress est une appli de qualité aussi, et est gratuite
Je suis en train de finaliser mon thème “magazine”, qui sera probablement dispo en début de semaine prochaine. J’ai essayé de faire un truc aussi puissant que revolution, plus coloré et surtout…100% gratos.
[...] pour ranger tout celà proprement. Si vous partagez mon avis, je vous invite à aller lire cet article que j’avais écris il y quelques temps et qui vous permettra de créer un menu de navigation [...]
Hello, merci pour cette astuce
Par contre j’ai un problème sous Internet Explorer.
Le menu fonctionne mais si une catégorie possede des enfants, ceux ci ne s’affichent pas.
J’ai bien essayé d’intégrer un fichier HTC avec behavior dans le CSS mais cela ne fonctionne tjs pas.
Est ce que avec le code citer plus haut tout fonctionne chez tout le monde ?
Amicalement
Hello,
Je pense que ça marche nikel avec IE7. Pour ie6 par contre, tu as besoin d’un bout de javascript. Tu le trouvera en téléchargeant mon thème Wordpress “OpenBook”, c’est le fichier dropdowns.js, si ma mémoire est bonne.
Merci beaucoup, je vais tester ça
Je te tiens au courant
Merci pour cette article clair et net. Mais comment doit-on faire si l’on a besoin de créer un menu style magazine, non pas avec des catégories, mais avec des pages et des sous-pages, voire des sous sous pages ? (page1 parent > page1enfant > page1enfant de enfant…).
On doit sûrement remplacer la fonction wp_list_categories par wp_list_pages mais après ?
Merci de m’éclairer !
Enfin! Quelqu’un qui apporte une solution qui en font réjouir plusieurs
De mon côté, j’essais d’adapter ton code pour mes pages, car moi c’est les pages que j’ai en menu. J’ai seulement changé le terme “category” pour “page”. Mais comme je suis nulle en programmation, j’ai un message d’erreur en ligne 5.
Voici mon code :
<a href=”">Accueil
cat_ID) != “”) {
echo “”;
wp_list_pages(’orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of=’.$this_pages->cat_ID);
echo “”;
}
?>
Peux-tu m’aider à trouver mon erreur?
Merci beaucoup
Zut wp édite mon code
J’ai réussi en metant seulement ceci dans mon code
Merci pour l’inspiration jbj
@mecanografik: tu trouvera exactement ce que tu cherches à faire sur le thème “Mimbo” de Darren Hoyt
@Les_Singes: De rien
@Les_Singes: Attention, je suis passé sur ton blog et ça passe pas super sous Firefox…Pourquoi ne pas l’utiliser?
Hello,
Voila j’ai ajouté le code suivant et uploader le fichier dropdown.js dans le repertoire JS de mon theme
<script type=”text/javascript” src=”/js/dropdowns.js”>
Par contre les sous catégories ne fonctionnent tjs pas sous IE6
J’ai également un probleme de :HOVER, mes images (news, portfolio,…) fonctionnent au survol sur firefox mais pas sur IE (le lien fonctionne mais la main montrant que c’est un lien ne fonctionne pas et le HOVER n’affiche pas les images du dessous.
Aurai tu une solution ?
Sinon ton code m’aide pour chargé un fichier JAVASCRIPT pour ma galerie, je ne savais pas comment faire pour chargé un fichier selon le thème et ton code m’aide
MERCI
PS : ton thème est vraiment réussi, chapeau
Je suis curieux de savoir comment tu as fait pour rajouté un onglet dans l’administration et j’analyserai ton code plus en détail dés que j’aurai l’occazion.
Bonne continuation
IE6, c’est de la merde! J’ai plus ou moins réussi à faire fonctionner le menu déroulant sur cette bouse, mais c’est pas à 100% au point. Les gens n’ont qu’à utiliser un browser actuel…
Si tu veux savoir comment fonctionne l’onglet supplémentaire du thème, regarde le fichier functions.php
Et merci bcp pour tes compliments
De rien, il est vraiment complet et pratique, si je n’avais pas passé plusieurs jours a codé le mien j’aurai utilisé le tien
mais la autant continué sur ma lancée.
Par contre rien avoir avec le sujet mais je ne sais pas spécialement ou posé la question
Voila j’ai mon fichier gallery.php que j’appelle via la commande :
Et le morceau de code fessant appel au fichier FLASH :
<?php $phrase1=”;print $phrase1;?>
<param name=”allowFullScreen” value=”" />
<param name=”wmode” value=”" />
<embed quality=”best” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”750″ height=”450″ align=”middle” wmode=”" allowFullScreen=”">
Le fichier Javascript que j’avais besoin est désormais chargé grâce à :
AC_FL_RunContent = 0;
<script src=”/js/AC_RunActiveContent.js” language=”javascript”>
*Découvert grâce a ton code*
Mais le fichier l’animation flash n’est pas chargée. voir : http://www.vymdiesel.be/curiculum-vitae
Saurai tu m’aider ?
Le code as été formaté par ton blog si tu peu je peux t’envoyer les fichiers par mail ?
Je connais rien au Flash mais après un bref coup d’oeuil sur ton code source, je comprends pas trop pourquoi l’url de cet article y apparait plein de fois…
Par contre, cette demande est un peu un peu hors du sujet initial de l’article, peut-être devrais-je songer à ouvrir un forum?
Un forum peu être pas mal ^^ a toi de voir
Sinon bin je ne sais pas pour l’url, je n’ai rien fait de spécial lol
Pour le code, je ne sais pas trop comment faire appel au fichier FLASH vu que je ne connais pas le lien vers le fichier, un peu comme le Javascript (qui grâce a ton code fonctionne.)
Je cherche encore ^^ ne te casse pas la tête pour moi
je trouverai bien hihi
Merci
jbj : J’ai réglé le problème en ajoutant un margin et un padding à nav2 ul. Chouette
J’aime bien le thème Mimbo. Je crois que je vais m’en inspirer pour mon index. Je laisse mûrir.
Bonjour,
Je cherche à mettre mes pages en Menu (et les sous pages en sous menu) et à avoir dans ce menu, un onglet catégories avec la liste des catégories. Exemple :
Accueil | Page 1 -> Sous-Page1, … | Page X | Catégories -> catégorie 1, Catégorie 2, … |
Je n’arrive pas à faire cela et je dois dire que mon niveau en dev est très faible. Si quelqu’un a déjà fais ça ou peut m’aider, merci.
Ce script est vraiment génial, j’ai hâte qu’il fonctionne comme je le souhaite).
@Les_Singes: ça passe nikel ton menu sous Firefox maintenant. Bravo
Mimbo est très bien en effet, c’est d’ailleurs lui qui m’a inspiré le thème de mon blog, OpenBook, que tu peux télécharger si tu le souhaites.
@ZigZag: Intéressant comme idée et tout à fait réalisable. J’aurais du mal à te dire de tête comment procéder mais je me pencherais sur le sujet ce week-end, ça fera un bon article je pense
A suivre donc. En attendant, n’hésites pas à regarder les autres articles du blog
toujours pas de soluce pour IE qui refuse d’afficher le menu déroulant ???
chui qu’un pôv’ bidouilleur de WP mwââ
2e tentative d’intervention :
ça censure sec ou kwa ??!??
ya pa 1 prog man ki relève le défi de débugger le menu déroulant dans IE ??
c clair que ça délire.
je provok
mébon… c pour la bonne cause. : )
j’avais oublié (dans mon habituelle insouciance) de remercier l’auteur de ce site qui dépanne 1 max de personnes en déroute.
thanxxxxx
reaaalllly
Olivier: Tu sais, j’ai une vie en dehors du blog. Pourquoi aurais-je censurer ton message? J’étais simplement pas chez moi et tes commentaires attendaient sagement mon retour dans la file de modération.
Pour ceux qui veulent faire fonctionner le menu sous IE6: Le menu déroulant du thème mimbo fonctionne nickel sous IE6, peut-être pouvez vous en tirer quelque chose?
J’ai aucune idée de pourquoi le menu d’OpenBook ne marche pas sous ie6. Enfin bon, Il est , je pense, inutile de rappeller que ce navigateur, qui date de 2001, est aujourd’hui totalement obsolète. Mettre à jour vers IE7 ou mieux encore télécharger Firefox me semble être une bonne idée
Bonjour,
J’ai réussi à afficher mes pages dans le menu, mais j’ai toujours du mal à mettre les catégories de mon blog sous l’onglet blog…
Pour rappel, voici ce que j’essaie de faire : Accueil | Page 1 -> Sous-Page1, … | Page X | Blog -> catégorie 1, Catégorie 2, … |
Si quelqu’un à une idée pour faire ça…
Merci pour tout en tout cas.
@ZigZag: Tu trouvera ton bonheur ici.
[...] récent article “Menu de catégories style magazine“, que j’utilise notamment pour mon thème OpenBook, à intéressé de nombreux [...]
Salut,
J’ai paramétré le script (header et CSS), mais cela ne change rien à l’interface, qui reste sur un seul menu déroulant pour toutes les catégories.
En fait, ca s’affiche très mal…
Tu as bien intégré le tout vraisemblablement. Si ça s’affiche mal, c’est parceque tu dois faire quelques réglages (certaines positions dépendent du thème que tu utilise)
Déja, commence par rajouter:
margin-top:5px; dans #nav2 et
padding-left:0; dans #nav2 li ul: tu m’en dira des nouvelles
Après, il te reste à adapter les couleurs à ton thème, enlever les bordures que tu ne veux pas…Reviens poster ici si tu as besoin d’un coup de main
Merci, c’est vraiment complet, super.
Merci pour ton aide, et ta réactivité !!!!!!!!
Je vais te faire un backlink depuis mon blog (blog4web.com) quel intitulé souhaites-tu ?
Merci
Merci à toi pourta reconaissance, ça fait plaisir
Comme intitulé, Lyxia.org c’est parfait.
De même, si le coeur t’en dit, tu peux également rajouter http://www.pixiorama.com
Bon blogging
Hello,
Je mets ton lien en place sur le blog.
Par contre, sur mon blog, le pavé de recherche “tombe” (regarde à droite). Comment le redresser pour ne pas qu’il tombe ?
Merci !
Salut David, pour ton champ de recherche, je pense que demettre margin-top:-25px; à #searchform réglerait ton problème.
Merci pour le lien!