Cum să incluzi Bootstrap 4 în tema WordPress?

Question

Cum să incluzi Bootstrap 4 în tema WordPress?

16 iun. 2018, 20:07:36

Vizualizări: 29.9K

Voturi: 3

Am încercat să încarc Bootstrap folosind functions.php

wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js');
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js');
wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js');

CSS-ul pare să funcționeze dar niciunul dintre fișierele JavaScript nu funcționează... nu sunt sigur ce fac greșit..

vă rog să mă ajutați, mulțumesc

User

100

wp enqueue script twitter bootstrap

Comentarii

Folosește tema ta wp_head()?

Nathan Johnson

16 iun. 2018 20:25:10

da, folosesc și am confirmat că are asta.. problema pare a fi: wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); nu se încarcă.. celelalte se încarcă în header

User

16 iun. 2018 20:45:40

Toate răspunsurile la întrebare

Comentarii

salut.. încă nu funcționează ..wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); acest script nu se încarcă din anumite motive.. celelalte apar

User

16 iun. 2018 20:46:45

rezolvat... problema era cu $handle ..boot2 , boot2 :)..mersi pentru ajutor

User

16 iun. 2018 20:49:49

Poți folosi nume corecte precum 'popper', 'bootstrap' și 'popper' ca dependință pentru scriptul 'bootstrap'. Nu este nevoie să încarci jQuery slim :)

Elex

16 iun. 2018 20:55:05

Și cum pot adăuga CSS-ul și scriptul inclusiv tag-urile 'origin' și 'integrity' care sunt necesare conform Bootstrap?

GyRo

5 nov. 2018 15:11:43

Dacă dorești ca stilurile bibliotecii să fie încărcate înaintea tuturor celorlalte stiluri, iar stilurile temei să fie încărcate după toate celelalte (cu stilurile plugin-ului la mijloc), trebuie să folosești două funcții. Prima, cu prioritatea "9", va fi folosită pentru a încărca stilurile bibliotecii, iar a doua, cu prioritatea "10", va fi folosită pentru a încărca fișierele temei. Folosirea unei singure funcții pentru a încărca totul, într-o temă, duce la o situație în care stilurile plugin-ului sunt primele care se încarcă.

aldemarcalazans

2 iul. 2021 20:30:24

Arată celelalte 4 comentarii

Încearcă asta:

function abc_load_my_scripts() {
  wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
  wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
  wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

Cu ultimul argument array('jquery') îi spui WP să includă scriptul DUPĂ jQuery. Reține că fiecare script trebuie să folosească un identificator diferit (primul parametru).

Mai multe informații aici.

Când verifici <head>, ești sigur că scripturile nu sunt încărcate?

Salutări, Bjorn

Bjorn

535

16 iun. 2018 20:11:07

Comentarii

Am încercat soluția de mai sus, dar fișierele JavaScript încă nu se încarcă... ceea ce face ca submeniul și comutatorul meniului responsive să nu funcționeze... Folosesc Chrome și nu sunt erori în consolă.

User

16 iun. 2018 20:19:41

Am actualizat răspunsul meu.

Bjorn

16 iun. 2018 20:23:43

Am rezolvat... problema era cu $handle ..boot2, boot2 :)..mersi pentru ajutor

User

16 iun. 2018 20:50:03

Ca de obicei pe Stackoverflow, răspunsurile greșite sunt votate și alese ca fiind corecte, iar singurele răspunsuri corecte nu primesc niciun vot. Ți-am dat votul meu acum, pentru că ai folosit metoda corectă de a încărca orice în WP.

User

11 aug. 2021 13:53:06

Akshat 1.2K · Accepted Answer · 2018-06-16T20:25:10Z

Puteți utiliza un hook de acțiune și încărca scripturile și stilurile în site.

function my_scripts() {
    wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
    wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Dacă doriți să adăugați scripturile după jQuery, puteți utiliza array-ul jQuery pentru dependențe, iar ultimul argument 'true' va include JS-ul în footer. Dacă doriți ca JS-ul să fie în header, puteți omite acest argument.