Share
Fai una ricerca su Google per "Tema WordPress con Bootstrap" e otterrai centinaia di risultati. Queste includono guide che ti spiegano come utilizzare Bootstrap per creare il tuo tema e temi disponibili in commercio e liberamente disponibili utilizzando il framework Bootstrap.
Cerca "Bootstrap" nel repository di temi WordPress e ottieni 199 risultati. È molta scelta.
Sembra che lo sviluppo di temi WordPress utilizzando Bootstrap sia di gran moda. Ma è sempre l'approccio migliore per il tuo workflow di sviluppo del tema?
Qui vedrò i pro e i contro dell'uso di Bootstrap per i temi di WordPress e ti aiuterà a identificare quando usi Bootstrap per il tuo flusso di lavoro e quando non lo farà.
Il sito Web Bootstrap descrive Bootstrap come:
il più popolare framework HTML, CSS e JS per lo sviluppo di primi progetti mobili e reattivi sul web.
Questo ti dice un paio di cose:
Se presti attenzione, noterai che ciò non include PHP. Mentre Bootstrap è un framework di applicazione, non è come un framework di temi: non ti offre alcuno dei file di modelli di tema che dovrai creare se lo vuoi sfruttare in un tema. Invece, ciò che ti offre è un framework di stili e script che renderà più facile per te ottenere un sito reattivo attivo e funzionante e aggiungere interazioni ed eventi che richiedono JavaScript.
Bootstrap è stato originariamente progettato come framework per aiutare gli sviluppatori di Twitter a lavorare in modo più efficiente e coerente. Il suo primo nome era Twitter Blueprint, che è stato cambiato in Bootstrap dopo che altri sviluppatori sono stati coinvolti e il progetto ha iniziato a crescere.
È stato rilasciato come framework open source nel 2011 e da allora è stato utilizzato per alimentare una varietà di applicazioni, inclusi temi WordPress.
Quando ho iniziato a utilizzare Bootstrap, il suo principale punto di forza era la sua reattività in un momento in cui un sacco di sviluppo web (incluso lo sviluppo di WordPress) doveva ancora raggiungere il responsive web design. Non era originariamente reattivo: questo è stato aggiunto nel 2012 e il framework è stato reso mobile-first nel 2013.
Se scarichi Bootstrap, vedrai che consiste in un set di fogli di stile (incluse versioni minificate), file JavaScript e glyphicon, che sono inclusi nei file dei font. Questi non sostituiscono i file del tema: invece li chiamerai nel tuo foglio di stile e nel file delle funzioni secondo necessità.
Non fornirò una spiegazione approfondita su come usi Bootstrap con il tuo tema WordPress qui: questo è trattato in dettaglio in questo tutorial. Vedrò invece come Bootstrap può aiutare o ostacolare il flusso di lavoro di sviluppo del tema WordPress e le situazioni in cui potresti o non potresti usarlo.
La popolarità di Bootstrap come framework per i temi di WordPress indica che ha sicuramente un posto. Diamo uno sguardo ad alcuni dei vantaggi dell'uso di Bootstrap.
Bootstrap ti offre automaticamente uno stile reattivo e mobile per il tuo tema. Se hai faticato a fare i conti con lo sviluppo di temi reattivi, ti farà risparmiare il duro lavoro di imparare come rendere i tuoi fogli di stile reattivi e aggiungere query multimediali.
Bootstrap utilizza un layout basato su griglia di 12 colonne con classi di griglia che è possibile utilizzare con gli elementi nei file modello per rendere il contenuto adatto alla griglia.
I vantaggi di questo approccio includono:
Secondo me, il layout e la tipografia che ottieni con Bootstrap è molto bello. Non vincerà nessun premio di design, ma ti aiuterà a costruire un tema moderno, facile da interagire e leggibile. Ci sono alcune caratteristiche di stile che mi piacciono particolarmente:
Accentsconagua
Oltre a introdurre le sue classi per lo styling, Bootstrap include anche lo styling per l'intera gamma di elementi HTML5 che puoi aspettarti di utilizzare nel tuo tema. Disegnare tutto questo da zero può essere una vera seccatura, quindi ti consente di risparmiare un sacco di lavoro, oltre a rendere più facile l'utilizzo della marcatura semantica nel tuo tema.
Invece di dover utilizzare plug-in o script di origine da altre parti, Bootstrap offre una vasta gamma di script che ti aiuteranno ad aggiungere le animazioni e le interazioni più comunemente utilizzate al tuo sito. Questi includono:
... e altro ancora. Ciò può accelerare il tuo sviluppo e assicura anche che tutti gli script giochino bene l'uno con l'altro. Se stai usando più di uno o due di questi, Bootstrap può rendere il tuo sviluppo del tema molto più semplice; tuttavia, se si sta solo utilizzando uno o forse due, potrebbe esserci un approccio più efficiente con meno codice aggiunto.
Tuttavia, non credo che Bootstrap sia lo strumento giusto per tutti gli sviluppatori di temi WordPress. Ecco alcuni aspetti negativi dell'utilizzo di Bootstrap durante lo sviluppo dei temi.
Ho già fatto riferimento al sistema a griglia reattivo utilizzato nei fogli di stile Bootstrap e alla moltitudine di classi che è possibile utilizzare per sfruttare questo aspetto nel tema. Questo è fantastico se sei preparato a familiarizzare con quelle lezioni e capire come usarle nel tuo tema. Tuttavia, se non hai bisogno di un layout così complicato e utilizzerai solo alcuni degli stili, potresti scoprire che passi una quantità sproporzionata di tempo a lavorare in tutte le classi e a capire quali utilizzare.
Il foglio di stile include 155 linee di codice solo per il layout di griglia nella larghezza dello schermo più piccola: è molto da imparare se si vuole ottenere il massimo da esso e più della maggior parte dei temi avranno bisogno.
Oltre a questo, ci sono classi per i glyphicon, per i pulsanti e molto altro.
Se il tuo tema utilizzerà una parte significativa di questo stile (o userai Bootstrap per supportare più temi), allora vale la pena prendersi del tempo per imparare come funzionano gli stili Bootstrap. Ma se hai solo bisogno di un paio di colonne e un design reattivo, allora potrebbe essere eccessivo.
Le query multimediali utilizzate da Bootstrap si basano su un'ipotesi relativa alla larghezza dello schermo e del dispositivo che sta diventando obsoleta.
Queste sono le domande dei media:
/ * Dispositivi molto piccoli (telefoni, meno di 768px) * / / * Nessuna query multimediale poiché questa è l'impostazione predefinita in Bootstrap * / / * Dispositivi di piccole dimensioni (tablet, 768px e superiori) * / @media (larghezza minima: @screen -sm-min) ... / * Dispositivi di medie dimensioni (desktop, 992px e superiori) * / @media (larghezza minima: @ schermata-md-min) ... / * Dispositivi di grandi dimensioni (desktop di grandi dimensioni, da 1200 px in su) * / @media (min-width: @ screen-lg-min) ...
Nell'ultimo anno circa, lo sviluppo reattivo si è spostato dai punti di interruzione predefiniti per le query sui media e verso i punti di interruzione basati sulla progettazione. Mentre queste media query sono basate e funzioneranno sicuramente con il design di Bootstrap (quindi non dovrebbero causare problemi su nessuno dei dispositivi o browser supportati, di cui ce ne sono molti), non dà la flessibilità che si ha se si ' re codifica il tuo.
Se dovessi decidere di aggiungere una media query intermedia al tuo foglio di stile, dovresti prendere le 155 linee di layout del layout per il sistema di griglia e adattarle al nuovo punto di interruzione, non un compito che invidio!
Sì, immagino che stavate aspettando questo - la risposta di riserva di qualsiasi sviluppatore web scettico a un nuovo framework o strumento.
Bootstrap offre innegabilmente un sacco di funzionalità e stile che puoi utilizzare nel tuo tema, ed è una grande cosa. Tuttavia, se utilizzerai solo una frazione di ciò che viene fornito, significa che stai aggiungendo tutto quel codice extra per niente.
I file sono miniati, il che aiuta, ma anche così, hai veramente bisogno di tutto quel codice inutilizzato nel tuo tema?
Aggiungi Bootstrap al tema, chiama il foglio di stile dal foglio di stile del tema e bam! Hai un layout pronto e reattivo che sembra perfetto. La maggior parte di noi sarebbe tentata di lasciarla a questo, aggiungendo alcune modifiche di colore forse ma non molto di più.
Ciò significa che il tuo progetto sarà basato su ciò che Bootstrap fornisce, e non su ciò che è richiesto per il tuo sito. Lavoro con molti clienti e, prima ancora di iniziare a discutere del design del loro sito, faccio loro delle domande sugli obiettivi del loro sito, sul pubblico e altro ancora. Tutto questo informerà il design del sito, sia in termini di immagini che in termini di interfaccia utente.
Il pericolo di molti temi che usano Bootstrap è che ci ritroveremo con così tanti temi che sembrano essenzialmente gli stessi. Gli sviluppatori di temi di WordPress hanno fatto un ottimo lavoro nel buttare via le accuse dei loro temi 'simili a WordPress' negli ultimi anni, quindi vogliamo che tutti i nostri temi sembrino 'Bootstrap'?
In definitiva penso che il fattore più significativo che potrebbe scoraggiare l'utilizzo di Bootstrap sia il fatto che non è stato progettato per funzionare con WordPress e che funziona in un modo molto diverso.
Un framework per tema WordPress ti darà spesso tutto ciò che ottieni da Bootstrap e in un modo molto più allineato al modo in cui gli sviluppatori di WordPress lavorano. Questi non devono essere costosi o avere enormi basi di codice: il tema Wonderflux, ad esempio, è gratuito e open source e include un sistema di griglia reattivo (come Bootstrap ma meno gonfio) e una libreria di funzioni e ganci che non si usano " t ottenere con Bootstrap.
Un esempio di come Bootstrap e WordPress non sono compatibili è nella progettazione dei menu di navigazione. Il tuo menu WordPress non funzionerà immediatamente con Bootstrap abilitato: dovrai invece creare un navigatore personalizzato. Questo non è difficile da fare se sei a tuo agio con il codice, ma aggiunge un altro passo allo sviluppo del tuo tema.
Bootstrap ha sicuramente i suoi benefici. Se hai bisogno di un layout attraente, pulito e reattivo per il tuo sito e l'accesso a una gamma di effetti JavaScript, allora può aiutare ad accelerare il processo di sviluppo del tema.
Tuttavia, se hai intenzione di ottenere il massimo da Bootstrap, dovrai dedicare del tempo ad apprenderlo. C'è molto da imparare con Bootstrap, e se non hai intenzione di fare uso di tutto, allora potrebbe non valerne la pena.
Per concludere, raccomanderei l'uso di Bootstrap in una serie di circostanze:
E consiglierei di non usarlo in queste circostanze:
In definitiva, la decisione è tua!
