Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu déroulant | Création thème wordpress

Menu déroulant ne fonctionne pas

    29 septembre 2021 à 20:18:09

    Bonjour

    Je suis actuellement en train de développer un thème wordpress, mais je rencontre quelque difficulté pour la création de mon menu déroulant. 

    J'utilise pour mon menu bootstrap donc j'ai un walker wp-bootstrap-navwalker pour gérer correctement mon menu 

    Cependant lorsque je créée un menu avec un menu déroulant sur wordpress-admin, il n'affiche que la flèche d'indication de menu déroulant mais ne fonctionne pas je vous joint le code ci dessous de mes fichiers ci-dessous. 

    header.php (pour le menu):

    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
        
        <?php wp_body_open(); ?>
        
        
        
        <nav class="navbar  navbar-expand-lg menu ">  
            
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"><img class="hamburger"src="<?php echo get_template_directory_uri(); ?>/img/menu.svg" alt=""></span>
              </button>
    
              <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                
                <div style="margin-right: 25px;">
                  <a class="navbar" href="<?php echo home_url( '/' ); ?>"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/img/logo.jpg" alt="logo_jdt"></a>
                </div>
                
                
                  <?php wp_nav_menu([
                    'theme_location'    => 'header',
                    'depth'             => 2,
                    'container'         => false,
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker(),
                    ]) ?>
    
    
                  <div style="margin-left: 10px; padding-bottom: 5px; float: left;text-decoration: none;">
                  <ul style="text-decoration: none;">
                    <li class="nav-item icon">
                      <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" alt="" width="20px" height="20px"></a>
                    </li>
                    <li class="nav-item icon">
                      <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/jardins-remarquables.jpg" alt="" width="20px" height="20px"></a>
                    </li>
                    <li class="nav-item icon">
                      <a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/facebook.png" alt="" width="20px" height="20px"></a>
                    </li>
                  </ul>  
                  </div>
              </div>
        </nav>

    Le fichier functions.php:

    <?php 
    
    
    function select_css_js(){
    
        // Chargement de style.css
        wp_enqueue_style( 'jdt-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    
        // Chargemement Font Google
        wp_enqueue_style( 'jdt_font_nunito', 'https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap', array(), null);
    
        // Chargement main.js
        //wp_enqueue_script( 'select_skip_link', get_theme_file_uri( '/js/main.js' ), array(), null, true ); // true pour en pied de page
    
        // Chargement de Bootstrap JQUERY etc
        wp_enqueue_style('', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css');
        wp_enqueue_script('jquery');
        wp_enqueue_script('popper', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', array('jquery'), 1, true);
        wp_enqueue_script('boostrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js', array('jquery', 'popper'), 1, true);
    }
    
    function jdt_supports()
    {
        // Génère le menu
        register_nav_menu('header', 'En tête du menu');
    
        // On ajoute une classe php permettant de gérer les menus Bootstrap
        require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
    
    
        // Ajouter la prise en charge des images mises en avant
        add_theme_support( 'post-thumbnails' );
        // Ajouter automatiquement le titre du site dans l'en-tête du site
        add_theme_support( 'title-tag' );
    
    }
    add_action('after_setup_theme', 'jdt_supports');
    // Génère les Scripts et Styles CSS
    add_action( 'wp_enqueue_scripts', 'select_css_js' );

    style.css : 

    /* Bootstrap */
    .selector-for-some-widget {
        box-sizing: content-box;
    }
    
    /* Menu */
    .logo{
        width: 200px;
        height: 150px;
    }
    .hamburger{
        height: 30px;
        width: 30px;
    }
    .navbar{
        margin-top: 10px;
    }
    ul li a{
        padding-top:  25px;
    }
    ul li a, ul li a:visited {
        color: #111;
    }
    
    ul li a:hover, ul li a:active {
        color: #0033ff;
    }
    
    ul li.active a {
        color: #111;
    }
    .nav-item{
        letter-spacing: 0.075em;
        padding-left: 20px;
        font-weight: 800;
        font-family: 'Nunito Sans';
        text-decoration: none;
        color: #111;
    }

    Enfin le code brut de wordpress pour l'affichage:

    <!DOCTYPE html>
    <html lang="fr-FR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
       
        <title>Les Jardins du temps</title>
        <title>Jardins du Temps &#8211; Un site utilisant WordPress</title>
    <meta name='robots' content='noindex, nofollow' />
    <link rel='dns-prefetch' href='//cdn.jsdelivr.net' />
    <link rel='dns-prefetch' href='//fonts.googleapis.com' />
    <link rel='dns-prefetch' href='//s.w.org' />
    		<script type="text/javascript">
    			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost:8080\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.8.1"}};
    			!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
    		</script>
    		<style type="text/css">
    img.wp-smiley,
    img.emoji {
    	display: inline !important;
    	border: none !important;
    	box-shadow: none !important;
    	height: 1em !important;
    	width: 1em !important;
    	margin: 0 .07em !important;
    	vertical-align: -0.1em !important;
    	background: none !important;
    	padding: 0 !important;
    }
    </style>
    	<link rel='stylesheet' id='dashicons-css'  href='http://localhost:8080/wordpress/wp-includes/css/dashicons.min.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='admin-bar-css'  href='http://localhost:8080/wordpress/wp-includes/css/admin-bar.min.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-block-library-css'  href='http://localhost:8080/wordpress/wp-includes/css/dist/block-library/style.min.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='jdt-style-css'  href='http://localhost:8080/wordpress/wp-content/themes/jardins_du_temps/style.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='jdt_font_nunito-css'  href='https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&#038;display=swap' type='text/css' media='all' />
    <link rel='stylesheet' id='-css'  href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css?ver=5.8.1' type='text/css' media='all' />
    <script type='text/javascript' src='http://localhost:8080/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
    <script type='text/javascript' src='http://localhost:8080/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
    <link rel="https://api.w.org/" href="http://localhost:8080/wordpress/wp-json/" /><link rel="alternate" type="application/json" href="http://localhost:8080/wordpress/wp-json/wp/v2/pages/7" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8080/wordpress/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8080/wordpress/wp-includes/wlwmanifest.xml" /> 
    <meta name="generator" content="WordPress 5.8.1" />
    <link rel="canonical" href="http://localhost:8080/wordpress/" />
    <link rel='shortlink' href='http://localhost:8080/wordpress/' />
    <link rel="alternate" type="application/json+oembed" href="http://localhost:8080/wordpress/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8080%2Fwordpress%2F" />
    <link rel="alternate" type="text/xml+oembed" href="http://localhost:8080/wordpress/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8080%2Fwordpress%2F&#038;format=xml" />
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    	<style type="text/css" media="screen">
    	html { margin-top: 32px !important; }
    	* html body { margin-top: 32px !important; }
    	@media screen and ( max-width: 782px ) {
    		html { margin-top: 46px !important; }
    		* html body { margin-top: 46px !important; }
    	}
    </style>
    	</head>
    
    <body class="home page-template-default page page-id-7 logged-in admin-bar no-customize-support">
        
        	<script type="text/javascript">
    		(function() {
    			var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
    
    				request = true;
    	
    			b[c] = b[c].replace( rcs, ' ' );
    			// The customizer requires postMessage and CORS (if the site is cross domain).
    			b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    		}());
    	</script>
    			<div id="wpadminbar" class="nojq nojs">
    						<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Barre d’outils">
    				<ul id='wp-admin-bar-root-default' class="ab-top-menu"><li id='wp-admin-bar-wp-logo' class="menupop"><a class='ab-item' aria-haspopup="true" href='http://localhost:8080/wordpress/wp-admin/about.php'><span class="ab-icon" aria-hidden="true"></span><span class="screen-reader-text">À propos de WordPress</span></a><div class="ab-sub-wrapper"><ul id='wp-admin-bar-wp-logo-default' class="ab-submenu"><li id='wp-admin-bar-about'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/about.php'>À propos de WordPress</a></li></ul><ul id='wp-admin-bar-wp-logo-external' class="ab-sub-secondary ab-submenu"><li id='wp-admin-bar-wporg'><a class='ab-item' href='https://fr.wordpress.org/'>Site de WordPress-FR</a></li><li id='wp-admin-bar-documentation'><a class='ab-item' href='https://fr.wordpress.org/support/'>Documentation</a></li><li id='wp-admin-bar-support-forums'><a class='ab-item' href='https://wpfr.net/support'>Forums de support</a></li><li id='wp-admin-bar-feedback'><a class='ab-item' href='https://wordpress.org/support/forum/requests-and-feedback'>Vos retours</a></li></ul></div></li><li id='wp-admin-bar-site-name' class="menupop"><a class='ab-item' aria-haspopup="true" href='http://localhost:8080/wordpress/wp-admin/'>Jardins du Temps</a><div class="ab-sub-wrapper"><ul id='wp-admin-bar-site-name-default' class="ab-submenu"><li id='wp-admin-bar-dashboard'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/'>Tableau de bord</a></li></ul><ul id='wp-admin-bar-appearance' class="ab-submenu"><li id='wp-admin-bar-themes'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/themes.php'>Thèmes</a></li><li id='wp-admin-bar-menus'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/nav-menus.php'>Menus</a></li></ul></div></li><li id='wp-admin-bar-customize' class="hide-if-no-customize"><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8080%2Fwordpress%2F'>Personnaliser</a></li><li id='wp-admin-bar-comments'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/edit-comments.php'><span class="ab-icon" aria-hidden="true"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text comments-in-moderation-text">0 commentaire en modération</span></a></li><li id='wp-admin-bar-new-content' class="menupop"><a class='ab-item' aria-haspopup="true" href='http://localhost:8080/wordpress/wp-admin/post-new.php'><span class="ab-icon" aria-hidden="true"></span><span class="ab-label">Créer</span></a><div class="ab-sub-wrapper"><ul id='wp-admin-bar-new-content-default' class="ab-submenu"><li id='wp-admin-bar-new-post'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/post-new.php'>Article</a></li><li id='wp-admin-bar-new-media'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/media-new.php'>Fichier média</a></li><li id='wp-admin-bar-new-page'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/post-new.php?post_type=page'>Page</a></li><li id='wp-admin-bar-new-user'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/user-new.php'>Compte</a></li></ul></div></li><li id='wp-admin-bar-edit'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/post.php?post=7&#038;action=edit'>Modifier la page</a></li></ul><ul id='wp-admin-bar-top-secondary' class="ab-top-secondary ab-top-menu"><li id='wp-admin-bar-search' class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost:8080/wordpress/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Rechercher</label><input type="submit" class="adminbar-button" value="Rechercher" /></form></div></li><li id='wp-admin-bar-my-account' class="menupop with-avatar"><a class='ab-item' aria-haspopup="true" href='http://localhost:8080/wordpress/wp-admin/profile.php'>Bonjour, <span class="display-name">root</span><img alt='' src='http://0.gravatar.com/avatar/3a2e0a299bf6c1dca0b5dad9b4a156ed?s=26&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/3a2e0a299bf6c1dca0b5dad9b4a156ed?s=52&#038;d=mm&#038;r=g 2x' class='avatar avatar-26 photo' height='26' width='26' loading='lazy'/></a><div class="ab-sub-wrapper"><ul id='wp-admin-bar-user-actions' class="ab-submenu"><li id='wp-admin-bar-user-info'><a class='ab-item' tabindex="-1" href='http://localhost:8080/wordpress/wp-admin/profile.php'><img alt='' src='http://0.gravatar.com/avatar/3a2e0a299bf6c1dca0b5dad9b4a156ed?s=64&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/3a2e0a299bf6c1dca0b5dad9b4a156ed?s=128&#038;d=mm&#038;r=g 2x' class='avatar avatar-64 photo' height='64' width='64' loading='lazy'/><span class='display-name'>root</span></a></li><li id='wp-admin-bar-edit-profile'><a class='ab-item' href='http://localhost:8080/wordpress/wp-admin/profile.php'>Modifier le profil</a></li><li id='wp-admin-bar-logout'><a class='ab-item' href='http://localhost:8080/wordpress/wp-login.php?action=logout&#038;_wpnonce=147d5de5fa'>Se déconnecter</a></li></ul></div></li></ul>			</div>
    						<a class="screen-reader-shortcut" href="http://localhost:8080/wordpress/wp-login.php?action=logout&#038;_wpnonce=147d5de5fa">Se déconnecter</a>
    					</div>
    
    		    
        
        
        <nav class="navbar  navbar-expand-lg menu ">  
            
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"><img class="hamburger"src="http://localhost:8080/wordpress/wp-content/themes/jardins_du_temps/img/menu.svg" alt=""></span>
              </button>
    
              <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                
                <div style="margin-right: 25px;">
                  <a class="navbar" href="http://localhost:8080/wordpress/"><img class="logo" src="http://localhost:8080/wordpress/wp-content/themes/jardins_du_temps/img/logo.jpg" alt="logo_jdt"></a>
                </div>
                
                
                  <ul id="menu-menu-1" class="nav navbar-nav" itemscope itemtype="http://www.schema.org/SiteNavigationElement"><li  id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item active menu-item-66 nav-item"><a itemprop="url" href="http://localhost:8080/wordpress/" class="nav-link" aria-current="page"><span itemprop="name">Accueil</span></a></li>
    <li  id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69 nav-item"><a itemprop="url" href="http://localhost:8080/wordpress/page-d-exemple/" class="nav-link"><span itemprop="name">Page d’exemple</span></a></li>
    <li  id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73 nav-item"><a itemprop="url" href="http://localhost:8080/wordpress/contact/" class="nav-link"><span itemprop="name">CONTACT</span></a></li>
    <li  id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72 nav-item"><a itemprop="url" href="http://localhost:8080/wordpress/blog/" class="nav-link"><span itemprop="name">Blog</span></a></li>
    <li  id="menu-item-81" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children dropdown menu-item-81 nav-item"><a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-81"><span itemprop="name">Non classé</span></a>
    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-81">
    	<li  id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 nav-item"><a itemprop="url" href="http://localhost:8080/wordpress/page-d-exemple/" class="dropdown-item"><span itemprop="name">Page d’exemple</span></a></li>
    </ul>
    </li>
    </ul> 
                  <div style="margin-left: 10px; padding-bottom: 5px; float: left;text-decoration: none;">
                  <ul style="text-decoration: none;">
                    <li class="nav-item icon">
                      <a href="https://www.instagram.com/jardinsdutemps/"><img src="http://localhost:8080/wordpress/wp-content/themes/jardins_du_temps/img/instagram.png" alt="" width="20px" height="20px"></a>
                    </li>
                    <li class="nav-item icon">
                      <a href="https://www.jardinsremarquables.fr"><img src="http://localhost:8080/wordpress/wp-content/themes/jardins_du_temps/img/jardins-remarquables.jpg" alt="" width="20px" height="20px"></a>
                    </li>
                    <li class="nav-item icon">
                      <a href="https://www.facebook.com/lesjardins.dutemps.5/"><img src="http://localhost:8080/wordpress/wp-content/themes/jardins_du_temps/img/facebook.png" alt="" width="20px" height="20px"></a>
                    </li>
                  </ul>  
                  </div>
              </div>
        </nav>

    PS : désolé ça fait beaucoup de code pour un petit problème .. .

    Cordialement 

    Arthur




    • Partager sur Facebook
    • Partager sur Twitter

    Menu déroulant | Création thème wordpress

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown