Ajoutez facilement le look and feel de Bootstrap à votre thème WordPress pour pouvoir utiliser toutes les primitives CSS et JavaScript qu’il propose.

Twitter Boostrap ?

Twitter Bootstrap est une collection de styles CSS et de scripts JavaScript applicables directement sur les éléments HTML de votre site ou votre blog. De nombreux sites utilisent déjà Bootstrap.

Sans trop d’effort, il met en oeuvre un look and feel sympa et actuel.

Pour le voir en action, regardez les exemples proposés sur le site. Vous devriez vous sentir en terrain connu.

Les fonctionnalités

Une des principales fonctionnalités est le découpage d’un espace (la page, le div de contenu, …) en 12 colonnes pour y intégrer du contenu. Idéal pour rendre le site responsive, il permet de faire une présentation par colonnes, ou de dessiner une colonne de menu et une zone de contenu : les layouts.

Pour faire une liste absolument non exhaustive, bien au contraire, il permet de faire des boutons stylisés à partir de liens :

Comment ça marche ?

Tout ceci est possible avec un minimum de code. La plupart du temps, il suffit d’inclure la classe CSS décrite dans la documentation.

Par exemple, pour changer un lien en bouton, transformez :

<a href="abonnement.html">Abonnez-vous</a>

en :

<a href="abonnement.html" class="btn btn-info">Abonnez-vous</a>

Dans le cas de JavaScript, qui est facultatif, il suffit d’inclure le code. Par exemple, pour ajouter un carrousel, la structure HTML doit être respectée (un div avec un id, et des images dans des div d’une classe particulière) et ce code :

<script>
!function ($) {
  $(function() {
    // carousel demo
    $('#myCarousel').carousel()
  })
}(window.jQuery)
</script>

Vous trouverez plus de détails ici sur la section dédiée aux carrousels.

Et comment utiliser Bootstrap dans mon thème WordPress ?

Tout d’abord, si ce n’est pas déjà fait, le mieux est de créer un thème enfant.

Téléchargez ensuite l’archive qui contient les sources directement depuis le site de Bootstrap, et décompressez la dans un nouveau dossier nommé bootstrap dans le dossier de votre thème enfant. En pratique, le dossier du thème enfant doit contenir un dossier bootstrap qui contient trois dossiers : img, js et css.

Modifiez ensuite le fichier functions.php pour ajouter ce code :

// Ajoute le CSS et le JavaScript pour utiliser Bootstrap
function enqueue_bootstrap() {
  wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
 
  // Ces deux lignes ne sont utiles que si vous utilisez les fonctionnalites JavaScript
  wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap' );

Si vous n’utilisez pas les fonctionnalités JavaScript, c’est-à-dire tout ce qui est décrit sur la page d’exemples JavaScript, il est inutile de déclarer les scripts (les deux lignes qui commencent par wp_enqueue_script).
Vous pourrez ainsi gagner en performance en ne chargeant que ce qui est utile, en ne gardant que la partie CSS.

Vous pouvez maintenant utiliser les éléments de Bootstrap dans vos pages et articles.

Le mot de la fin

Des thèmes basé sur Bootstrap existent. S’ils correspondent à vos besoins, n’hésitez pas à les utiliser.

Aussi, si les couleurs et les polices par défaut de Bootstrap ne vous conviennent pas, le site propose de les personnaliser et ainsi télécharger une version customisée à intégrer directement sur votre site.

Cet article vous a été utile ? Partage it !