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, le post suivant vous guidera à travers toutes les étapes de l’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 page de téléchargement et téléchargez votre code. Je suggère simplement de télécharger le fichier .ZIP qui comprend tout ce dont vous avez besoin. Il y a aussi une page Github que je vous recommande de mettre en signet au cas où vous auriez besoin d’aide supplémentaire ou si vous rencontrez des problèmes avec le script js, vous pouvez les publier là-bas.
Étape 2 : Ajoutez le SuperFish CSS & JS à votre dossier de thème
Ensuite, vous devrez 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 mettre dans un dossier appelé « js »
Étape 3 : Démarrez 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 correctement vos scripts dans votre fichier functions.php. Enfin, je vais vous donner le code qui doit aller dans votre header.php pour démarrer le script.
Ajouter à 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 SuperFish Script
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 la classe sf-menu à la fonction WP_Nav_Menu
Maintenant, tout ce que vous avez à faire est d’ajouter le « sf-menu” classe à votre navigation ul. Il s’agit de 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, faites une recherche rapide des fichiers de thème avec l’éditeur de texte que vous utilisez pour modifier le code du thème et localisez la fonction « wp_nav_menu » pour le menu que vous souhaitez modifier . Une fois localisé, modifiez simplement (ou ajoutez s’il n’existe pas) le paramètre « menu_class » afin qu’il inclue le sf-menu 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 ne les avez pas ajoutées au site et que vous ne savez pas comment, jetez un œil aux 2 pages de documentation utiles suivantes dans le WordPress Codex :