[Résolu] Thème default Kubric – Création d’un menu dynamique (Créer un compte)

  • Statut : non résolu
2 sujets de 1 à 2 (sur un total de 2)
  • Auteur
    Messages
  • #451381
    hpsounds
    Participant
    Initié WordPress
    4 contributions

    Bonjour à toutes et à tous,

    Ma configuration:
    Version de WordPress : 2.1.2
    Thème utilisé : Default Kubrick + quelques adaptations graphiques
    Plugins en place :
    – Akismet
    – Audio player
    – Dagon Design Sitemap Generator
    – Google (XML) Sitemaps
    – Multi Column Link List
    – Page Links To
    – Secure and Accessible PHP Contact Form
    – Share This
    – Sidebar Modules
    – WordPress Download Monitor
    Nom de l’hebergeur : OVH
    Adresse du site : http://www.hpsounds.com/

    Ma question :
    Je suis en train de créer un menu dynamique dans le header du thème par défault de WordPress (Kubrick). J’ai donc ajouté quelques lignes de code PHP afin que WordPress génère automatiquement la liste de toutes mes pages parents. Celle qui est active a comme identificateur de CSS current_page_item si c’est une page sans enfant, et current_page_parent si c’est une page avec enfant.

    Voici le code PHP du header :

    <div id="head_menu">
    <div class="main_menu_hps">
    	<ul id="menu_hps">
    		<?php if (is_home() OR is_single() OR is_category() OR is_date()): ?>
    			<li class="current_page_item"><a href="http://www.hpsounds.com/nouvelles/">Nouvelles</a></li>
    			<?php wp_list_pages('title_li=&depth=1&exclude=2,3&sort_column=menu_order'); ?>
    		<?php else : ?>
    			<?php wp_list_pages('title_li=&depth=1&exclude=2&sort_column=menu_order'); ?>
    		<?php endif; ?> 
    	</ul>

    J’exclus systématiquement la page 2 qui est la page d’accueil de mon site et la page 3 qui est celle où le fil de mon blog se déroule (cf. nouvelles fonctionnalités de WordPress OPTION DE LECTURE -> PAGE D’ACCUEIL). Le code PHP fonctionne parfaitement.

    Graphiquement, je souhaite l’interaction suivante sur le menu :
    survol de souris : trait de soulignement (border-bottom 3px) de la taille de l’intitulé du menu (NOUVELLES, PHOTOS, MOYENS, …);
    page active : trait de soulignement (border-bottom 3px) de la taille de l’intitulé actif (NOUVELLES pour le fil du Blog).

    Là où je sèche lamentablement, c’est au niveau du CSS de mon menu dont voici le code :

    .main_menu_hps { padding: 2px 0px 0px 20px; }
    
    #head_menu
    {
    	text-align: left;
    	margin: -7px auto -5px auto;
    	width: 960px;
    	height: 30px;
    }
    
    #menu_hps
    {
    	font-size: 10px;
    	color: #06C;
    	font-family: verdana, sans-serif;
    	font-weight: bold;
    	height: 22px;
    	list-style-type: none;
    	text-decoration: none;
    	margin-left: -40px;
    	font-style: normal;
    	font-variant: normal;
    	text-transform: lowercase;
    }
    
    #menu_hps li
    {
    	float: left;
    	height: 22px;
    	line-height: 22px;
    	padding: 0 12px 0 12px;
    }
    
    #menu_hps li a, #menu_hps li a:visited
    {
    	display: block;
    }
    
    #menu_hps li a:hover
    {
    	/* needed to trigger IE */
    	/*background: #efe;*/
    	color: #06C;
    	text-decoration: none;
    	/*padding: 0 12px 0 12px;*/
    	border-bottom: #06C;
    	border-width: 0px 0px 3px 0px;
    	border-style: none none solid none;
    }
    
    #menu_hps li a:active
    {
    	border: 0;/* needed to trigger IE */
    	display: block;
    	/*background-color: #eee;*/
    	/*padding: 0 12px 0 12px;*/
    	border-bottom: #06C;
    	border-width: 0px 0px 3px 0px;
    	border-style: none none solid none;
    }
    
    #menu_hps li.current_page_parent {
    	background-color:#eee;
    	color:#000;
    }
    
    #menu_hps .current_page_item
    {
    	background-color: #eee;
    	color: #F00;
    	background-position:bottom left;
    	border-bottom: #06C;
    	border-width: 0px 0px 3px 0px;
    	border-style: none none solid none;
    }

    Si je désactive le soulignement pour current_page_item, cela fonctionne (le fond gris n’est là que comme repère visuel). Quand j’active le soulignement pour current_page_item, celui-ci est plus large que la taille de l’intitulé du menu et cela décale le contenu qui se trouve en dessous.

    Je ne sais pas comment résoudre ce problème ?

    Nota : current_page_item et current_page_parent auront en définitif les mêmes caractéristiques CSS.

    Je vous remercie d’avance pour votre aide.

    Hédi Kairouannais

    #596880
    hpsounds
    Participant
    Initié WordPress
    4 contributions

    Bonjour à toutes et à tous,

    Je crois que j’ai résolue mon problème. Je vais donc en faire un résumé afin que cela puisse servir à d’autres qui auraient le même genre de menu à mettre en place.

    Ressources web utilisées
    http://codex.wordpress.org/Conditional_Tags
    http://codex.wordpress.org/Dynamic_Menu_Highlighting
    http://www.cssplay.co.uk/

    Code PHP à ajouter au fichier HEADER.PHP de votre thème

    <!--HPS MAIN MENU-->
    <div id="head_menu">
    <div class="main_menu_hps">
    	<ul id="menu_hps">
    		
    			<li class="current_page_item"><a href="http://www.hpsounds.com/nouvelles/">Nouvelles</a></li>
    			
    		
    			
    		 
    	</ul>

    Paramétrage de WordPress :

    – Aller dans la partie ADMINISTRATION de votre Blogsite WordPress;
    – Choissisez l’onglet OPTIONS -> LECTURE;
    – Définissez ici la Page d’Accueil et la page des Articles (fil des articles du Blog – dans mon cas, ACCUEIL -> Page ID=2, NOUVELLES -> Page ID=3).

    Avec ce réglage, quand vous taperez l’adresse de votre site (http://www.hpsounds.com/), vous tomberez sur la page d’Accueil (normal !) et vos articles apparaitront dans la page Nouvelles.

    Explication :

    Le script PHP permet de lister les pages existantes et publiées de votre Blog. Les pages sont listées par ordre menu_order en excluant systématiquement la page d’Accueil exclude=2 (cf. codex WordPress).

    Si nous naviguons parmi les articles, soit sur la page des Nouvelles ( is_home() ), soit sur un seul article ( is_single() ), soit dans les catégories ( is_category() ) ou soit dans les archives par date ( is_date() ), l’intitulé Nouvelles du menu doit être souligné :

    Vérification des conditions :

    Formatage de l’intitulé Nouvelles :

    <li class="current_page_item"><a href="http://www.hpsounds.com/nouvelles/">Nouvelles</a></li>

    Listage des autres pages de votre site (uniquement les pages parents (depth=1), sauf la page Accueil et la page Nouvelles listée juste avant) :

    Si nous naviguons sur les autres pages de notre site, la page active sera automatiquement identifiée par Worpdress par l’identificateur de CSS current_page_item pour une page sans enfant ou current_page_parent.

    
    			
    		

    Code CSS à ajouter au fichier STYLE.CSS de votre thème

    /*————————————————————————-*/
    /* HPS CSS for MAIN MENU */
    
    .main_menu_hps { padding: 2px 0px 0px 20px; }
    
    #head_menu
    {
    	text-align: left;
    	margin: -7px auto -5px auto;
    	width: 960px;
    	height: 30px;
    }
    
    #menu_hps
    {
    	font-size: 10px;
    	color: #06C;
    	font-family: verdana, sans-serif;
    	font-weight: bold;
    	height: 22px;
    	list-style-type: none;
    	text-decoration: none;
    	margin-left: -40px;
    	font-style: normal;
    	font-variant: normal;
    	text-transform: lowercase;
    }
    
    #menu_hps li
    {
    	float: left;
    	height: 22px;
    	line-height: 22px;
    	padding: 0 12px 0 12px;
    }
    
    #menu_hps li a, #menu_hps li a:visited
    {
    	display: block;
    }
    
    #menu_hps li a:hover
    {
    	border: 0;/* needed to trigger IE */
    	text-decoration: none;
    	display: block;
    	border-bottom: #06C;
    	border-width: 0px 0px 3px 0px;
    	border-style: none none solid none;
    }
    
    #menu_hps li a:active
    {
    	border: 0;/* needed to trigger IE */
    	display: block;
    	border-bottom: #06C;
    	border-width: 0px 0px 3px 0px;
    	border-style: none none solid none;
    }
    
    #menu_hps li.current_page_item, #menu_hps li.current_page_parent
    {
    	float: left;
    	height: 22px;
    	line-height: 22px;
    	padding: 0 12px 0 12px;
    }
    
    #menu_hps li.current_page_item a, #menu_hps li.current_page_parent a
    {	
    	border: 0;/* needed to trigger IE */
    	text-decoration: none;
    	display: block;
    	border-bottom: #06C;
    	border-width: 0px 0px 3px 0px;
    	border-style: none none solid none;
    }
    
    /* HPS CSS for MAIN MENU */
    /*————————————————————————-*/

    Voilà, l’explication détaillée est finie. Si vous y avez décelé des incohérences ou souhaitez faire des remarques, n’hésitez pas !

    Bon Worpress !!!

    Hédi


    EDIT : Vous pouvez retrouver ce tutorial sur mon site web http://www.hpsounds.com/2007/04/03/wordpress-creation-menu-dynamique/.

2 sujets de 1 à 2 (sur un total de 2)
  • Vous devez être connecté pour répondre à ce sujet.