menu bootstrap 4

Comment intégrer le menu bootstrap 4 dans un thème wordpress ?

Partagez sur:

Bootstrap, est l’un des frameworks CSS les plus populaires pour le développement de site ou d’application web. Il a été utilisé par des millions de sites et applications. Depuis la sortie de la version 4, une mise à jour majeure et de nombreux changements ont été apportés au framework.

Vous pouvez trouver le journal des modifications sur ce lien. Comme vous pouvez également le constater, Bootstrap a changé la façon dont il intègre le menu. Donc, dans ce tutoriel nous allons parler de la façon d’intégrer Bootstrap NavBar 4 dans un thème WordPress.

Qu’est-ce que Bootstrap?

Eh bien, Bootstrap est le framework CSS le plus utilisé au monde, initialement développé par une équipe de chez Twitter, il contient un ensemble de composants CSS et JavaScript qui vous permet de créer des interfaces utilisateurs responsive.

Lorsque vous intégré Bootstrap, votre site ou application sera automatiquement adapté à la plus part des écrans disponibles (ordinateurs, mobiles …). Il contient également de nombreuses fonctionnalités intégrées, comme des onglets, des carrousels, etc. Donc, pour cette raison, vous pouvez rarement avoir besoin d’une autre bibliothèque JS pour le développement de votre site.

De plus, ce framework, Bootstrap, est également hébergé sur GitHub, vous pouvez le trouver ici. Cela signifie qu’il est open source et que n’importe qui peut contribuer à son développement.

Comment intégrer Bootstrap NavBar 4 dans un thème WordPress?

Comme annoncé un peut plus haut nous allons voir comment intégré le menu bootstrap dans un site web bootstrap.

Par défaut lorsqu’on développe un site web sous wordpress en partant d’un un thème vide, et qu’on a décidé d’utiliser bootstrap comme framework css, nous bénéficions de beaucoup de composants natifs css et javascript qui sont directement offert par bootstrap.

Ici nous allons nous focaliser sur le composant NavBar, qui permet de créer un menu responsive sur ordinateur et mobile.

Ils existent peut être plusieurs manières de le faire, mais nous nous allons une manière plus simple et rapide qui a apparu avec bootstrap 4.

Tout d’abord, ce que vous devez faire, c’est que vous pouvez télécharger la classe Bootstrap NavWalker à partir d’ici.

Maintenant, après cela, vous pouvez copier le fichier bootstrap-navwalker à partir de ce référentiel dans le répertoire de votre thème, c’est-à-dire dans /wp-content /themes/theme-name/folder.

Maintenant, après avoir ajouté ce fichier dans le dossier du thème, vous devez charger cette fonction comme dans le code PHP ci-dessous, en l’ajoutant dans le fichier functions.php de votre thème:

require get_template_directory() . '/bootstrap-navwalker.php';

 

Après cela, en supposant que vous avez déjà enregistré le menu de navigation pour votre thème, allons de l’avant et intégrons Bootstrap NavBar 4 dans votre thème. Pour cela, ce que vous devez faire, c’est que vous devez appeler cette classe nouvellement créée via la fonction wp_nav_menu() comme dans l’exemple ci-dessous:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'theme-textdomain' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1', // Defined when registering the menu
'menu_id' => 'primary-menu',
'container' => false,
'depth' => 2,
'menu_class' => 'navbar-nav ml-auto',
'walker' => new Bootstrap_NavWalker(), // This controls the display of the Bootstrap Navbar
'fallback_cb' => 'Bootstrap_NavWalker::fallback', // For menu fallback
) );
?>
</div>
</nav>

 

Votre code doit ressembler à quelque chose comme le montre bout de code ci-dessus.

 

https://tutswinds.com/decouvrez-premier-smartphone-5g-monde/


Partagez sur: