Come includere Bootstrap 4 nel tema?

Question

Come includere Bootstrap 4 nel tema?

16 giu 2018, 20:07:36

Visualizzazioni: 29.9K

Voti: 3

Ho provato ad includere Bootstrap utilizzando 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');

Il CSS sembra funzionare ma nessuno dei file JavaScript funziona... non sono sicuro di cosa sto sbagliando...

Per favore aiutatemi grazie

User

100

wp enqueue script twitter bootstrap

Commenti

Il tuo tema utilizza wp_head()?

Nathan Johnson

16 giu 2018 20:25:10

sì, lo sto usando e ho confermato che c'è... il problema sembra essere: wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); non si carica... gli altri si caricano nell'header

User

16 giu 2018 20:45:40

Tutte le risposte alla domanda

Commenti

ciao.. ancora non funziona ..wp_enqueue_script( 'boot2','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array( 'jquery' ),'',true ); questo script non si carica per qualche motivo..gli altri vengono visualizzati

User

16 giu 2018 20:46:45

risolto... il problema era con il $handle ..boot2 , boot2 :)..grazie per l'aiuto

User

16 giu 2018 20:49:49

Puoi usare nomi corretti come 'popper', 'bootstrap' e 'popper' come dipendenza per lo script 'bootstrap'. Non è necessario caricare jQuery slim :)

Elex

16 giu 2018 20:55:05

E come posso aggiungere il CSS e lo script includendo i tag 'origin' e 'integrity' che sono richiesti secondo Bootstrap?

GyRo

5 nov 2018 15:11:43

Se vuoi che gli stili della libreria vengano caricati prima di tutti gli altri stili, e che gli stili del tema vengano caricati dopo tutti gli altri (con gli stili dei plugin nel mezzo), devi usare due funzioni. La prima, con priorità "9", verrà utilizzata per caricare gli stili della libreria, e la seconda, con priorità "10", verrà utilizzata per caricare i file del tema. Usando solo una funzione per caricare tutto, in un tema, si verifica una situazione in cui gli stili dei plugin sono i primi a essere caricati.

aldemarcalazans

2 lug 2021 20:30:24

Mostra i restanti 4 commenti

Prova questo:

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);

Con l'ultimo argomento array('jquery') stai dicendo a WP di includere lo script DOPO jQuery. Nota che ogni script deve usare un handle diverso (primo parametro).

Maggiori informazioni qui.

Quando controlli il <head>, sei sicuro che gli script non vengano caricati?

Saluti, Bjorn

Bjorn

535

16 giu 2018 20:11:07

Commenti

Ho provato quanto sopra ma i file javascript non si caricano ancora... il che rende il sottomenu e il toggle del menu responsive non funzionanti... sto usando Chrome e non ci sono errori nella console.

User

16 giu 2018 20:19:41

Ho aggiornato la mia risposta.

Bjorn

16 giu 2018 20:23:43

Risolto... il problema era con $handle..boot2, boot2 :)..grazie per l'aiuto

User

16 giu 2018 20:50:03

Come al solito su Stackoverflow, le risposte sbagliate vengono votate e scelte come corrette, mentre le uniche risposte giuste non ricevono nemmeno un voto. Hai ottenuto il mio voto ora, perché hai utilizzato il modo corretto per accodare qualsiasi cosa in WP.

User

11 ago 2021 13:53:06

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

Puoi utilizzare l'hook di azione e accodare script e stili al sito.

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' );

Se vuoi aggiungere gli script dopo jQuery puoi usare l'array jQuery per le dipendenze e l'ultimo argomento true includerà il JS nel footer, se vuoi il js nell'header, puoi rimuoverlo.

Akshat

1.2K

16 giu 2018 20:25:10