Utiliser Bootstrap dans un thème ou une extension WordPress

Les thèmes et extensions WordPress peuvent utiliser Bootstrap afin de faciliter la mise en forme (fichier bootstrap.min.css) ainsi que les fonctionnalités JavaScript (fichier bootstrap.min.js) des éléments HTML qu'ils génèrent.

L'API WordPress ne charge pas Bootstrap par défaut. Il vous faudra donc le télécharger dans le dossier de votre thème ou de votre extension ou encore utiliser un CDN.

Ensuite, vous devrez charger Bootstrap par programmation.

▼Publicité

Charger Bootstrap

Comme pour tout fichier .css et .js, il n'est pas souhaitable d'ajouter directement les balises <link> et <script> dans un site WordPress. Plutôt, on utilisera wp_enqueue_script() et wp_enqueue_style() afin de laisser le soin à WordPress de bien gérer les références requises.

Si Bootstrap doit être utilisé dans une extension :

WordPress (PHP)

wp_enqueue_script( 'bootstrap', plugins_url( 'bootstrap/js/bootstrap.min.js', __FILE__ ), array( 'jquery' ), null, true );

wp_enqueue_style( 'bootstrap', plugins_url( 'bootstrap/css/bootstrap.min.css', __FILE__ ) );

ou, si vous préférez l'option CDN :

WordPress (PHP)

wp_enqueue_script( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), null, true);

wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

Dans le cas où Bootstrap doit être utilisé dans un thème :

WordPress (PHP)

wp_enqueue_script( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), null, true );

wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );

À vous de modifier ces instructions pour travailler avec CDN !

http vs https

Avec l'option CDN, lorsque le site est mis en ligne, il est intéressant d'omettre le http:// dans les références CDN. Ceci permet d'adapter le protocole (http:// ou https://) selon le protocole utilisé par la page qui contient la balise. 

Ainsi, si votre site utilise le protocole http://, les ressources Bootstrap utiliseront elle aussi http://. Si le site avait besoin d'utiliser le protocole https://, les ressources utiliseraient automatiquement https://. Le développeur n'aurait pas à modifier les références CDN pour passer d'un protocole à l'autre.

Si on avait écrit http:// dans les références CDN, l'internaute qui consulte la page https:// aurait reçu un avertissement de sécurité puisqu'une ressource sécurisée tente de charger une ressource non sécurisée.

Malheureusement, cette technique ne fonctionne pas lorsque le site est sur une machine locale puisque le navigateur recherchera alors un fichier local.

Comment vérifier si Bootstrap est déjà chargé ?

Un site WordPress combine généralement, en plus de l'API WordPress, du code provenant de plusieurs sources : le code du thème, le code des extensions, notre propre code. Il est possible que le développeur de l'une ou l'autre de ces sources ait chargé Bootstrap sur le site. Si vous souhaitez utiliser Bootstrap dans le code que vous développez, vous devez vous assurer que Bootstrap ne soit chargé qu'une seule fois. Ceci permettra d'éviter l'alourdissement inutile du site ou, pire encore, des conflits entre deux différentes versions de Bootstrap.

Malheureusement, il n'existe pas de solution à toute épreuve pour effectuer cette vérification. Nous avons tout de même quelques pistes.

wp_script_is()

WordPress propose un mécanisme permettant de vérifier si un script est chargé : wp_script_is(). Le problème, c'est que ce mécanisme est basé sur un « slug », c'est-à-dire une chaîne de caractères qui permet d'identifier le script de façon unique. Cette chaîne est définie au moment où le développeur enregistre un script à l'aide de wp_register_script() ou qu'il le charge à l'aide de wp_enqueue_script().

Mais comme les développeurs peuvent utiliser n'importe quel « slug » pour référer aux scripts Bootstrap, il n'y a pas de garantie que ce code fonctionnera.

Ex :

WordPress (PHP)

if ( ! wp_script_is( 'bootstrap' ) ) {

    wp_register_script( ... );

    ...

}

