L'aggiunta di elementi CSS come tooltip, pulsanti colorati ed effetti al passaggio del mouse può aiutare i tuoi contenuti a distinguersi. Il problema è che la maggior parte delle persone non sa come usare il CSS per aggiungere pulsanti colorati, tabelle, etichette, ecc. Ti abbiamo mostrato come aggiungere widget colorati e tabelle in WordPress. In questo articolo, ti mostreremo come utilizzare Twitter Bootstrap CSS in WordPress utilizzando gli shortcode.
Twitter Bootstrap è un framework CSS e JavaScript che aiuta ad accelerare il design e la funzionalità del tuo sito. È stato sviluppato da Mark Otto e Jacob Thornton su Twitter come framework per promuovere la coerenza tra i loro strumenti interni. Successivamente è stato rilasciato come strumento open source. È bello, semplice e compatibile su tutti i browser.
La prima cosa da fare è installare e attivare il plugin WordPress Twitter Bootstrap CSS. Dopo l'attivazione, il plugin aggiungerà una voce di menu Twitter Bootstrap nell'amministrazione di WordPress. Cliccandoci sopra, verrai portato alla dashboard del plugin.
Nella dashboard, vedrai un sacco di pubblicità aggiunte dall'autore del plugin. Scorri oltre e vedrai gli shortcode che puoi aggiungere nei tuoi post. Ogni shortcode è collegato alla pagina di supporto del plugin dove puoi vedere altri esempi di utilizzo di questi shortcode.
Sotto la voce di menu Twitter Bootstrap nel tuo pannello di amministrazione, c'è un link per configurare le impostazioni CSS di Bootstrap. Cliccando su di esso verrai reindirizzato alla pagina di configurazione dove potrai modificare le impostazioni per adattarle alle tue esigenze. Hai la possibilità di scegliere quale versione CSS di Bootstrap desideri utilizzare. Sotto troverai opzioni più adatte agli utenti di livello avanzato.
Ora che abbiamo esaminato la configurazione, aggiungiamo alcuni elementi CSS di bootstrap a un post del blog. Incolla semplicemente gli shortcode in questo modo nel contenuto del tuo post o della tua pagina:
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
Ecco come appariranno questi shortcode nel post del blog:
Ci sono molti altri elementi CSS che puoi aggiungere ai tuoi post. Tooltip, menu a fisarmonica, popup, barre di avanzamento, ecc. Il sito web di questo plugin ha più documentazione su come utilizzare queste funzionalità. Se sei curioso riguardo alle icone, puoi consultare il sito ufficiale di Twitter Bootstrap per il set completo di icone che puoi utilizzare.
Sappiamo che i framework per temi come Genesis e altri vengono forniti con le proprie opzioni. Utilizzi elementi CSS nei tuoi post? Facci sapere lasciando un commento qui sotto.
kezzy
Grazie per questo post. Sto usando un tema basato sul framework bootstrap e il processo è semplice piuttosto che inserire shortcode qua e là. Comunque, non sarebbe più facile accodare lo script e lo stile bootstrap all'header di un tema e ottenere lo stesso risultato?
Thiago
Grazie mille! Questo può aiutarmi molto.
Deprito
Sto usando genesis, ma quando provo questo plugin.. il mio css è impazzito..
Come posso risolvere? Sono un po' confuso..
Supporto WPBeginner
Deprito, Genesis è di per sé un Theme Framework e far funzionare Twitter Bootstrap su Genesis richiederebbe passaggi aggiuntivi. Prova i forum di supporto di Genesis, qualcuno deve già averlo fatto.
Amministratore
James Matthews
Tutorial fantastico. Ha chiarito molta confusione che avevo riguardo a Twitter Bootstrap. Alcune parti di Bootstrap sono ancora difficili da capire per me, ma questo sarà sicuramente molto utile man mano che mi familiarizzerò con esso.
Steven Blake mba
Grazie per quello che sono sicuro debba essere un buon articolo. Trovo piuttosto frustrante la quantità di articoli che potrebbero davvero interessarmi e che dimenticano o non si rendono conto che l'uso di parole gergali con cui hai a che fare ogni giorno potrebbe non essere compreso da chiunque non l'abbia mai incontrato prima. Cerco di non farlo nel mio lavoro di life coach, che se pubblicizzassi come praticante NLP allontanerei il 90% delle persone che non sanno cosa sia.
Purtroppo, finché non capirò cos'è un Twitter Bootstrap, non ho davvero bisogno dei dettagli su come installarlo. Potrebbe essere che mi stia perdendo qualcosa, ma non ho il tempo di fare più ricerche di quelle che già faccio e sono arrivato al tuo articolo, solo che non voglio doverne cercare diversi altri prima di tornare!
Una sola riga che spiega cosa fa e i vantaggi di avere un Twitter Bootstrap farebbe la differenza tra il continuare a leggere e il passare oltre.
Questa è una critica costruttiva, tra l'altro, aggiungi la descrizione in questo e in qualsiasi blog successivo e vedrai migliorare i tuoi risultati. Auguri, Steven
Noumaan Yaqoob
@Steven Twitter Bootstrap è un insieme di strumenti di design predefiniti che aiuta altri designer e sviluppatori a utilizzare questi elementi nei propri progetti.
Lo scopo di questo articolo e del plugin è aiutare utenti come te a utilizzare Twitter Bootstrap senza imparare codice o CSS.
Richie
Ottimo tutorial.
craig grella
ottimo post, grazie. Ho usato Bootstrap e l'ho adattato per tesi e alcuni altri temi, ma questo sarà utile per siti che non necessitano del framework, ma solo dei pulsanti e delle icone.
bella osservazione!