Ajoutez Twitter Bootstrap à votre thème WordPress

Ajoutez Twitter Bootstrap dans votre thème WordPress

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 :

Les styles de bouton de Bootstrap dans votre thème WordPress
Les styles de bouton
inclure des icônes (140 sont disponibles au moment de la rédaction de cet article) :

Les icônes de Bootstrap dans votre thème WordPress
Les icônes
faire des menus :

Les menus de Bootstrap dans votre thème WordPress
Le menu pills horizontal
mettre en évidence du contenu :

Les typographies de Bootstrap dans votre thème WordPress
La célèbre Hero Unit
décorer les images :

Les images dans Bootstrap dans votre thème WordPress
Les styles d’image
créer des carrousels :

Les carrousels dans Bootstrap dans votre thème WordPress
Les carrousels
Vous pouvez aussi insérer des barres de progression, décorer les formulaires, des fenêtres d’alerte, et bien d’autres possibilités, détaillées directement sur le site.

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 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.