En ce qui concerne les menus déroulants, j’ai toujours été un grand fan de SuperFish. Non seulement le plugin SuperFish jQuery est super facile à utiliser et à personnaliser, mais tout vous est donné, il vous suffit donc de copier et coller le code dans votre conception.

Ajouter SuperFish à WordPress est en fait une tâche très simple, mais pour ceux qui débutent, cela peut être un peu plus difficile ou vous pouvez finir par le faire dans le mauvais sens (comme appeler le script dans votre fichier header.php). Ainsi, l’article suivant vous guidera à travers toutes les étapes d’ajout du menu déroulant à votre thème.

Étape 1: Téléchargez le plugin SuperFish

La première étape consiste simplement à visiter le SuperFish téléchargez la page et téléchargez votre code. Je suggère de simplement télécharger le fichier .ZIP qui comprend tout ce dont vous avez besoin. Il existe également une page Github que je vous recommande de mettre en signet au cas où vous auriez besoin d’aide supplémentaire ou si vous rencontriez des problèmes avec le script js, vous pouvez les publier là-bas.

Étape 2: Ajoutez le CSS & JS SuperFish à votre dossier de thèmes

Ensuite, vous voudrez extraire le contenu du dossier zip et le télécharger dans le dossier du thème sur lequel vous travaillez.

  • Copiez le contenu de superfish.css dans votre style.css
  • Copiez le contenu du fichier superfish-navbar.css dans le fichier style.css de votre thème – cela lui donnera le style que vous pourrez modifier après
  • Faites glisser les fichiers superfish.js et supersubs.jps vers votre thème – je préfère les placer dans un dossier appelé «js»

Étape 3: démarrer le script SuperFish

Maintenant que vous avez tous les CSS et JS ajoutés à votre thème, vous voudrez appeler le JS et démarrer le script. Je vais d’abord vous montrer comment appeler vos scripts de la bonne manière dans votre fichier functions.php. Enfin, je vais vous donner le code qui devrait aller dans votre header.php pour démarrer le script.

Ajoutez à votre fichier Functions.php pour mettre les scripts en file d’attente

// Load superfish scripts
function myprefix_load_superfish_scripts() {

    // load jquery if it isn't
    wp_enqueue_script( 'jquery' );


    // SuperFish Scripts
    wp_enqueue_script( 'superfish', get_template_directory_uri() . '/js/superfish.js' );
    wp_enqueue_script( 'supersubs', get_template_directory_uri() . '/js/supersubs.js' );

}
add_action( 'wp_enqueue_scripts', 'myprefix_load_superfish_scripts' );

Notez que nous utilisons get_template_directory_uri () qui renvoie à votre thème parent. Si vous utilisez un thème enfant, assurez-vous de le remplacer par get_stylesheet_directory_uri () qui pointe vers votre thème enfant.

Ajoutez le code suivant pour démarrer le script SuperFish

Vous pouvez soit ajouter le code ci-dessous au fichier functions.php qui lancera le script superFish en ajoutant le javascript au pied de page du site avant la balise body de fermeture. Ou vous pouvez bien sûr placer votre javascript dans son propre fichier et le charger via la fonction précédente.

function myprefix_start_superfish() { ?>
    
    <script type="text/javascript">
        jQuery( function( $ ) {
            $( document ).ready( function() {
                $('ul.sf-menu').supersubs( {
                    minWidth   : 16, // minimum width of sub-menus in em units
                    maxWidth   : 40, // maximum width of sub-menus in em units
                    extraWidth : 1   // extra width can ensure lines don't sometimes turn over
                } ).superfish();
            } );
        } );
    </script>

<?php }
add_action( 'wp_footer', 'myprefix_start_superfish' );

Étape 4: Ajouter une classe sf-menu à la fonction WP_Nav_Menu

Il ne vous reste plus qu’à ajouter le “menu-SF”À votre navigation ul. C’est la classe utilisée pour transformer votre menu en menu déroulant SuperFish. Si vous aviez auparavant une barre de navigation dans votre thème, vous voudrez supprimer tout leur style et laisser simplement le code php pour le menu (puisque vous avez ajouté tout le style nécessaire pour le menu déroulant à l’étape 2).

Quelque part dans l’en-tête de votre thème ou si vous ne le trouvez pas dans l’en-tête, effectuez une recherche rapide dans les fichiers de thème avec l’éditeur de texte que vous utilisez pour modifier le code du thème et recherchez la fonction «wp_nav_menu» pour le menu que vous souhaitez modifier . Une fois localisé, éditez simplement (ou ajoutez s’il n’existe pas) le paramètre «menu_class» pour qu’il inclue le menu-SF classe comme dans l’exemple ci-dessous:

wp_nav_menu( array(
    'theme_location' => 'primary',
    'sort_column'    => 'menu_order',
    'menu_class'     => 'sf-menu',
    'fallback_cb'    => 'default_menu'
) );

Maintenant, si vous créez un thème à partir de zéro et que vous n’avez pas encore défini de régions de menu et les avez ajoutées au site et que vous ne savez pas comment faire, jetez un œil aux 2 pages de documentation utiles suivantes dans le Codex WordPress:

Share: