Inserire Bootstrap in WordPress
Admin
in Informatica, wordpress
Cos’è Bootstrap
Prima di capire come inserire Bootstrap in WordPress, è bene comprendere cos’è Bootstrap e quali sono le sue caratteristiche principali. Bootstrap è un framework CSS.
In informatica, un framework è una struttura, un’architettura logica, una piattaforma sulla quale è possibile progettare un software.
La rivoluzione apportata dall’avvento dei framework (ricordiamo tra i più famosi Symfony, Angular, Django, Ruby on Rails) sta nella notevole facilitazione del lavoro per i programmatori. In particolare Bootstrap agevola considerevolmente la creazione di siti web responsive e applicazioni web, semplificando il lavoro di web designer e web master.
UI design e temi WordPress
Lo User Interface Design, abbreviato UI design, abbraccia tutto ciò che riguarda la progettazione delle interfacce utente. Un settore che comprende dunque gli aspetti grafici di una interfaccia, il modo in cui vengono veicolate le informazioni contenute in un prodotto digitale, come è strutturato, in che modo l’utente può interagire con esso.
La figura professionale che domina in questo settore è l’UI designer.
Oltre ad avere delle ottime conoscenze in materia di grafica e web design, questo professionista si fa interprete delle necessità dell’utente finale. L’UI designer è in primo luogo un progettista il cui fine è proporre sempre nuove idee per facilitare e migliorare l’interazione tra macchina (software, applicazioni, siti web, IoT) e utente.
I temi WordPress
I temi WordPress vengono progettati e sviluppati valutando costantemente User Interface e User Experience. Un sito web deve essere accattivante visivamente ma, fattore più importante, deve essere intuitivo e favorire una navigazione agevole. Ma facciamo un passo indietro.
Un tema WordPress non è altro che l’insieme di aspetto e funzionalità di un prodotto web. È dunque importante scegliere il proprio tema in base a finalità e target del proprio sito. Per esempio, se ho bisogno di promuovere un ristorante, non sceglierò temi riguardanti l’industria dello spettacolo. Al tempo stesso, un tema sviluppato per l’e-commerce avrà tool differenti rispetto ad un tema realizzato per promuovere un portfolio.
Alla luce di queste variabili appena accennate, non è difficile immaginare la quantità di lavoro necessaria nella progettazione di un tema. Gradevolezza visiva e facilità di utilizzo: un binomio imprescindibile indipendentemente dal settore merceologico del nostro sito.
Inserire Bootstrap in WordPress, Bootstrap e i modelli di progettazione
I modelli di progettazione contenuti in Bootstrap si basano su HTML, CSS e JavaScript. Tali modelli comprendono ad esempio layout, contenuto, componenti come bottoni, menu a tendina, navbar, slideshow e tutti ciò che vi viene in mente pensando alla struttura e alla funzionalità di un sito web.
La progettazione di un sito web con Bootstrap si basa sul Grid System (sistema a griglia). Grazie a tale sistema sarà possibile definire i contenitori del nostro layout, ovvero le scatole che compongono lo scheletro del sito web, suddivise a loro volta in colonne interne.
La griglia può contenere un massimo di 12 colonne. In tal modo 12/12 sarà la rappresentazione di un’unica colonna ad ampiezza piena e, al contrario, 1/12 indicherà la porzione di spazio minima. Il Grid System è responsive, quindi si adatterà a qualsiasi tipo di schermo.
Al fine di comprenderne le potenzialità di Bootstrap e le molteplici possibilità offerte da questo framework, basta collegarsi al sito ufficiale https://getbootstrap.com/. Cliccando sulla voce di menu Documentation, potrete osservare la rappresentazione grafica dell’elemento che intendete incorporare nel vostro sito e il relativo codice da utilizzare. È possibile cercare l’elemento di vostro interesse sfruttando anche la search box del sito.
Inserire Bootstrap in WordPress, templates e plugin
Creare un template WordPress
Supponendo tu abbia una buona dimestichezza con HTML , CSS e con gli IDE (ambienti di sviluppo integrati), potrai creare da zero dei temi WordPress.
Per poter usufruire delle potenzialità di Bootstrap nella creazione del tuo tema, sarà sufficiente copiare e incollare i codici CSS e JS presenti sul sito ufficiale del framework. I codici si trovano su https://getbootstrap.com/ al percorso Documentation > Getting Started.
Il collegamento al foglio di stile va incollato prima del body, tra l’apertura e la chiusura del tag <head></head>.
Diversamente, gli script jQuery e popper.js si incollano appena prima della chiusura del tag <body></body>.
In alternativa, puoi scegliere di copiare e incollare direttamente il codice dello Starter Template che trovi nella medesima sezione del sito.
Utilizzare Bootstrap direttamente su piattaforma WordPress
Se, per lo sviluppo dei siti web, sei abituato ad utilizzare il CMS WordPress, per inserire Bootstrap in WordPress puoi scaricare direttamente temi e plugin preimpostati dalla bacheca del tuo ambiente WordPress.
Basterà effettuare delle query all’interno delle search box presenti nelle sezioni Temi e Plugin del tuo pannello di amministrazione WordPress.
In alternativa, per procedere con l’integrazione del tuo tema Bootstrap direttamente nella consolle di WordPress, occorre avere un ambiente di sviluppo con PHP, MySQL e WordPress.
Vedremo in un articolo successivo come è possibile integrare i propri file di stile e di sviluppo direttamente all’interno della cartella themes di WordPress presente sul tuo PC.
Se vi è piaciuto questo articolo sull’e-learning e l’apprendimento a distanza, restate in contatto con Orangee Academy per essere aggiornati sui nostri corsi di informatica online e sui prossimi articoli.
