Comment intégrer la barre de navigation Bootstrap dans le thème WordPress

Avez-vous déjà voulu accélérer le processus de développement de votre thème ? Je pense que la réponse est "oui" et vous connaissez déjà Bootstrap et développez en l'utilisant dans vos maquettes. Cela soulève la question : « Comment intégrer des composants Bootstrap dans un thème WordPress ? »

Cette série de tutoriels vous montrera comment intégrer les composants Bootstrap les plus populaires dans votre thème WordPress. Commençons par le composant Navbar, qui permet de créer facilement une barre de navigation réactive. Pour rendre ce tutoriel facile à suivre, je vais utiliser une barre de navigation qui contient uniquement le logo et le menu.

---

1. Utilisez le framework Bootstrap pour écrire la barre de navigation

Voici le code source de la page de documentation Bootstrap :

<nav class="navbar navbar-default" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>
</nav>

Regardons de plus près le code et clarifions quelques points pour mieux comprendre la prochaine partie de ce tutoriel.

<nav role="navigation">…</nav>

Wrapper - Une balise avec la classe "navbar" et le rôle "navigation" qui enveloppe tout le contenu de la barre de navigation. <nav></nav>

<div class="navbar-header">…</div>

Header – Un avec la classe « navbar-header » visible sur n'importe quelle taille d'écran. <div> <pre class="brush:php;toolbal:false;">&lt;button class=&quot;navbar-toggle&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-ex1-collapse&quot;&gt;…&lt;/button&gt; </pre> <p>Bouton bascule<em> - </em>, représente le contenu réduit sur les petits écrans ; ce bouton est obligatoire, mais vous pouvez modifier le contenu qu'il contient. <code><button></button>

<a class="navbar-brand" href="#">Brand</a>

Branding – Un lien avec votre logo ; c'est facultatif et vous pouvez l'omettre ici et l'inclure ailleurs.

<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>

Contenu pliable - avec la classe "collapse" et la classe "navbar-collapse" ; il contient tout le contenu qui doit être réduit sur les petits écrans. <div> <pre class="brush:php;toolbal:false;">&lt;ul class=&quot;nav navbar-nav&quot;&gt;…&lt;/ul&gt; </pre> <p>Menu<em> – Un </em> avec la classe « nav navbar-nav » qui représente la navigation sur le site. <code><ul></ul>

---

2.Intégrer le modèle dans le modèle

Cette étape suppose que WordPress est installé et que le thème que vous développez est activé.

2.1. Préparez un thème pour votre menu

Ouvrez votre fichier

functions.php et enregistrez votre navigation si ce n'est pas déjà fait.

<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {	
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;
?>

Enregistrez Bootstrap et jQuery :

function wpt_register_js() {
	wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
	wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
	wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
	wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Téléchargez la classe

d'Edward McIntyre depuis GitHub. Placez le fichier dans le dossier racine du thème. Retournez dans votre wp-bootstrap-navwalkerfunctions.php et collez le code suivant :

<?php // Register custom navigation walker
	require_once('wp_bootstrap_navwalker.php');
?>

2.2. Créez un menu sur le backend

Accédez au backend de votre site WordPress

Apparence->Menu. Créez un nouveau menu appelé "Primaire" et ajoutez-y des éléments. Accédez à l'onglet Gérer les emplacements et attribuez le menu « Principal » à l'emplacement du thème nommé « Principal ». Enregistrez les modifications.

Page de gestion des menus WordPress

2.3. Intégrer le modèle de barre de navigation dans le modèle

Ouvrez votre

header.php et copiez et collez la maquette de la barre de navigation à l'endroit où vous souhaitez qu'elle apparaisse. Remplaçons maintenant une partie du modèle par la fonctionnalité de modèle de WordPress. Commencez par placer le bon lien vers votre logo. Changez cette ligne :

<a class="navbar-brand" href="#">Brand</a>

À :

<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>

L'étape suivante consiste à afficher le menu depuis le backend au lieu du menu modèle. Pour ces lignes :

<ul class="nav navbar-nav">
	<li class="active"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li><a href="#">Separated link</a></li>
			<li><a href="#">One more separated link</a></li>
		</ul>
	</li>
</ul>

avec :

<?php /* Primary navigation */ 
wp_nav_menu( array(
  'menu' => 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())
);
?>

Vous avez maintenant intégré le composant Bootstrap Navigation Bar dans votre thème.

---

Conclusion

Dans ce tutoriel, nous avons vu comment intégrer une barre de navigation créée à l'aide du framework CSS Bootstrap dans un thème WordPress. Pour accélérer le développement du thème, vous pouvez simplement télécharger les fichiers sources et les coller dans votre thème.

Vous pouvez également trouver d'excellents thèmes et modèles Bootstrap sur Envato Market, tels que le modèle d'administration Neon Bootstrap ou le modèle Selphy Electronics E-Commerce Boostrap.