Comment intégrer la barre de navigation Bootstrap dans le thème WordPress-WordPresse-php.cn

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

王林

Libérer： 2023-09-06 09:05:17

original

1534 Les gens l'ont consulté

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>

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

Header – Un avec la classe « navbar-header » visible sur n'importe quelle taille d'écran. <div>

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button>

Copier après la connexion

Bouton bascule - , représente le contenu réduit sur les petits écrans ; ce bouton est obligatoire, mais vous pouvez modifier le contenu qu'il contient. <button>

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

Copier après la connexion

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>

Copier après la connexion

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>

<ul class="nav navbar-nav">…</ul>

Copier après la connexion

Menu – Un avec la classe « nav navbar-nav » qui représente la navigation sur le site. <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;
?>

Copier après la connexion

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' );

Copier après la connexion

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');
?>

Copier après la connexion

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.

Comment intégrer la barre de navigation Bootstrap dans le thème 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>

Copier après la connexion

À :

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

Copier après la connexion

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>

Copier après la connexion

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())
);
?>

Copier après la connexion

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.

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