web-dev-qa-db-fra.com

Comment ajouter correctement les Javascripts Bootstrap et JQuery?

Je développe mon thème WordPress avec Material Bootstrap Design (MDB), une variante de Material utilisant Bootstrap 4 et son propre code.

Il appelle à en utilisant les scripts suivants ...

<!-- JQuery -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/jquery-2.2.3.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/mdb.min.js"></script>

Je les avais simplement ajoutés au bas de mon footer.php. Mais maintenant, j'ai lu que je devrais ajouter des fichiers Javascripts à WordPress correctement, c'est-à-dire en mettant en file d'attente.

Jusqu'à présent, j'ai utilisé cette ...

// Add Javascripts for my Bootstrap theme
function bootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_enqueue_script( 'bootstra-jquery', get_stylesheet_directory_uri() . '/mdb/js/jquery-2.2.3.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap-jquery-min', get_stylesheet_directory_uri() . '/mdb/js/jquery.min.js' );
    wp_enqueue_script( 'bootstrap', get_stylesheet_directory_uri() . '/mdb/js/bootstrap.min.js' );
    wp_enqueue_script( 'bootstrap-material', get_stylesheet_directory_uri() . '/mdb/js/mdb.min.js' );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts_with_jquery' );
// http://stackoverflow.com/questions/26583978/how-to-load-bootstrap-script-and-style-in-functions-php-wordpress

Cela fonctionne, jusqu'à un point - cela ajoute mes quatre lignes au code (bien que je ne sache pas si le faire de cette façon fait une différence).

Cependant, je vois aussi dans mon en-tête deux lignes JS restantes/par défaut que je n'ai pas ajoutées ...

<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/jquery-2.2.3.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/jquery.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/bootstrap.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/mdb.min.js?ver=4.6.1'></script>

Et je vois toujours cette ligne dans le pied de page, bien que je ne l'ajoute pas (je pense que je veux laisser cela, n'est-ce pas?) ...

<script type='text/javascript' src='http://www.example.com/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>

La principale question est donc: comment dois-je gérer le fait que WordPress inclut jquery.js?ver=1.12.4 et jquery-migrate.min.js?ver=1.4.1 lorsque mon thème ne les appelle pas? Y a-t-il un conflit ici? Si JQuery de WordPress est servi en lui passant un numéro de version, est-il possible que je puisse le forcer à utiliser la version 2.2.3 comme demandé par mon thème? Et que dire de cette version "migrate"?

Je sais que vous pouvez supprimer les scripts et avez lu que vous pouvez forcer une version personnalisée à l'aide d'un filtreou similaire . Mais j'ai aussi lu qu'il ne fallait pas bricoler pour supprimer la version par défaut de WordPress de JQuery.

Je suis confus.

Et dois-je mettre en file d'attente CSS?

jqueryjavascriptwp-enqueue-scripttwitter-bootstrapscripts
2
Robert Andrews

WordPress charge jQuery car les plugins et les thèmes le supposent. Si vous souhaitez une autre version de jQuery pour votre thème, les plugins que vous utilisez risquent de ne pas fonctionner car, s'ils sont bien gérés, ils sont conçus pour fonctionner avec jquery par défaut .

Cela dit, si vous insistez pour utiliser votre propre version de jQuery, vous pouvez facilement le désenregistrer, comme vous l'avez découvert. Si vous ne prévoyez pas de publication de votre thème, vous pouvez en contrôler les conséquences.

Et oui, vous devriez mettre en file d'attente les styles aussi. La raison en est que cela vous permet de définir des dépendances, ce qui est important si (par exemple) vous souhaitez créer un thème enfant et annuler l'enregistrement des styles parent.

1
cjbj

Peut-être que ce n’est pas vraiment une question WordPress après tout. Mais autant que je sache, Bootstrap 4 fonctionne avec jQuery 1.2.0. Testé par Simon Padburys Bootstrap 4 Starter Theme pour WordPress qui met en file d'attente WordPress sur carte (pré-enregistré) jQuery.

https://github.com/SimonPadbury/b4st/blob/master/functions/enqueues.php

0
Jesper Nilsson