Su questa pagina: [nascondere]
La maggior parte dei tutorial di Bootstrap-in-WordPress ti dicono ancora di incollare un collegamento al foglio di stile in header.php e caricare jQuery insieme ad esso. Entrambe le mosse sono sbagliate 2026. bootstrap 5 eliminato jQuery come dipendenza, e la modifica diretta di header.php verrà cancellata al successivo aggiornamento del tema. Questa guida mostra il modo attuale per farlo, con codice che funziona ancora dopo un aggiornamento.
Risposta rapida: Per la maggior parte dei siti, accodamento bootstrap 5.3.8 tramite un CDN nel file Functions.php del tuo tema (una decina di righe, niente jQuery). Creazione di un tema completamente personalizzato? Inizia invece da uno starter basato su Bootstrap come Understrap. Voglio solo i componenti Bootstrap all'interno dell'editor dei blocchi? Installa un plugin per i blocchi Bootstrap e salta completamente il codice.
Ultima revisione: giugno 2026. Versione bootstrap (5.3.8) ed esempi di codice verificati rispetto ai documenti ufficiali.
Cosa fa effettivamente Bootstrap (e cosa WordPress già gestisce)
Bootstrap è gratuito, open-source framework CSS front-end. Fornisce una griglia reattiva, componenti già pronti (barre di navigazione, carte, modali, pulsanti), e classi di utilità per la spaziatura e il layout. Ottieni tutto questo senza scrivere molto CSS a mano. È design e layout, niente di più.
WordPress è il sistema di gestione dei contenuti: messaggi, pagine, utenti, la banca dati, il dashboard di amministrazione. Decide quali contenuti esistono e dove vivono. Bootstrap decide come appare il contenuto sullo schermo. Non si sovrappongono, ed è proprio per questo che si accoppiano bene, e anche perché WordPress non include mai Bootstrap per te. Devi portartelo dentro tu stesso.
Ecco cosa manca alla gente: questa è una decisione dello sviluppatore o del progettista, non una funzione "clicca su un pulsante".. Se stai codificando manualmente un tema, Bootstrap ti fa risparmiare settimane. Se preferisci trascinare i blocchi in giro, potresti non aver bisogno di un framework. I nostri Guida WordPress vs costruttori di siti web è il punto di partenza migliore in questo caso.
Un altro fatto che vale la pena risolvere subito. bootstrap 5 rimosso jQuery. Il JavaScript è ora semplice (vaniglia) JS. Se un tutorial ti dice di caricare jQuery affinché Bootstrap funzioni, quel tutorial descrive Bootstrap 4 o più vecchio. Saltalo.
Metodo 1: Aggiungi Bootstrap tramite CDN in Functions.php (Consigliato)
Questa è l'impostazione predefinita giusta per quasi tutti. un CDN (rete di consegna dei contenuti, un insieme di server che ospitano file vicini ai tuoi visitatori) serve Bootstrap, quindi non memorizzi nulla da solo. E lo carichi in modo WordPress, Attraverso accodamento. Ciò significa registrare un file in modo che WordPress lo stampi nel posto giusto, senza alcuna modifica a header.php.
Aggiungi questo al tuo il file Functions.php del tema figlio. Un tema figlio è importante: modifica il genitore e le tue modifiche svaniscono al prossimo aggiornamento.
funzione htg_enqueue_bootstrap() {
wp_enqueue_style(
'boottrap',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
Vettore(),
'5.3.8'
);
wp_enqueue_script(
'boottrap',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
Vettore(),
'5.3.8',
vero
);
}
add_action( 'wp_enqueue_scripts', 'htg_enqueue_bootstrap' );
Cinque cose in quello snippet guadagnano il loro posto:
- Vettore(), non matrice('jquery'). bootstrap 5 non ha dipendenza jQuery. Aggiungendo un codice di caricamento non ti serve.
- Il .bundle.min.js il file include Popper, la piccola libreria che posiziona i menu a discesa, suggerimenti, e popover. Utilizza il file non bundle solo se salti questi componenti.
- vero alla fine carica lo script nel footer, quindi non impedisce il rendering della tua pagina.
- Il «5.3.8’ stringa della versione dice a WordPress di eseguire correttamente il busting della cache quando esegui l'aggiornamento in un secondo momento.
- wp_enqueue_scripts è il gancio del front-end. Non toccherà la tua area di amministrazione.
Salva il file, ricarica il tuo sito, e visualizza la fonte. Dovresti vedere il foglio di stile Bootstrap e lo script stampati automaticamente. Per confermare l'esecuzione di JavaScript, rilasciare una fisarmonica o un modale Bootstrap su una pagina e fare clic su di esso. Se si anima, hai finito.
Il percorso CDN significa anche che Bootstrap arriva dai server vicini al tuo visitatore e spesso è già memorizzato nella cache del browser da un altro sito. Se la velocità della pagina è la tua priorità, vale la pena comprendere quel bordo, e la nostra analisi di come L'hosting CDN influisce sui tempi di caricamento spiega i compromessi in termini semplici.
Metodo 2: Ospita il bootstrap localmente (Per controllo e privacy)
I CDN sono convenienti, ma consegnano a terzi un record dei tuoi visitatori’ Indirizzi IP. Per i siti sensibili al GDPR nell'UE, o chiunque voglia zero richieste esterne, ospitare i file da solo è più pulito. Smetti anche di dipendere dal tempo di attività di qualcun altro.
I passaggi:
- Scarica il Bootstrap compilato 5.3.8 pacchetto da getbootstrap.com (il “compilato CSS e JS” Scarica, non i file di origine).
- Rilascia bootstrap.min.css nel tuo tema su /risorse/css/ e bootstrap.bundle.min.js in /risorse/js/.
- Modifica i due URL CDN nello snippet sopra in percorsi locali utilizzando get_template_directory_uri(), ad esempio get_template_directory_uri() . '/assets/css/bootstrap.min.css'. Utilizza get_stylesheet_directory_uri() invece se i file vivono in un tema figlio.
Tutto il resto rimane identico. L'unica cosa che perdi è il vantaggio della cache condivisa. Ciò che guadagni è la piena proprietà: nessun layout interrotto se un CDN ha una brutta giornata, e niente che perda i dati dei visitatori fuori sede.
Metodo 3: Inizia da un tema iniziale Bootstrap
Metodi 1 e 2 avvita Bootstrap su un tema esistente. Se stai costruendo un tema da zero, non sballare nulla. Inizia da una base che collega già Bootstrap alla struttura dei modelli di WordPress per te.
Sottocinturino è la scelta a lungo termine. Salda il classico antipasto Underscores (il tema essenziale che gli sviluppatori di WordPress utilizzano da anni) a Bootstrap, con Sass già configurato in modo da poter ricompilare una build personalizzata. Avviatore di bootstrap WP è il più leggero, opzione più amichevole per un primo tema personalizzato. saggio di Roots si trova all'estremità avanzata: utilizza il template Blade e una pipeline di build moderna, ed è indipendente dal framework, così puoi eseguire Bootstrap o sostituirlo.
Il guadagno è reale. Un tema iniziale ti offre una barra di navigazione funzionante, un modello di commento, impaginazione, e hook WooCommerce che già parlano il markup di Bootstrap. Salti il noioso impianto idraulico e scrivi solo le parti che rendono tuo il tuo progetto. Il costo è una curva di apprendimento: dovrai sentirti a tuo agio con Sass, un terminale, e ricompilare le risorse.
Un avvertimento onesto. Prima di impegnarti in qualsiasi antipasto, controlla la data dell'ultimo aggiornamento su GitHub. Uno starter che non ha rilasciato una versione da due anni potrebbe comunque prendere di mira Bootstrap 4 e le sue abitudini jQuery. Questo ti riporta direttamente al campo obsoleto da cui questa guida sta cercando di farti uscire.
Metodo 4: Utilizza un plugin per i blocchi Bootstrap (Nessun codice)
Non uno sviluppatore? Puoi comunque ottenere la griglia e i componenti di Bootstrap all’interno dell’editor di blocchi standard di WordPress. Plugin come Blocchi Bootstrap dell'editor dei blocchi aggiungi righe basate su Bootstrap, colonne, pulsanti, e contenitori come blocchi nativi. Costruisci layout reattivi trascinando i blocchi, e il plugin accoda Bootstrap dietro le quinte.
Questo è il percorso per gli editor di contenuti e i proprietari di piccole imprese a cui piace l'aspetto di Bootstrap ma non vogliono mai aprire Functions.php. È anche l’unico metodo che funziona in modo naturale con l’editor a blocchi, poiché gli altri tre presuppongono che tu stia modellando i modelli a mano.
Sii realistico riguardo al soffitto, anche se. Un plugin per i blocchi ti fornisce i componenti di Bootstrap, non la piena libertà del framework che uno sviluppatore ottiene da Methods 1 Attraverso 3. Se il tuo obiettivo è un design personalizzato preciso al pixel, lo supererai. Se vuoi semplicemente pulito, sezioni reattive senza codice, fa il suo lavoro. E se “nessun codice” è davvero quello che cerchi, confrontarlo con un Costruttore WordPress AI. Quel percorso può raggiungere un layout finito più velocemente dell'apprendimento delle lezioni Bootstrap.
Ora scrivi il markup Bootstrap: La griglia in pratica
Caricare Bootstrap è metà del lavoro. L'altra metà sta scrivendo le sue lezioni nelle tue pagine, e la maggior parte dei tutorial si interrompe prima di mostrartelo. Se hai utilizzato Methods 1 Attraverso 3, aggiungi markup all'interno dei file modello del tuo tema o in un blocco HTML personalizzato su qualsiasi pagina o post. (Il plugin del Metodo 4 crea il markup per te, quindi puoi saltare questa parte.)
Bootstrap è basato su a 12-griglia di colonne. Tre classi nidificate lo guidano: un contenitore per l'involucro esterno, una riga al suo interno, ed elementi .col per ogni colonna. Ecco un layout che si impila sui telefoni e si divide in 8 e 4 colonne su tablet e versioni successive:
<div class ="contenitore">
<div class ="riga">
<div class ="col-md-8">Contenuto principale</div>
<div class ="col-md-4">Sidebar</div>
</div>
</div>
Il col-md- prefisso è il trigger reattivo. Al di sotto del breakpoint medio (768px), entrambe le colonne raggiungono l'intera larghezza e si impilano. A 768px e più ampio, si siedono fianco a fianco. Scambia md con sm, lg, o xl per spostarsi dove avviene l'interruttore. Una riga di nomi di classe sostituisce le query multimediali che altrimenti scriveresti a mano.
I componenti funzionano allo stesso modo. Copia il markup per una carta, barra di navigazione, o modale direttamente dai documenti di Bootstrap, incollalo nel tuo modello, e gli stili che hai accodato verranno applicati immediatamente. Nessuna configurazione aggiuntiva per componente.
Il conflitto di cui nessuno ti avverte
È qui che la maggior parte dei progetti Bootstrap-in-WordPress vanno di traverso. Il tuo tema attivo ha già il proprio CSS. Quando Bootstrap viene caricato in alto, i due combattono per gli stessi nomi di classe e stili di base. I pulsanti sembrano spenti. Interruzioni di spaziatura. Un layout che ieri andava bene crolla.
Tre collisioni causano quasi tutto:
- La classe .container. Molti temi definiscono il proprio .container con una larghezza massima diversa. Bootstrap lo ridefinisce, e qualunque caricamento venga effettuato per ultimo vince. Di conseguenza, i layout saltano.
- La base si ripristina. Il riavvio di Bootstrap ridisegna elementi grezzi come il corpo, intestazioni, ed elenchi. Ciò può tranquillamente sovrascrivere la tipografia del tuo tema.
- Doppie griglie. Se il tuo tema utilizza già una griglia (Flexbox o griglia CSS), La griglia di Bootstrap si sovrappone in cima, e gli elementi finiscono per annidarsi in due sistemi concorrenti.
Hai due soluzioni pulite. Il primo è quello ambito Bootstrap: avvolgi le sezioni a cui vuoi applicare lo stile in una classe genitore (un modello comune lo chiama bootstrap-iso). Quindi compila Bootstrap in modo che le sue regole si applichino solo all'interno di quel wrapper. Smette di toccare il resto del tema. La seconda correzione, spesso quello più intelligente, è quello di creare un pacchetto Bootstrap personalizzato. Importa solo le parti che usi, la griglia e un paio di componenti, e lascia Reboot fuori. Meno CSS, meno collisioni, pagine più veloci. Questo è anche il motivo per cui un tema iniziale (Metodo 3) evita il problema dall'inizio: è costruito attorno a Bootstrap, quindi nulla si scontra.
Quale metodo dovresti scegliere?
Abbina il metodo a ciò che stai effettivamente costruendo. Tre casi comuni:
- Esegui un sito finito su un tema di terze parti e desideri alcuni componenti Bootstrap. Utilizzare il metodo 1 (Accodamento CDN) all'interno di un tema figlio. Non cercare un tema iniziale; ricostruire l'intero sito per aggiungere una modale è eccessivo. Se compaiono conflitti, ambito Bootstrap come descritto sopra.
- Sei uno sviluppatore che crea un tema personalizzato partendo da zero. Utilizzare il metodo 3 (Sottostrap o Salvia). L'accodamento manuale di Bootstrap su un tema _s vuoto ricrea semplicemente ciò che Understrap ti offre già, meno i modelli WooCommerce e navbar testati.
- Sei un editor di contenuti o il proprietario di un negozio che desidera layout reattivi senza codice. Utilizzare il metodo 4 (un plugin per i blocchi). La modifica di Functions.php non vale il rischio per il tuo caso d’uso. Se gestisci un negozio, abbinalo a un hosting ottimizzato per il lavoro. I nostri appunti su Hosting di e-commerce WordPress spiega perché un front-end Bootstrap necessita ancora di un back-end veloce.
Un requisito di privacy o di conformità prevale su tutti e tre. Se non puoi inviare i dati dei visitatori a un CDN esterno, cambia il metodo scelto con l'hosting locale del Metodo 2.
Domande frequenti
Ho ancora bisogno di jQuery per utilizzare Bootstrap 5 in WordPress?
No. bootstrap 5 ha abbandonato jQuery e funziona su JavaScript vanilla. Quando accodi lo script, lasciare vuoto l'array delle dipendenze (Vettore()), non matrice('jquery'). L'aggiunta di jQuery carica il codice aggiuntivo che i componenti Bootstrap non chiamano mai. Solo Bootstrap 4 e prima ne avevo bisogno.
Bootstrap è adatto per WordPress? 2026?
sì, se stai codificando un tema o desideri componenti reattivi coerenti. La griglia e le utilità di Bootstrap riducono i tempi di sviluppo e funzionano su tutti i browser moderni senza correzioni aggiuntive. È meno utile se crei con l'editor a blocchi o un generatore di pagine, poiché questi strumenti gestiscono già il layout reattivo. Abbinalo al modo in cui lavori effettivamente.
L'aggiunta di Bootstrap rallenta un sito WordPress?
Può, se carichi l'intero framework per due componenti. I CSS e JS completamente minimizzati aggiungono peso reale. Caricandoli da un CDN, rinviando lo script al piè di pagina, e creare un pacchetto personalizzato con solo le parti che usi mantiene il successo piccolo. Puoi anche caricare Bootstrap solo dove è necessario: avvolgi l'accodamento in un condizionale come is_page() quindi non viene spedito su ogni URL. Un tema gonfio sovrapposto al Bootstrap completo è il vero problema di velocità, non Bootstrap da solo.
Posso utilizzare Bootstrap con l'editor di blocchi di WordPress?
sì, tramite un plugin come Block Editor Bootstrap Blocks, che aggiunge righe Bootstrap, colonne, e pulsanti come blocchi nativi. Bootstrap con accodamento manuale (Metodo 1) non espone i suoi componenti all'interno dell'editor, quindi scriveresti manualmente i nomi delle classi in blocchi HTML personalizzati. Per flussi di lavoro incentrati sull'editor, il percorso del plugin è quello pratico.
Dovrei utilizzare un CDN Bootstrap o ospitare i file localmente?
Utilizza la CDN per comodità e per provare la memorizzazione nella cache condivisa del browser. Ospita localmente se hai requisiti GDPR o privacy, vogliono zero richieste esterne, o non vuoi dipendere dal tempo di attività di un'altra rete. Il codice è quasi identico; basta scambiare gli URL CDN con get_template_directory_uri() percorsi ai file all'interno del tuo tema.
Ottieni il metodo giusto, Non solo il codice
Bootstrap e WordPress si integrano perfettamente una volta che smetti di seguire i tutorial dell'era 2018. Versione in coda 5.3.8 in un tema figlio, eliminare la dipendenza jQuery, e individua i tuoi stili in modo che non contrastino con il tuo tema. Ciò copre la stragrande maggioranza dei progetti reali. Scegli un tema iniziale solo quando stai costruendo da zero, e un plugin che blocca solo quando rimani fuori dal codice.
Se questo fa parte di una build più grande, alcune guide correlate approfondiscono. Confrontare hosting WordPress gestito negli Stati Uniti per sapere dove eseguire un tema personalizzato. E rivedi se hai effettivamente bisogno di programmare nella nostra opinione sui costruttori di siti Web rispetto a WordPress. Un quadro ripaga solo quando il resto dello stack, hosting incluso, può tenere il passo.