Menu css et header

Statut : non résolu

Ce sujet contient 11 réponses, 3 participants et a été mis à jour pour la dernière fois par romk, le il y a 15 années et 6 mois.

12 sujets de 1 à 12 (sur un total de 12)

Auteur

Messages
10 avril 2009 à 14 h 49 min #469179
masseur
Membre

Padawan WordPress
51 contributions
Bonjour,

– Version de WordPress : 2.7

Problème(s) rencontré(s) :

Dans mon thème perso j’utilise un menu css composé comme ceci.
```
<li id="blog"><a alt="" title="" href="http://www.url.com/" class="on">Blog</a></li>
<li id="rub1"><a alt="" title="" href="http://www.url.com/" class="">Rubrique1</a></li>
<li id="contact"><a alt="" title="" href="http://www.url.com/" class="">Contact</a></li>
```
Le menu correspondant a la partir du site sur laquelle on est , possédera la class « on » pour le différencier.

Comment puis je faire un test de différenciation de l’endroit ou l’on se trouve dans le header.php afin d’attribuer la class on a la bonne rubrique du menu?
J’espère avoir était clair si ce n’est pas le cas dites le moi.

Merci par avance.
11 avril 2009 à 12 h 44 min #668635
romk
Participant

Padawan WordPress
60 contributions
Moi j’utilise un peu la même structure que toi et j’utilise ce procédé suivant ; (dans mon cas) je teste le nom du tag appellé mais tu peux aussi le faire avec le nom de la page.
```
class= »current_page_item »>
```
ce qui donne :
```
<li class="on"><a href="/ »>menu1</a></li> 
<li class="current_page_item »><a href="http://url.com">menu2</a></li>
<li class="current_page_item »><a href="http://url.com" target="blank">menu3</a></li>
```
j’espère avoir légèrement répondu à ta question. 🙂
11 avril 2009 à 12 h 52 min #668636

romk
Participant

Padawan WordPress
60 contributions

tu peux aller jeter un œil ici : http://codex.wordpress.org/Conditional_Tags pour voir la liste des conditions qui te permettront de tester.

12 avril 2009 à 10 h 53 min #668637
masseur
Membre

Padawan WordPress
51 contributions
Merci a vous deux pour ces précisions.

Une autre petite question.
J’aimerais que le menu blog soit en class= »on » que l’on soit sur la home, sur un article, sur une catégorie, un tag etc, en gros dès que l’on est sur une partie du blog le menu soit a on.

Il n’y a pas une fonction déjà présente pour cela ou alors je dois faire.
```
if(is_home() || is_single() ……){ echo  » class= »on » »;}
```
Merci
14 avril 2009 à 10 h 33 min #668638
romk
Participant

Padawan WordPress
60 contributions
Oui essaie comme ca, ou comme ca aussi :
```
<li class="on »><a href="http://url.com">home</a></li>
<li class="on »><a href="http://url.com">article</a></li>
```
14 avril 2009 à 10 h 49 min #668639

Gueblo
Participant

Maître WordPress
1058 contributions

Excuse-moi mais si ton menu comporte une liste de catégories et que le but est de faire en sorte que la catéggorie active soit mise en évidence (surlignée, soulignée etc…) pourquoi ne pas simplement utilisé les classes crées automatiquement par wp à savoir .current-cat et .current-cat-parent (pour les categories) ou .current_page_item et .current_page_parent (pour les pages) ?

je te renvoie à l’article de francis pour + de détails : http://www.fran6art.com/tutoriels/afficher-la-page-ou-la-categorie-actuelle-dans-un-menu-de-navigation/

14 avril 2009 à 11 h 13 min #668640
romk
Participant

Padawan WordPress
60 contributions
Pour ma part, j’ai un petit soucis au niveau de ma css pour le menu du header. Je n’arrive pas à changer la couleur de la police pour l’onglet en cours de visite.

J’aimerai utiliser un css différent pour la couleur de mes liens du header ‘en visite‘ et ‘non cliqué‘.

Seulement, les liens du header sont formatés par l’id ‘nav‘ et donc le formatage de la couleur des liens sous ‘current_page_item‘ n’est pas pris en compte car c’est le formatage de ‘nav‘ qui prend le dessus.
```
<ul id="nav">
<li class="current_page_item »><a href="/ » title= »lire le blog »>Le blog</a></li> 
</ul>
```
Je ne vois pas comment faire pour forcer mes liens à changer de couleur pour la css ‘current_page_item‘.

mes css :
```
#nav a, #nav a:visited {
	color: #f5f5f5;
}

.current_page_item, #home .on {
        color: #000000;
        background:#CCCCCC;
}
```
14 avril 2009 à 12 h 31 min #668641
Gueblo
Participant

Maître WordPress
1058 contributions
Tu peux cibler + précisémment le lien de l’onglet actif en utilisant ce code :
```
#nav li.current_page_item a {color:blue;}
```
a+
14 avril 2009 à 13 h 02 min #668642

romk
Participant

Padawan WordPress
60 contributions

Pfiuuu, ca avait l’air si évident…. j’avais pas essayé comme ca.

Merci beaucoup Gueblo. 🙂

22 avril 2009 à 8 h 52 min #668643

romk
Participant

Padawan WordPress
60 contributions

Bonjour, je reviens sur ce post car j’ai une question qui me turlupine…

J’ai résolu mon problème d’affichage pour les liens du header, seulement lorsque je passe en mode article seul, je souhaiterai que le lien du header correspondant (menu parent) s’affiche avec la même css.

Pour l’exemple : lorsque je clique sur ce lien depuis la home, le menu ‘Lire’ du header s’active.

C’est possible ?

22 avril 2009 à 10 h 11 min #668644

Gueblo
Participant

Maître WordPress
1058 contributions

Oui c’est possible. Avec le lien que je t’ai donné il y a 8 jours, tu pourras le faire (en cherchant un peu)
http://www.fran6art.com/tutoriels/afficher-la-page-ou-la-categorie-actuelle-dans-un-menu-de-navigation/

a+

2 septembre 2009 à 10 h 45 min #668645
romk
Participant

Padawan WordPress
60 contributions
Salut Gueblo,

j’ai bien regardé le principe de Fran6 mais comme je n’utilise pas la fonction ‘wp_list_categories’ pour afficher mes menus, je ne vois pas comment me servir de l’ID de la catégorie à laquelle appartient le post correspondant.

J’arrive bien à récupérer l’ID en utilisant les codes de Fran6, mais comment l’utiliser ?
```
$catsy = get_the_category();
$myCat = $catsy[0]->cat_ID;
```
J’aurais pensé que ca puisse fonctionner comme cela depuis le header :
```
<li class="current_page_item »>
```
Merci.
Auteur

Messages

12 sujets de 1 à 12 (sur un total de 12)

Le forum ‘Utilisation spécifique de WordPress’ est fermé à de nouveaux sujets et réponses.