Retrouver manuellement le ou les « slugs » de Bootstrap

Dans le cas où le code nécessitant Bootstrap n'est pas destiné à être distribué vers d'autres sites WordPress, vous avez un plus grand contrôle sur ce que contient ou non votre site.

Il est alors possible de rechercher manuellement le ou les « slugs » que votre thème ou vos extensions utilisent pour charger Bootstrap. Vous pourrez à ce moment utiliser wp_script_is() de façon beaucoup plus sûre que si votre code devait être destiné à des sites pour lesquels vous ne connaissez ni le thème, ni les extensions.

Je vous conseille d'utiliser un outils comme Agent Ransack pour rechercher du texte dans vos fichiers. Vous pourriez être tenté de rechercher la chaîne « bootstrap ». Vous n'obtiendrez cependant pas les résultats escomptés puisqu'en anglais, le terme « bootstrap » peut représenter autre chose que la bibliothèque Bootstrap. En effet, il s'agit d'un terme pour désigner un programme d'amorçage. On retrouvera donc ce mot dans des commentaires de plusieurs fichiers de l'API WordPress sans pour autant que Bootstrap en fasse partie. 

Il vaudrait mieux rechercher la chaîne « bootstrap.min.js ».

Si les développeurs du thème et des extensions ont bien fait leur travail, ils auront utilisé wp-register_script() ou wp_enqueue_script() pour charger Bootstrap. Vous pourrez alors noter le « slug » qu'ils ont choisi et l'utiliser dans wp_script_is().

Il va sans dire que vous devriez indiquer en commentaire la provenance de ce slug.

Ex :

WordPress (PHP)

// lors de mes vérifications, seule l'extension wp-touch utilisait Bootstrap

// si cette extension était désactivée, Bootstrap sera tout de même chargé ici

// on vérifie également le slug "bootstrap" puisque logiquement, les développeurs devrait utiliser ce slug

if ( ! wp_script_is( 'wptouch-bootstrap' ) && ! wp_script_is( 'bootstrap' ) ) {

    wp_register_script( ... );

    ...

}

Travail côté client

Une autre solution consiste à vérifier si une des fonctionnalités connues de Bootstrap est chargée. Si elle l'est, on est en droit de croire que Bootstrap est chargé. 

Ceci doit cependant être réalisé côté client. Il ne sera donc pas possible d'utiliser wp_register_script() pour charger Bootstrap selon les bonnes pratiques WordPress.

Notez que si vous utilisez cette technique, les autres développeurs WordPress pourraient ne pas vous porter dans leur coeur puisque vous n'utiliserez pas de slug...

Voici tout de même, à titre indicatif, comment procéder. La variable Modal est intéressante pour effectuer le test. En effet, le fichier bootstrap.js se charge d'y stocker une référence à une fonction anonyme (var Modal = function (...) {...}). Il est donc possible de vérifier si la variable Modal content effectivement la référence à une fonction ou si elle est indéfinie.

Ex :

JavaScript

if (typeof($.fn.modal) === 'undefined') {

    $('head').append("<script src='/wp-content/plugins/mon-extension/bootstrap/js/bootstrap.min.js'></script>");

    $('head').append("<link rel='stylesheet' href='/wp-content/plugins/mon-extension/bootstrap/css/bootstrap.min.css'></script>");

}

Utiliser Bootstrap

Une fois Bootstrap chargé en mémoire, vous pouvez l'utiliser dans votre code WordPress comme vous le feriez dans n'importe quel site Web.

Dans cet exemple très simple, on utilise, dans la fonction de rappel d'un « shortcode », une classe CSS définie par Bootstrap :

Fichier d'un thème ou d'une extension WordPress (PHP)

...

$retour .= "<div class='table-responsive'>";

...

Pour plus d'information

« How to include bootstrap javascript and css in wordpress post ». infoheap. http://infoheap.com/include-bootstrap-js-css-in-wordpress-post/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories