Come aggiungere Twitter Bootstrap CSS in WordPress utilizzando Shortcodes

L'aggiunta di elementi CSS come suggerimenti, pulsanti colorati e effetti di rollover può aiutare i tuoi contenuti a risaltare. Il problema è che la maggior parte delle persone non sa come usare i CSS per aggiungere pulsanti, tabelle, etichette colorate, ecc. Vi abbiamo mostrato come aggiungere widget e tabelle colorati in WordPress. In questo articolo, ti mostreremo come usare Twitter Bootstrap CSS in WordPress usando gli shortcode.

Twitter Bootstrap è un framework CSS e JavaScript che aiuta a migliorare rapidamente la progettazione e le funzionalità del tuo sito. È stato sviluppato da Mark Otto e Jacob Thornton su Twitter come framework per incoraggiare 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 che devi fare è installare e attivare il plugin di Bootstrap per Twitter di WordPress su Twitter. All'attivazione, il plugin aggiungerà una voce di menu Bootstrap di Twitter nell'amministratore di WordPress. Cliccando su di esso ti porterà alla dashboard del plugin.

Sul cruscotto, vedrai un sacco di pubblicità aggiunte dall'autore del plugin. Scorri verso il basso e vedrai gli shortcode che puoi aggiungere nei tuoi post. Ogni shortcode è collegato alla pagina di supporto del plugin in cui è possibile vedere più esempi di utilizzo di questi shortcode.

Sotto la voce di menu Bootstrap di Twitter nel tuo amministratore, c'è un collegamento per configurare le impostazioni CSS di Bootstrap. Cliccando su questo vi porterà alla pagina di configurazione in cui è possibile modificare le impostazioni in base alle proprie esigenze. Hai la possibilità di scegliere la versione CSS di Bootstrap che desideri utilizzare. Di seguito troverai le opzioni più adatte per gli utenti di livello avanzato.

Ora che abbiamo esaminato la configurazione, aggiungiamo alcuni elementi di bootstrap css a un post del blog. Basta incollare gli shortcode come questo nel tuo post o contenuto della pagina:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Scarica [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com"] Annulla [/ TBS_BUTTON] [TBS_BUTTON color = "successo" link = "http://example.com"] Ulteriori informazioni [/ TBS_BUTTON] Icone: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Attenzione : Label [/ TBS_LABEL] [TBS_LABEL] Danger: Label [/ TBS_LABEL] [TBS_LABEL] Green: Label [/ TBS_LABEL] [TBS_ALERT] Impostazioni salvate [/ 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 accordian, finestre popup, barre di avanzamento, ecc. Il sito web di questo plugin ha più documentazione su come utilizzare queste funzionalità. Se sei curioso di conoscere le icone, puoi consultare il sito ufficiale di Twitter Bootstrap per il set completo di icone che puoi utilizzare.

Sappiamo che le strutture tematiche come Genesis e gli altri hanno le loro opzioni. Usi elementi CSS nei tuoi post? Facci sapere lasciando un commento qui sotto.